mirror of
https://github.com/Textualize/textual.git
synced 2025-10-17 02:38:12 +03:00
d787f61090
* State version of widget addition in docs. Related issues: #2133 * Fix ListX version info. * Retroactively update changelog.
57 lines
1.9 KiB
Markdown
57 lines
1.9 KiB
Markdown
# ContentSwitcher
|
|
|
|
!!! tip "Added in version 0.14.0"
|
|
|
|
A widget for containing and switching display between multiple child
|
|
widgets.
|
|
|
|
- [ ] Focusable
|
|
- [X] Container
|
|
|
|
## Example
|
|
|
|
The example below uses a `ContentSwitcher` in combination with two `Button`s
|
|
to create a simple tabbed view. Note how each `Button` has an ID set, and
|
|
how each child of the `ContentSwitcher` has a corresponding ID; then a
|
|
`Button.Clicked` handler is used to set `ContentSwitcher.current` to switch
|
|
between the different views.
|
|
|
|
=== "Output"
|
|
|
|
```{.textual path="docs/examples/widgets/content_switcher.py"}
|
|
```
|
|
|
|
=== "content_switcher.py"
|
|
|
|
~~~python
|
|
--8<-- "docs/examples/widgets/content_switcher.py"
|
|
~~~
|
|
|
|
1. A `Horizontal` to hold the buttons, each with a unique ID.
|
|
2. This button will select the `DataTable` in the `ContentSwitcher`.
|
|
3. This button will select the `Markdown` in the `ContentSwitcher`.
|
|
4. Note that the intial visible content is set by its ID, see below.
|
|
5. When a button is pressed, its ID is used to switch to a different widget in the `ContentSwitcher`. Remember that IDs are unique within parent, so the buttons and the widgets in the `ContentSwitcher` can share IDs.
|
|
|
|
=== "content_switcher.css"
|
|
|
|
~~~sass
|
|
--8<-- "docs/examples/widgets/content_switcher.css"
|
|
~~~
|
|
|
|
When the user presses the "Markdown" button the view is switched:
|
|
|
|
```{.textual path="docs/examples/widgets/content_switcher.py" lines="40" press="tab,tab,enter"}
|
|
```
|
|
|
|
## Reactive Attributes
|
|
|
|
| Name | Type | Default | Description |
|
|
|-----------|-----------------|---------|----------------------------------------------------------------------|
|
|
| `current` | `str` \| `None` | `None` | The ID of the currently-visible child. `None` means nothing is visible. |
|
|
|
|
|
|
## See Also
|
|
|
|
* [ContentSwitcher][textual.widgets.ContentSwitcher] code reference
|