Primer ViewComponents v0.36.0

Previews

No matching results.

x
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
<em>
  <p class="color-fg-accent">This select list controls which field is visible.</p>
</em>
<div class="FormControl width-full FormControl--fullWidth">
  <label class="FormControl-label" for="dietary_pref">
    Dietary preference
  </label>
  <div class="FormControl-select-wrap">
    <select aria-describedby="validation-ab5108c8-4d08-4d4c-b83d-f01f9b18ae46" class="FormControl-select FormControl-medium" name="dietary_pref" id="dietary_pref"><option value="meatatarian">Meatatarian</option>
      <option value="vegetarian">Vegetarian</option></select>
  </div>
  <div class="FormControl-inlineValidation" id="validation-ab5108c8-4d08-4d4c-b83d-f01f9b18ae46" hidden="hidden">
    <span class="FormControl-inlineValidation--visual" data-target="" hidden><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-check-circle-fill">
        <path d="M6 0a6 6 0 1 1 0 12A6 6 0 0 1 6 0Zm-.705 8.737L9.63 4.403 8.392 3.166 5.295 6.263l-1.7-1.702L2.356 5.8l2.938 2.938Z"></path>
      </svg></span>
    <span class=" FormControl-inlineValidation--visual" data-target=""><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill">
        <path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path>
      </svg></span>
    <span></span>
  </div>
</div>
<hr>
<em>
  <p class="color-fg-accent">This is the multi input.</p>
</em>
<div aria-describedby="validation-1b630301-886d-4ea2-a8ca-63325387629b" class="FormControl width-full FormControl--fullWidth">
  <label class="FormControl-label" for="dish">
    Dietary preference
  </label>
  <primer-multi-input data-name="dish">
    <div class="FormControl-select-wrap">
      <select data-name="meatatarian" data-targets="primer-multi-input.fields" aria-describedby="validation-c4041629-d6e8-47e1-8a44-d3dc155687f6" class="FormControl-select FormControl-medium" name="dish" id="dish"><option value="steak">Steak</option>
        <option value="salmon">Salmon</option></select>
    </div>
    <div class="FormControl-select-wrap" hidden="hidden">
      <select hidden="hidden" data-name="vegetarian" data-targets="primer-multi-input.fields" disabled="disabled" aria-describedby="validation-129d74a5-c77d-4956-806a-1c5f49a2de66" class="FormControl-select FormControl-medium" name="dish" id="dish"><option value="portobello">Portobello mushroom</option>
        <option value="tofu">Tofu curry</option></select>
    </div>
  </primer-multi-input>
  <div class="FormControl-inlineValidation" id="validation-1b630301-886d-4ea2-a8ca-63325387629b" hidden="hidden">
    <span class="FormControl-inlineValidation--visual" data-target="" hidden><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-check-circle-fill">
        <path d="M6 0a6 6 0 1 1 0 12A6 6 0 0 1 6 0Zm-.705 8.737L9.63 4.403 8.392 3.166 5.295 6.263l-1.7-1.702L2.356 5.8l2.938 2.938Z"></path>
      </svg></span>
    <span class=" FormControl-inlineValidation--visual" data-target=""><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill">
        <path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path>
      </svg></span>
    <span></span>
  </div>
</div>
<script type="text/javascript" data-eval="true">
  const dietaryPrefList = document.querySelector("[name=dietary_pref]");
  const dishMulti = document.querySelector("[data-name=dish]");
  dietaryPrefList.onchange = (evt) => {
    switch (evt.target.value) {
      case 'meatatarian':
        dishMulti.activateField('meatatarian');
        break;
      case 'vegetarian':
        dishMulti.activateField('vegetarian');
        break;
    }
  };
</script>
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
<em>
  <p class="color-fg-accent">This select list controls which field is visible.</p>
</em>
<%= render(Primer::Alpha::Select.new(name: :dietary_pref, label: "Dietary preference")) do |c| %>
  <% c.option(label: "Meatatarian", value: "meatatarian") %>
  <% c.option(label: "Vegetarian", value: "vegetarian") %>
<% end %>
<hr>
<em>
  <p class="color-fg-accent">This is the multi input.</p>
</em>
<%= render(Primer::Alpha::MultiInput.new(name: :dish, **system_arguments)) do |c| %>
  <% c.select_list(name: :meatatarian) do |list| %>
    <% list.option(label: "Steak", value: "steak") %>
    <% list.option(label: "Salmon", value: "salmon") %>
  <% end %>
  <% c.select_list(name: :vegetarian, hidden: true) do |list| %>
    <% list.option(label: "Portobello mushroom", value: "portobello") %>
    <% list.option(label: "Tofu curry", value: "tofu") %>
  <% end %>
<% end %>
<script type="text/javascript" data-eval="true">
  const dietaryPrefList = document.querySelector("[name=dietary_pref]");
  const dishMulti = document.querySelector("[data-name=dish]");
  dietaryPrefList.onchange = (evt) => {
    switch (evt.target.value) {
      case 'meatatarian':
        dishMulti.activateField('meatatarian');
        break;
      case 'vegetarian':
        dishMulti.activateField('vegetarian');
        break;
    }
  };
</script>

No notes provided.

No params configured.

No assets to display.