Sha256: 3101fb26b918d845814af6019b0eba8d8677b1d26336e5806cdfb16ad866cc1c
Contents?: true
Size: 1.3 KB
Versions: 140
Compression:
Stored size: 1.3 KB
Contents
<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>
Version data entries
140 entries across 140 versions & 2 rubygems