mirror of
https://github.com/django-components/django-components.git
synced 2025-10-04 03:04:34 +00:00
100 lines
2.9 KiB
Markdown
100 lines
2.9 KiB
Markdown
# Tabs (AlpineJS)
|
|
|
|
_(By [@JuroOravec](https://github.com/JuroOravec) and [@mscheper](https://github.com/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:
|
|
|
|
```django
|
|
{% 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.
|
|
|
|
```djc_py
|
|
--8<-- "sampleproject/examples/pages/tabs.py"
|
|
```
|
|
|
|
### `urls.py`
|
|
|
|
```python
|
|
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 `Tab`s 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`
|
|
|
|
```djc_py
|
|
--8<-- "sampleproject/examples/components/tabs/tabs.py"
|
|
```
|
|
|
|
### `tabs.html`
|
|
|
|
```django
|
|
--8<-- "sampleproject/examples/components/tabs/tabs.html"
|
|
```
|
|
|
|
### `tabs.css`
|
|
|
|
```css
|
|
--8<-- "sampleproject/examples/components/tabs/tabs.css"
|
|
```
|