Sha256: b7492bb82351f46f7aec90d8f8ce43a4c9f9fb41d3b3904df63e592887e52952
Contents?: true
Size: 1.93 KB
Versions: 11
Compression:
Stored size: 1.93 KB
Contents
<%
options = [
{ label: 'Orange', value: '#FFA500' },
{ label: 'Red', value: '#FF0000' },
{ label: 'Green', value: '#00FF00' },
{ label: 'Blue', value: '#0000FF' },
]
%>
<%= pb_rails("typeahead", props: {
id: "typeahead-default",
placeholder: "All Colors",
options: options,
label: "None",
name: :foo,
is_multi: false,
margin_bottom: "none",
})
%>
<%= pb_rails("typeahead", props: {
id: "typeahead-default",
placeholder: "All Colors",
options: options,
label: "XXS",
name: :foo,
is_multi: false,
margin_bottom: "xxs",
})
%>
<%= pb_rails("typeahead", props: {
id: "typeahead-default",
placeholder: "All Colors",
options: options,
label: "XS",
name: :foo,
is_multi: false,
margin_bottom: "xs",
})
%>
<%= pb_rails("typeahead", props: {
id: "typeahead-default",
placeholder: "All Colors",
options: options,
label: "Default - SM",
name: :foo,
is_multi: false,
})
%>
<%= pb_rails("typeahead", props: {
id: "typeahead-default",
placeholder: "All Colors",
options: options,
label: "MD",
name: :foo,
is_multi: false,
margin_bottom: "md",
})
%>
<%= pb_rails("typeahead", props: {
id: "typeahead-default",
placeholder: "All Colors",
options: options,
label: "LG",
name: :foo,
is_multi: false,
margin_bottom: "lg",
})
%>
<%= pb_rails("typeahead", props: {
id: "typeahead-default",
placeholder: "All Colors",
options: options,
label: "XL",
name: :foo,
is_multi: false,
margin_bottom: "xl",
})
%>
<%= javascript_tag defer: "defer" do %>
document.addEventListener("pb-typeahead-kit-typeahead-default-result-option-select", function(event) {
console.log('Single Option selected')
console.dir(event.detail)
})
document.addEventListener("pb-typeahead-kit-typeahead-default-result-clear", function() {
console.log('All options cleared')
})
<% end %>
Version data entries
11 entries across 11 versions & 2 rubygems