Tabs

This is Twig implementation of the Tabs component.

Basic example usage:

                                                
                                                <TabList>
                                                  <TabItem>
                                                    <TabLink isSelected id="pane1-tab" target="pane1" data-spirit-toggle="tabs">Item selected</TabLink>
                                                  </TabItem>
                                                  <TabItem>
                                                    <TabLink id="pane2-tab" target="pane2" data-spirit-toggle="tabs">Item</TabLink>
                                                  </TabItem>
                                                  <TabItem>
                                                    <TabLink href="https://www.example.com">Item link</TabLink>
                                                  </TabItem>
                                                </TabList>
                                                <TabPane id="pane1" isSelected label="pane1-tab">Pane 1</TabPane>
                                                <TabPane id="pane2" label="pane2-tab">Pane 2</TabPane>

Without lexer:

                                                
                                                {% embed "@spirit/tabList.twig" %}
                                                    {% block content %}
                                                        {% embed "@spirit/tabItem.twig" %}
                                                            {% block content %}
                                                                {% embed "@spirit/tabLink.twig" with { props: {
                                                                  id: 'pane1-tab',
                                                                  isSelected: true,
                                                                  target: 'pane1',
                                                                } } %}
                                                                    {% block content %}
                                                                        Item selected
                                                                    {% endblock %}
                                                                {% endembed %}
                                                            {% endblock %}
                                                        {% endembed %}
                                                    {% endblock %}
                                                {% endembed %}

API

The Tabs itself consists of many components which cannot be used independently.

TabList

There is no API for TabList.

TabItem

There is no API for TabItem.

TabLink

Name	Type	Default	Required	Description
href	string	null	✕	URL target of a link
isSelected	bool	false	✕	Whether is tab item selected
target	string	null	✕	Target tab pane ID

TabPane

Name	Type	Default	Required	Description
id	string	null	✔	Tab pane target identification
isSelected	bool	false	✕	Whether is tab pane selected
label	string	null	✕	Aria label of the tab pane

On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.

JavaScript Plugin

For full functionality, you need to provide Spirit JavaScript:

                                                
                                                <script src="node_modules/@lmc-eu/spirit-web/js/cjs/spirit-web.min.js" async></script>

Please consult the main README for how to include JavaScript plugins.

Or, feel free to write the controlling script yourself.

👉 Check the component's docs in the web package to see the full documentation and API of the plugin.