@ryze-digital/simple-dropdown NPM

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

@ryze-digital/scss-utilities

1.0.0

9 months ago

1.0.0-beta.0

2 years ago