Tab-group & Tab
<z-tab-group> is a component that displays <z-tab> components one at a time, and adds a menu so that you can choose which one to display.
<z-tab> is a component that wraps its content so that the <z-tab-group> can retreive it. <z-tab-group>
<z-tab label="tab-1">
Lorem ipsum dolor <a href="https://benjamin.caradeuc.info">sit</a> amet consectetur adipisicing elit. Suscipit, facere!
</z-tab>
<z-tab label="tab-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, delectus minima nulla sed magni facilis tempore ipsam laborum quam maxime.
</z-tab>
<z-tab label="tab-3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea modi iste numquam nobis sunt repellendus doloremque inventore, reiciendis at. Dolore, at. Mollitia voluptatem, officia rerum repudiandae ex aperiam totam. Harum?
</z-tab>
</z-tab-group>Attributes
Vertical (z-tab-group)
The vertical attribute changes the layout of the tabs menu by putting it to the left instead of the top of the tab group.
<z-tab-group vertical>
<z-tab label="tab-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, facere!</z-tab>
<z-tab label="tab-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, delectus minima nulla sed magni facilis tempore ipsam laborum quam maxime.</z-tab>
</z-tab-group>Centered (z-tab-group)
The centered attribute changes the layout of the tabs menu by making it centered (horizontaly or verticaly)
<z-tab-group centered>
<z-tab label="tab-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, facere!</z-tab>
<z-tab label="tab-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, delectus minima nulla sed magni facilis tempore ipsam laborum quam maxime.</z-tab>
</z-tab-group>
<z-tab-group centered vertical>
<z-tab label="tab-1">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae ab mollitia nobis consequatur, temporibus quam sunt voluptatibus! Et adipisci maiores, minima fugiat pariatur reprehenderit similique asperiores accusantium laudantium beatae modi eligendi quos molestiae doloremque officia! Dolorum ab placeat eligendi? Sit a voluptatum dignissimos sapiente, quo amet molestiae in perspiciatis consequuntur accusamus inventore omnis ad repellendus, facilis, tempora maxime ea harum? Doloribus cupiditate explicabo veniam distinctio non dolor labore quas asperiores, perferendis, iusto maiores nisi inventore nulla incidunt corporis nihil deserunt nostrum culpa quia, perspiciatis assumenda facilis. Temporibus vel sapiente beatae optio laboriosam soluta aliquid natus quaerat amet iste sed asperiores eligendi, exercitationem delectus tenetur quasi eos tempore blanditiis possimus id, placeat vero. Dolore dolor laborum modi sunt vitae. Incidunt, culpa hic repellendus molestias ullam quo a quas rerum quisquam illo est eius, quaerat laboriosam magnam rem iusto ex in alias, ratione saepe. Vel voluptatem alias molestias minus dolore veritatis modi autem quis odit. Esse voluptatem, neque asperiores quam itaque deserunt totam et inventore! Ex maiores error aliquam maxime vel perspiciatis mollitia adipisci odit itaque eveniet molestias eius, libero veritatis. Veniam, esse alias nisi beatae vero minus corrupti numquam ab culpa eos impedit deserunt quos sequi vitae libero consectetur voluptatem? Ipsa natus hic facilis dignissimos vitae, rerum inventore doloremque eaque fugiat et quo itaque necessitatibus tempora, obcaecati distinctio impedit tenetur dolorem aspernatur placeat molestias atque enim. Molestias quidem fugit quas quos, quia praesentium ex, explicabo tempora consectetur, deserunt placeat autem sapiente. A tempora sequi, ullam consectetur cum magni nemo? Dicta voluptatem laborum ipsa facilis porro aperiam corrupti repellendus ex pariatur excepturi. Nostrum libero earum repellendus quae eum repudiandae amet vel numquam quasi neque velit labore, sequi tempora accusamus debitis reiciendis impedit eaque consequatur illum placeat voluptates delectus corrupti. Tenetur consequatur, sit ab vel sapiente necessitatibus culpa magni voluptatem aliquid minima rerum.</z-tab>
<z-tab label="tab-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, delectus minima nulla sed magni facilis tempore ipsam laborum quam maxime.</z-tab>
</z-tab-group>Label (z-tab)
The label attribute is used to build the menu and provides a clickable button to show the corresponding tab.
Accessibility
Tab group
The <z-tab-group> component is a wrapper for a list of <z-tab> components.
It displays a list of buttons meant to activate its corresponding <z-tab> component and the content of that <z-tab> component.
Only the currently active tab button can be focused.
To activate the other <z-tab> components, you have to have focus on one of the tabs buttons and:
- Use
UporLeftkey for previous tab. - Use
RightorDownkey for next tab. - Use
PageUpkey for first tab. - Use
PageDownkey for last tab.
Tab group
The <z-tab> component is a wrapper for the content you want to display when this component is the one activated.
When activated, the content of a <z-tab> component should be the only one visible inside the <z-tab-group> component.
Events
z-change (z-tab-group)
The z-change event is fired whenever the active <z-tab> component changes. It is a CustomEvent.
This event provides a detail object containing the value of the newly active tab.
<z-tab-group id="change-event-tab">
<z-tab label="tab 1">Tab 1 content</z-tab>
<z-tab label="tab 2">Tab 2 content</z-tab>
</z-tab-group>
<p>Result: <b id="change-event-result"></b></p>
<script>
const $tab = document.querySelector('#change-event-tab')
const $result = document.querySelector('#change-event-result')
$tab.addEventListener('z-change', ({ detail }) => {
$result.innerText = detail.value
})
</script>Result:
z-change (z-tab)
The z-change event is fired whenever the active of the tab changes. It is a CustomEvent.
This event provides a detail object containing the new value of the tab active internal property.
This event is used by the
<z-tab-group> component. It is most likely not usefull otherwise...