Sha256: c111b4af065d8fb42d5168c33dda52a9f89616654af3df1982735bb3300f0381
Contents?: true
Size: 1.25 KB
Versions: 28
Compression:
Stored size: 1.25 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", 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
28 entries across 28 versions & 1 rubygems