Sha256: ac01342f452fdcc6940743325918d3fd9b7d9fe2aa2a83b9d9ff3f3208584883
Contents?: true
Size: 1.27 KB
Versions: 663
Compression:
Stored size: 1.27 KB
Contents
<%
options = [
{ label: 'Windows', value: '#FFA500' },
{ label: 'Siding', value: '#FF0000' },
{ label: 'Doors', value: '#00FF00' },
{ label: 'Roofs', value: '#0000FF' },
]
%>
<%= pb_rails("typeahead", props: { id: "typeahead-pills-example1", pill_color: "neutral", default_options: [options.first], options: options, label: "Colors", name: :foo, pills: true }) %>
<%= pb_rails("button", props: {id: "clear-pills", text: "Clear All Options", variant: "secondary"}) %>
<!-- This section is an example of the available JavaScript event hooks -->
<%= javascript_tag defer: "defer" do %>
document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-option-select", function(event) {
console.log('Option selected')
console.dir(event.detail)
})
document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-option-remove", function(event) {
console.log('Option removed')
console.dir(event.detail)
})
document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-clear", function() {
console.log('All options cleared')
})
document.querySelector('#clear-pills').addEventListener('click', function() {
document.dispatchEvent(new CustomEvent('pb-typeahead-kit-typeahead-pills-example1:clear'))
})
<% end %>
Version data entries
663 entries across 663 versions & 2 rubygems