Filter

Filter items in grid layout.

Another stack can be used for navigation:
  • Subnav stack to place the filter navigation on top or bottom of the items
  • Nav stack for a filter navigation place to either sides.

  • Drop a Subnav and a Grid stack into the Filter stack.
  • Set an ID to the Grid stack, use that ID in Filter > Target ID.
  • Construct your grid, assigning for each Width a distinct class: for example white, black, blue etc.
  • Construct your filter using the Subnav, at Subnav item choose interaction: Filter.
  • For each Subnav item add the class entered in Grid Width, for example if you used white then enter .white (preceeded by a full stop).
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item

Multiple filters

Define different classes and add any number of controls to filter them. The filter controls are exclusive, meaning just one criteria is filtered at a time.
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item

Sorting

To sort items alphanumerically just add the sort attribute option to the filter control and define the meta data attribute by which the items should be sorted. By default, items are sorted in ascending order. Add the order: desc to sort items in descending order.
2016-06-01
2016-12-13
2017-05-20
2017-09-17
2017-11-03
2017-12-25
2018-01-30
2018-02-01
2018-03-11
2018-06-13
2018-10-27
2018-12-02