Sort bar

deprecatedv1.0.0

Lay out sorting elements in listing pages

Overview

Use this element to group sorting elements together at the top of listing pages and lay them out correctly in all situations:

Afficher par rubrique :

Usage

Dependencies

To get the sort-bar component working, include the dependencies in your project in the following order:

  1. npm
  2. Sass
"design-system": "git+ssh://git@github.com/Selectra-Dev/design-system.git"

@import 'design-system/src/scss/03-organisms/sort-bar';

Basic code

Apply the sort-bar class to a wrapper that contains all the sorting elements. This will apply flex properties to the children, laying them out correctly.

  1. Pug
  2. HTML
.sort-bar
  .sort-bar__item
    strong Title
    select.dropdown
      [...]

<div class="sort-bar">
  <div class="sort-bar__item">
    <strong>Title</strong>
    <select class="dropdown">
      [...]
    </select>
  </div>
</div>