RYZE Digital Simple Dropdown

Install

npm i @ryze-digital/simple-dropdown --save

Usage

HTML

You can change the HTML to your needs if necessary, as long as you include the mixins (see Scss) correctly.

<div class="simple-dropdown" tabindex="0">
    <button type="button">
        <span>Your button label</span>
    </button>
    <div class="panel">
        Your dropdown content
    </div>
</div>

Scss

@use "@ryze-digital/simple-dropdown";

Use the provided configure mixin to define your dropdown defaults.

@include simple-dropdown.configure(...);

| 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 | | icon.closed | String (Quoted) | null | The UTF-8 character of the icon to use when the dropdown panel is hidden | | icon.opened | String (Quoted) | null | The UTF-8 character of the icon to use when the dropdown panel is visible | | icon.spacing | Number | null | The gap between icons and button label | | direction | String (Quoted) | "down" | 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.

.simple-dropdown {
    @include simple-dropdown.container();
    .panel {
        @include simple-dropdown.panel();
    }
    button {
        @include simple-dropdown.button();
    }
}

Demos

Checkout this repository and use the /demos folder as document root to see a running demo in the browser.

• Basic use case