patternfly-elements/elements/pf-radio/demo/multiple-groups.html at 3ed8f18653877645e8ec7b712a65d489bdc67f38 · patternfly/patternfly-elements · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<section class="container">
  <p>Basic <code>&lt;pf-radio&gt;</code> group</p>
  <div class="radio-group">
    <p>Salutation: </p>
    <pf-radio value="mr"    name="title" label="Mr"></pf-radio>
    <pf-radio value="miss"  name="title" label="Miss"></pf-radio>
    <pf-radio value="mrs"   name="title" label="Mrs"></pf-radio>
    <pf-radio value="ms"    name="title" label="Ms"></pf-radio>
  </div>

  <p><code>&lt;pf-radio&gt;</code> group with different name inside same parent</p>
  <div class="radio-group-container">
    <div class="radio-group">
      <p>Salutation: </p>
      <pf-radio value="mr"    name="title" label="Mr"></pf-radio>
      <pf-radio value="miss"  name="title" label="Miss"></pf-radio>
      <pf-radio value="mrs"   name="title" label="Mrs"></pf-radio>
      <pf-radio value="ms"    name="title" label="Ms"></pf-radio>
      <pf-radio value="dr"    name="title" label="Dr"></pf-radio>
      <pf-radio value="other" name="title" label="Other"></pf-radio>

      <div class='spacing'></div>

      <p>Score: </p>
      <pf-radio value="a" name="score" label="A"></pf-radio>
      <pf-radio value="b" name="score" label="B"></pf-radio>
      <pf-radio value="c" name="score" label="C"></pf-radio>
    </div>
  </div>

  <p><code>&lt;pf-radio&gt;</code> group with same name inside different parent</p>
  <div class="radio-group-container">
    <div class="radio-group">
      <p>Score: </p>
      <pf-radio value="a" name="score" label="A"></pf-radio>
      <pf-radio value="b" name="score" label="B"></pf-radio>
      <pf-radio value="c" name="score" label="C"></pf-radio>
    </div>

    <div class="radio-group">
      <p>Score: </p>
      <pf-radio value="a" name="score" label="A"></pf-radio>
      <pf-radio value="b" name="score" label="B"></pf-radio>
      <pf-radio value="c" name="score" label="C"></pf-radio>
    </div>
  </div>

  <p><code>&lt;pf-radio&gt;</code> group inside pf-card component (component inside shadowroot)</p>
  <pf-card>
    <div class="radio-group">
      <p>Score: </p>
      <pf-radio value="a" name="score" label="A"></pf-radio>
      <pf-radio value="b" name="score" label="B"></pf-radio>
      <pf-radio value="c" name="score" label="C"></pf-radio>
      <pf-radio value="d" name="score" label="D"></pf-radio>
    </div>
  </pf-card>
  <pf-button> Submit</pf-button>
</section>

<script type="module">
  import '@patternfly/elements/pf-radio/pf-radio.js';
  import '@patternfly/elements/pf-button/pf-button.js';
  import '@patternfly/elements/pf-card/pf-card.js'
</script>

<style>
.container{
  padding: 3rem;
}
.container p {
  font-size: 1.3rem;
  margin-block-end: 1rem;
}

.container .radio-group p {
  font-size: 1.1rem;
  margin-block-end: 0rem;
  margin-block-start: 0rem;
  color: var(--rh-color-red-60, #a60000);
  padding-right: 0.5rem;
}

.radio-group-container {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
}

.radio-group{
  display: flex;
  justify-content: flex-start;
  padding-bottom: 1rem;
  padding-right: 2rem;
  flex-direction: row;
  align-items: baseline;
}
.radio-group pf-radio{
  padding-right: 1rem;
}
pf-card{
  margin-bottom: 2rem;
  width: fit-content;
}

pf-card .radio-group{
  padding-top: 2rem;
  padding-bottom: 0.5rem;
}
.spacing{
  margin-right: 2rem;
}

code{
  font-size: 1.2rem;
}
</style>