Primer ViewComponents v0.38.0

Previews

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>