Creates a very basic CSS-only dropdown panel
npm install @ryze-digital/simple-dropdown!Run linter(s) workflow status
``sh`
npm i @ryze-digital/simple-dropdown --save
You can change the HTML to your needs if necessary, as long as you include the mixins (see Scss) correctly.
`html`
Your dropdown content
`scss`
@use "@ryze-digital/simple-dropdown";
Use the provided configure mixin to define your dropdown defaults.
`scss`
@include simple-dropdown.configure(...);
List of available configure options
| Option | Type | Default | Description |
|----------------|-----------------|----------|---------------------------------------------------------------------------|
| icon | Map | | Configure which icons from your icon font should be used |
| icon.indicator | String (Quoted) | null | The UTF-8 character of the icon to help understand the button label |null
| icon.closed | String (Quoted) | | The UTF-8 character of the icon to use when the dropdown panel is hidden |null
| icon.opened | String (Quoted) | | The UTF-8 character of the icon to use when the dropdown panel is visible |null
| icon.spacing | Number | | The gap between icons and button label |"down"
| direction | String (Quoted) | | Should the panel drop "up" or "down" |
Check out the actual configure mixin for better understanding.
There is a separate mixin for each element of simple dropdown so styles can be applied to any markup.
`scss``
.simple-dropdown {
@include simple-dropdown.container();
.panel {
@include simple-dropdown.panel();
}
button {
@include simple-dropdown.button();
}
}
Checkout this repository and use the /demos folder as document root to see a running demo in the browser.