Add dropdown component
jmjuanes opened this issue · 0 comments
jmjuanes commented
Add new .siimple-dropdown
experimental component to display toggleable dropdown links with the appearance of a list.
Here is an example code of a dropdown element:
<div class="siimple-dropdown siimple-dropdown--visible">
<div class="siimple-btn siimple-btn--primary siimple-dropdown-toggle">
Dropdown button
</div>
<div class="siimple-dropdown-content">
<div class="siimple-dropdown-item">Item 1</div>
<div class="siimple-dropdown-item">Item 2</div>
<div class="siimple-dropdown-item">Item 3</div>
</div>
</div>
The siimple-dropdown
component should wrap two components:
- A button, link, or another element that will display the dropdown (using JavaScript) for example when the user clicks on it. Additionally, this element might contain the class
.siimple-dropdown-toggle
to display an arrorw on the right side of the element. - A container for all dropdown items, with the class
.siimple-dropdown-content
. By default the container won't be visible.
The .siimple-dropdown-content
element can contain the following elements:
.siimple-dropdown-item
to display a link inside the container..siimple-dropdown-separator
to display a separator between two items.
The .siimple-dropdown-content
will be displayed if a .siimple-dropdown--visible
class is added to the parent .siimple-dropdown
element.