Garnish UI Toolkit
You can download the latest version of garnishjs on GitHub.
To install via npm:
npm install garnishjsTo install via bower:
bower install garnishjsTo build, run gulp build.
Use -d or --dest options to customize the destination:
gulp build --dest=/path/to/dest
gulp build -d=/path/to/dest
Use -v or --version options to customize the version:
gulp build --version=1.0.0
gulp build -v=1.0.0
To watch, run gulp watch.
To test, run gulp test.
To watch and test, run gulp watch --test
This element should be used in instances where a trigger button shows or hides content.
Some possible applications include accordion menus, navigation dropdown menus, etc.
To create a disclosure element, use a button with the following properties:
- An
aria-controlsattribute referencing the ID of the element to be toggled - An
aria-haspopupattribute set to"true". - An
aria-expandedattribute set to either"true"or"false". - A
data-disclosure-triggerattribute is used to find and instantiate the UI element
<button aria-controls="disclosure" aria-expanded="false" aria-haspopup="true" data-disclosure-trigger>Open Menu</button>
<div id="disclosure">
This is the content you want to reveal.
</div>The disclosure container is positioned absolutely with respect to the trigger element. Because of this, both the disclosure container and the trigger need to be contained inside of a relatively positioned wrapper element.
This element needs to have the attribute data-wrapper.
Note that this is different from the CustomSelect element, where dropdowns are positioned relative to the document.
You can change the horizontal alignment of the disclosure by adding a data-align attribute with one of the following values: left, center, or right.
You may need to align the disclosure menu positioning to a different element inside of the trigger.
In cases like this add a data-align-to attribute to the disclosure menu with the selector of the element you want to align it with.
Garnish is available under the MIT license.