ORGENIC UI is a growing set of web components with focus on UX and design. This tutorial shows how to use the expander component.
The expander is a component that can be used to organize large amounts of content in expandable blocks. These blocks can be hidden by collapsing so that only the heading is visible. Common usecases are FAQs or settings pages with some expert parameters that are hidden by default.
Expander
Using ORGENIC UI, all you have to do is to og-expander tag with the heading as attribute name and the content which will be transcluded into a slot:
<og-expander name="Expander #1">
<p>Expander content #1</p>
</og-expander>
If you want the expander to be expanded by default, you can simply add an "extended" attribute.
<og-expander name="Expander #1" expanded>
<p>Expander content #1</p>
</og-expander>
The result looks like this:
This is pretty simple... but there is more...
Accordion
If you think about an FAQ, you might just want to open one expander after the other to focus on the one element the user selects. The common name for components with this behavior is accordion. In ORGENIC UI we avoided creating a new component just for this use case. Instead, you can simply add a group attribute to add multiple expanders to one category.
<og-expander name="Accordion Expander #1" group="accordion" expanded>
<p>Accordion expander content #1</p>
</og-expander>
<og-expander name="Accordion Expander #2" group="accordion">
<p>Accordion expander content #2</p>
</og-expander>
These expanders behave like an accordion now.
This approach gives you the flexibility to spread expanders over the entire page, and they don't have to be enclosed by an accordion component.
Take a look at this CodePen:
Please visit us at:
Top comments (0)