django-components/docs/examples/tabs.md

Tabs (AlpineJS)

(By @JuroOravec and @mscheper)

This example defines a tabs component. Tabs are dynamic - to change the currently opened tab, click on the tab headers.

To get started, use the following example to create a simple container with 2 tabs:

{% component "Tablist" id="my-tablist" name="My Tabs" %}
    {% component "Tab" header="Tab 1" %}
        This is the content of Tab 1
    {% endcomponent %}
    {% component "Tab" header="Tab 2" disabled=True %}
        This is the content of Tab 2
    {% endcomponent %}
{% endcomponent %}

API

The tab component is composed of two parts: Tablist and Tab. Here's how you can customize them.

Tablist component

The Tablist component is the main container for the tabs. It accepts the following arguments:

• id (optional): A unique ID for the tab list. If not provided, it's generated from the name.
• name: The name of the tab list, used as a WAI-ARIA label for accessibility.
• selected_tab (optional): The id of the tab that should be selected by default.
• container_attrs, tablist_attrs, tab_attrs, tabpanel_attrs (optional): Dictionaries of HTML attributes to be added to the corresponding elements.

Inside the Tablist's default slot you will define the individual tabs.

Tab component

The Tab component defines an individual tab. It MUST be nested inside a Tablist. It accepts the following arguments:

• header: The text to be displayed in the tab's header.
• disabled (optional): A boolean that disables the tab if True.
• id (optional): A unique ID for the tab. If not provided, it's generated from the header.

Use the Tab's default slot to define the content of the tab.

Example

To see the component in action, you can set up a view and a URL pattern as shown below.

views.py

This example shows how to render a full page with the tab component.

--8<-- "sampleproject/examples/pages/tabs.py"

urls.py

from django.urls import path

from examples.pages.tabs import TabsPage

urlpatterns = [
    path("examples/tabs", TabsPage.as_view(), name="tabs"),
]

How it works

At the start of rendering, Tablist defines special context that Tabs recognize.

When a Tab component is nested and rendered inside a Tablist, it registers itself with the parent Tablist component.

After the rendering of Tablist's body is done, we end up with list of rendered Tabs that were encountered.

Tablist then uses this information to dynamically render the tab HTML.

Definition

tabs.py

--8<-- "sampleproject/examples/components/tabs/tabs.py"

tabs.html

--8<-- "sampleproject/examples/components/tabs/tabs.html"

tabs.css

--8<-- "sampleproject/examples/components/tabs/tabs.css"