11.6.0
Note
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.
Filter can leverage the max-width property. Learn more in our visual guidelines.
<%= pb_rails("filter", props: { id: "1", 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: "Alabama", value: 1), OpenStruct.new(name: "Alaska", value: 2), OpenStruct.new(name: "Arizona", value: 3), OpenStruct.new(name: "Arkansas", value: 4), OpenStruct.new(name: "California", value: 5), OpenStruct.new(name: "Colorado", value: 6), OpenStruct.new(name: "Connecticut", value: 7), OpenStruct.new(name: "Delaware", value: 8), OpenStruct.new(name: "Florida", value: 9), OpenStruct.new(name: "Georgia", value: 10), ] %> <%= 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 %> <br> <br> <%= pb_rails("filter", props: { 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: "Alabama", value: 1), OpenStruct.new(name: "Alaska", value: 2), OpenStruct.new(name: "Arizona", value: 3), OpenStruct.new(name: "Arkansas", value: 4), OpenStruct.new(name: "California", value: 5), OpenStruct.new(name: "Colorado", value: 6), OpenStruct.new(name: "Connecticut", value: 7), OpenStruct.new(name: "Delaware", value: 8), OpenStruct.new(name: "Florida", value: 9), OpenStruct.new(name: "Georgia", value: 10), ] %> <%= 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: { id: "3", 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: "Alabama", value: 1), OpenStruct.new(name: "Alaska", value: 2), OpenStruct.new(name: "Arizona", value: 3), OpenStruct.new(name: "Arkansas", value: 4), OpenStruct.new(name: "California", value: 5), OpenStruct.new(name: "Colorado", value: 6), OpenStruct.new(name: "Connecticut", value: 7), OpenStruct.new(name: "Delaware", value: 8), OpenStruct.new(name: "Florida", value: 9), OpenStruct.new(name: "Georgia", value: 10), ] %> <%= 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 %> <br> <%= pb_rails("filter", props: { 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: "Alabama", value: 1), OpenStruct.new(name: "Alaska", value: 2), OpenStruct.new(name: "Arizona", value: 3), OpenStruct.new(name: "Arkansas", value: 4), OpenStruct.new(name: "California", value: 5), OpenStruct.new(name: "Colorado", value: 6), OpenStruct.new(name: "Connecticut", value: 7), OpenStruct.new(name: "Delaware", value: 8), OpenStruct.new(name: "Florida", value: 9), OpenStruct.new(name: "Georgia", value: 10), ] %> <%= 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: "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: "Alabama", value: 1), OpenStruct.new(name: "Alaska", value: 2), OpenStruct.new(name: "Arizona", value: 3), OpenStruct.new(name: "Arkansas", value: 4), OpenStruct.new(name: "California", value: 5), OpenStruct.new(name: "Colorado", value: 6), OpenStruct.new(name: "Connecticut", value: 7), OpenStruct.new(name: "Delaware", value: 8), OpenStruct.new(name: "Florida", value: 9), OpenStruct.new(name: "Georgia", value: 10), ] %> <%= 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: { id: "nosort", filters: [ { name: "name", value: "John Wick" } ], results: 546, template: "filter_only", }) do %> <% example_collection = [ OpenStruct.new(name: "Alabama", value: 1), OpenStruct.new(name: "Alaska", value: 2), OpenStruct.new(name: "Arizona", value: 3), OpenStruct.new(name: "Arkansas", value: 4), OpenStruct.new(name: "California", value: 5), OpenStruct.new(name: "Colorado", value: 6), OpenStruct.new(name: "Connecticut", value: 7), OpenStruct.new(name: "Delaware", value: 8), OpenStruct.new(name: "Florida", value: 9), OpenStruct.new(name: "Georgia", value: 10), ] %> <%= 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: "fo", filters: [ { name: "name", value: "John Wick" } ], template:"filter_only", }) do %> <% example_collection = [ OpenStruct.new(name: "Alabama", value: 1), OpenStruct.new(name: "Alaska", value: 2), OpenStruct.new(name: "Arizona", value: 3), OpenStruct.new(name: "Arkansas", value: 4), OpenStruct.new(name: "California", value: 5), OpenStruct.new(name: "Colorado", value: 6), OpenStruct.new(name: "Connecticut", value: 7), OpenStruct.new(name: "Delaware", value: 8), OpenStruct.new(name: "Florida", value: 9), OpenStruct.new(name: "Georgia", value: 10), ] %> <%= 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", }) %>
<%= pb_rails("filter", props: { min_width: "600px", 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: "Alabama", value: 1), OpenStruct.new(name: "Alaska", value: 2), OpenStruct.new(name: "Arizona", value: 3), OpenStruct.new(name: "Arkansas", value: 4), OpenStruct.new(name: "California", value: 5), OpenStruct.new(name: "Colorado", value: 6), OpenStruct.new(name: "Connecticut", value: 7), OpenStruct.new(name: "Delaware", value: 8), OpenStruct.new(name: "Florida", value: 9), OpenStruct.new(name: "Georgia", value: 10), ] %> <%= 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 %>
Click the filter buttom 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: { id: "pla", filters: [ { name: "name", value: "John Wick" } ], placement: "right", template:"filter_only", }) do %> <% example_collection = [ OpenStruct.new(name: "Alabama", value: 1), OpenStruct.new(name: "Alaska", value: 2), OpenStruct.new(name: "Arizona", value: 3), OpenStruct.new(name: "Arkansas", value: 4), OpenStruct.new(name: "California", value: 5), OpenStruct.new(name: "Colorado", value: 6), OpenStruct.new(name: "Connecticut", value: 7), OpenStruct.new(name: "Delaware", value: 8), OpenStruct.new(name: "Florida", value: 9), OpenStruct.new(name: "Georgia", value: 10), ] %> <%= 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 %>