This kit can be implemented in a variety of ways.
To see examples of how to implement this kit in production visit the /dev_docs/search page in production.
Note
All React examples are wrapped in a {closePopover}
method to ensure the popover closes on click of "Apply".
The min_width
prop for the popover inside of filter is used in all the examples and is set to 360px. That is the min_width
prop we recommend using as it is the same pixel value as our max_width
sm
global prop.
<%= pb_rails("filter", props: { min_width: "360px", id: "1", margin_bottom: "xl", filters: [ { name: "name", value: "John Wick" }, { name: "city", value: "San Francisco"} ], sort_menu: [ { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" }, { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false }, { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false }, ], template: "default", results: 1, }) do %> <% example_collection = [ OpenStruct.new(name: "USA", value: 1), OpenStruct.new(name: "Canada", value: 2), OpenStruct.new(name: "Brazil", value: 3), OpenStruct.new(name: "Philippines", value: 4), OpenStruct.new(name: "A galaxy far far away...", value: 5) ] %> <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %> <%= form.text_field :example_text_field, props: { label: true } %> <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %> <%= form.actions do |action| %> <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%> <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %> <% end %> <% end %> <% end %> <%= pb_rails("filter", props: { min_width: "360px", id: "def2", sort_menu: [ { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" }, { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false }, { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false }, ], template: "default", results: 0, }) do %> <% example_collection = [ OpenStruct.new(name: "USA", value: 1), OpenStruct.new(name: "Canada", value: 2), OpenStruct.new(name: "Brazil", value: 3), OpenStruct.new(name: "Philippines", value: 4), OpenStruct.new(name: "A galaxy far far away...", value: 5) ] %> <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %> <%= form.text_field :example_text_field, props: { label: true } %> <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %> <%= form.actions do |action| %> <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%> <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %> <% end %> <% end %> <% end %>
To remove the background from a filter, add the prop background
with a value of false
.
<%= pb_rails("filter", props: { min_width: "360px", id: "3", margin_bottom: "xl", background: false, filters: [ { name: "name", value: "John Wick" }, { name: "city", value: "Las Vegas"} ], sort_menu: [ { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" }, { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false }, { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false }, ], results: 3, template: "single" }) do %> <% example_collection = [ OpenStruct.new(name: "USA", value: 1), OpenStruct.new(name: "Canada", value: 2), OpenStruct.new(name: "Brazil", value: 3), OpenStruct.new(name: "Philippines", value: 4), OpenStruct.new(name: "A galaxy far far away...", value: 5) ] %> <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %> <%= form.text_field :example_text_field, props: { label: true } %> <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %> <%= form.actions do |action| %> <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%> <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %> <% end %> <% end %> <% end %> <%= pb_rails("filter", props: { min_width: "360px", id: "4", background: false, filters: [ { name: "name", value: "John Wick" }, { name: "city", value: "Las Vegas"} ], sort_menu: [ { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" }, { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false }, { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false }, ], results: 3, }) do %> <% example_collection = [ OpenStruct.new(name: "USA", value: 1), OpenStruct.new(name: "Canada", value: 2), OpenStruct.new(name: "Brazil", value: 3), OpenStruct.new(name: "Philippines", value: 4), OpenStruct.new(name: "A galaxy far far away...", value: 5) ] %> <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %> <%= form.text_field :example_text_field, props: { label: true } %> <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %> <%= form.actions do |action| %> <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%> <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %> <% end %> <% end %> <% end %>
<%= pb_rails("filter", props: { min_width: "360px", id: "2", filters: [ { name: "name", value: "John Wick" } ], sort_menu: [ { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" }, { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false }, { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false }, ], results: 546, template: "single" }) do %> <% example_collection = [ OpenStruct.new(name: "USA", value: 1), OpenStruct.new(name: "Canada", value: 2), OpenStruct.new(name: "Brazil", value: 3), OpenStruct.new(name: "Philippines", value: 4), OpenStruct.new(name: "A galaxy far far away...", value: 5) ] %> <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %> <%= form.text_field :example_text_field, props: { label: true } %> <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %> <%= form.actions do |action| %> <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%> <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %> <% end %> <% end %> <% end %>
To display results, use templates single
or default
.
<%= pb_rails("filter", props: { min_width: "360px", id: "nosort", filters: [ { name: "name", value: "John Wick" } ], results: 546, template: "filter_only", }) do %> <% example_collection = [ OpenStruct.new(name: "USA", value: 1), OpenStruct.new(name: "Canada", value: 2), OpenStruct.new(name: "Brazil", value: 3), OpenStruct.new(name: "Philippines", value: 4), OpenStruct.new(name: "A galaxy far far away...", value: 5) ] %> <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %> <%= form.text_field :example_text_field, props: { label: true } %> <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %> <%= form.actions do |action| %> <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%> <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %> <% end %> <% end %> <% end %>
<%= pb_rails("filter", props: { min_width: "360px", id: "fo", filters: [ { name: "name", value: "John Wick" } ], template:"filter_only", }) do %> <% example_collection = [ OpenStruct.new(name: "USA", value: 1), OpenStruct.new(name: "Canada", value: 2), OpenStruct.new(name: "Brazil", value: 3), OpenStruct.new(name: "Philippines", value: 4), OpenStruct.new(name: "A galaxy far far away...", value: 5) ] %> <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %> <%= form.text_field :example_text_field, props: { label: true } %> <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %> <%= form.actions do |action| %> <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%> <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %> <% end %> <% end %> <% end %>
<%= pb_rails("filter", props: { id: "so", sort_menu: [ { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" }, { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false }, { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false }, ], template:"sort_only", }) %>
Filter can leverage the max-width property. Learn more in our visual guidelines.
<%= pb_rails("filter", props: { min_width: "360px", id: "25", position: "top", filters: [ { name: "name", value: "John Wick" }, { name: "city", value: "San Francisco"} ], sort_menu: [ { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" }, { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false }, { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false }, ], template: "default", results: 1, }) do %> <% example_collection = [ OpenStruct.new(name: "USA", value: 1), OpenStruct.new(name: "Canada", value: 2), OpenStruct.new(name: "Brazil", value: 3), OpenStruct.new(name: "Philippines", value: 4), OpenStruct.new(name: "A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...", value: 5) ] %> <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %> <%= form.text_field :example_text_field, props: { label: true } %> <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %> <%= form.actions do |action| %> <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%> <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %> <% end %> <% end %> <% end %>
Click the filter button above to toggle the popover.
To change the filter's popover position, use the placement
prop with one of the positions:
"top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"
<%= pb_rails("filter", props: { min_width: "360px", id: "pla", filters: [ { name: "name", value: "John Wick" } ], placement: "right", template:"filter_only", }) do %> <% example_collection = [ OpenStruct.new(name: "USA", value: 1), OpenStruct.new(name: "Canada", value: 2), OpenStruct.new(name: "Brazil", value: 3), OpenStruct.new(name: "Philippines", value: 4), OpenStruct.new(name: "A galaxy far far away...", value: 5) ] %> <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %> <%= form.text_field :example_text_field, props: { label: true } %> <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %> <%= form.actions do |action| %> <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%> <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %> <% end %> <% end %> <% end %>