Example
<div class="row" style="height:400px;">
<div class="col-xs-6">
<div class="two-step-select text--right">
<div class="wui-bs-btn-group">
<button
title="Sort by: Name (A to Z)"
class="wui-btn wui-btn--default text--left text--overflow-ellipsis two-step-select__display-btn"
style="width:160px;"
>
Name
</button>
<button
title="Sort by: Name (A to Z)"
class="wui-btn wui-btn--default wui-btn--outline"
>
<i class="far fa-lg fa-sort-alpha-down"></i>
</button>
</div>
<div class="dropdown open">
<div
class="dropdown-menu border-0 p-0 m-t-15 position--right position--left-auto" style="min-width:250px; z-index:2;"
>
<div class="wui-bs-panel m-0">
<div
class="panel-heading panel-heading__pointer panel-heading__pointer--t-r"
>
<h2 class="panel-title text--overflow-ellipsis">
Sort by: Name (A to Z)
</h2>
</div>
<div class="panel-body p-5">
<ul class="wui-fa-list m-0">
<a href="#" class="unstyled">
<li>
<span class="wui-fa-list__fa-bullet"
><i
class="far fa-circle wui-color--gray-87 fa-lg"
></i
></span>
Option 1
</li>
</a>
<li>
<span class="wui-fa-list__fa-bullet"
><i
class="far fa-circle wui-color--gray-87 fa-lg"
></i
></span>
Option 2
</li>
<li>
<span class="wui-fa-list__fa-bullet"
><i
class="fas fa-check-circle wui-color--active fa-lg"
></i
></span>
Name
</li>
<li>
<span class="wui-fa-list__fa-bullet"
><i
class="far fa-circle wui-color--gray-87 fa-lg"
></i
></span>
Option 4
</li>
<li>
<span class="wui-fa-list__fa-bullet"
><i
class="far fa-circle wui-color--gray-87 fa-lg"
></i
></span>
Option 5
</li>
</ul>
</div>
<hr class="m-y-5" />
<div class="panel-body p-5">
<i class="wui-color--gray-60 m-l-5">Sorting</i>
<ul class="wui-fa-list m-b-0">
<li>
<span class="wui-fa-list__fa-bullet"
><i
class="fas fa-check-circle wui-color--active fa-lg"
></i
></span>
A to Z
</li>
<li>
<span class="wui-fa-list__fa-bullet"
><i
class="far fa-circle wui-color--gray-87 fa-lg"
></i
></span>
Z to A
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="two-step-select text--right">
<button
title="Change sorting"
class="wui-btn wui-btn--default wui-btn--outline"
>
<i class="fas fa-th-list"></i>
</button>
<div class="dropdown open">
<div
class="dropdown-menu border-0 p-0 w-min-300 m-t-15 position--right position--left-auto" style="min-width:200px; z-index:2;"
>
<div class="wui-bs-panel m-0">
<div
class="panel-heading panel-heading__pointer panel-heading__pointer--t-r"
>
<h2 class="panel-title text--overflow-ellipsis">
Display: Item view (24)
</h2>
</div>
<div class="panel-body p-5">
<ul class="wui-fa-list m-0">
<li>
<span class="wui-fa-list__fa-bullet"
><i
class="fas fa-check-circle wui-color--active v-align--middle fa-lg"
></i
></span>
<div class="wui-inline-list--sm">
<div class="wui-inline-list__item">
<i
class="fas fa-th-large wui-color--active"
></i>
</div>
<div class="wui-inline-list__item">
Item view
</div>
</div>
</li>
<li>
<span class="wui-fa-list__fa-bullet"
><i
class="far fa-circle wui-color--gray-87 v-align--middle fa-lg"
></i
></span>
<div class="wui-inline-list--sm">
<div class="wui-inline-list__item">
<i
class="fas fa-th-list wui-color--gray-87"
></i>
</div>
<div class="wui-inline-list__item">
Table view
</div>
</div>
</li>
</ul>
</div>
<hr class="m-y-5" />
<div class="panel-body p-5">
<i class="wui-color--gray-60 m-l-5">Items per page</i>
<ul class="wui-fa-list m-0">
<li>
<span class="wui-fa-list__fa-bullet"
><i
class="far fa-circle wui-color--gray-87 fa-lg"
></i
></span>
12
</li>
<li>
<span class="wui-fa-list__fa-bullet"
><i
class="fas fa-check-circle wui-color--active fa-lg"
></i
></span>
24
</li>
<li>
<span class="wui-fa-list__fa-bullet"
><i
class="far fa-circle wui-color--gray-87 fa-lg"
></i
></span>
48
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
This component was composed exclusively from already existing HTML modules. Due to the continuous development of our vue component library, some functionalities could now be covered by existing modules as well. If you plan to use the two-step-select, please consult the WUI team beforehand.
Icons to use
- Relevance (Best matches first. Sorting is only meaningful in one direction.)
far fa-lg fa-sort-size-down - Delivery time (Fastest delivery first. Sorting is only meaningful in one direction.)
far fa-lg fa-sort-amount-down-alt - Numbers (Low to high and vice versa.)
far fa-lg fa-sort-numeric-down
far fa-lg fa-sort-numeric-down-alt - Alphabetical (A to Z and vice versa.)
far fa-lg fa-sort-alpha-down
far fa-lg fa-sort-alpha-down-alt
WUI decisions 
- Structure. The two-step-select consists of two buttons.
- Display button. The button always shows which option is active. This way, the user can also see at first glance what is being sorted without expanding the menu. This button is optional and will be hidden for smaller screen sizes.
- Icon button. Depending on what is selected (ascending, descending, grid view, list view), the icon in the button changes. See icons to use
- Closing. The dropdown remains open as long as the user selects options. Only when the user clicks outside, the dropdown closes.
- Loading. Once the user selects an option, the items on the page are reloaded accordingly.
There is no wui-mono component documentation available yet. But you are always welcome to contact the wui-team
via Slack: #wescale-wui-public
via Mail: wescale-wui@wescale.com
