alihan/textual
1
0
Fork 0
mirror of https://github.com/Textualize/textual.git synced 2025-10-17 02:38:12 +03:00
Code Issues Packages Projects Releases Wiki Activity

Button docs, change container utilities

Browse Source
This commit is contained in:
Darren Burns
2022-09-14 15:15:10 +01:00
parent 29b6c9a2e3
commit 1b53a9e9a4
4 changed files with 51 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
docs/examples/widgets/button.css
View File

@@ -1,3 +1,12 @@
Button { Button {
margin: 1 2; margin: 1 2;
} }
Horizontal > Vertical {
width: 24;
}
.header {
margin: 1 0 0 2;
text-style: bold;
}

26
docs/examples/widgets/button.py
View File

@@ -1,14 +1,28 @@
from textual import layout
from textual.app import App, ComposeResult from textual.app import App, ComposeResult
from textual.widgets import Button from textual.widgets import Button, Static
class ButtonsApp(App): class ButtonsApp(App):
def compose(self) -> ComposeResult: def compose(self) -> ComposeResult:
yield Button("Default", id="foo") yield layout.Horizontal(
yield Button("Disabled", disabled=True) layout.Vertical(
yield Button.success("Success!") Static("Standard Buttons", classes="header"),
yield Button.warning("Warning!") Button("Default"),
yield Button.error("Error!") Button("Primary!", variant="primary"),
Button.success("Success!"),
Button.warning("Warning!"),
Button.error("Error!"),
),
layout.Vertical(
Static("Disabled Buttons", classes="header"),
Button("Default", disabled=True),
Button("Primary!", variant="primary", disabled=True),
Button.success("Success!", disabled=True),
Button.warning("Warning!", disabled=True),
Button.error("Error!", disabled=True),
),
)
def on_button_pressed(self, _event: Button.Pressed) -> None: def on_button_pressed(self, _event: Button.Pressed) -> None:
self.app.bell() self.app.bell()

13
docs/widgets/button.md
View File

@@ -10,7 +10,8 @@ when it has focus.
## Example ## Example
Clicking any of the buttons in the example app below will result in a ring of the terminal bell. The example below shows each button variant, and its disabled equivalent.
Clicking any of the non-disabled buttons in the example app below will result in a ring of the terminal bell.
=== "Output" === "Output"
@@ -31,11 +32,11 @@ Clicking any of the buttons in the example app below will result in a ring of th
## Reactive Attributes ## Reactive Attributes
| Name | Type | Default | Description | | Name | Type | Default | Description |
|------------|--------|-------------|------------------------------------------------------------------------------------------------------------------------| |------------|--------|-------------|-----------------------------------------------------------------------------------------------------------------------------------|
| `label` | `str` | `""` | The text that appears inside the button. | | `label` | `str` | `""` | The text that appears inside the button. |
| `variant` | `str` | `"default"` | Semantic styling variant. One of `default`, `primary`, `success`, `warning`, `error`. | | `variant` | `str` | `"default"` | Semantic styling variant. One of `default`, `primary`, `success`, `warning`, `error`. |
| `disabled` | `bool` | `False` | Whether the button is disabled or not. Disabled buttons cannot be clicked, and are styled in a way that suggests this. | | `disabled` | `bool` | `False` | Whether the button is disabled or not. Disabled buttons cannot be focused or clicked, and are styled in a way that suggests this. |
## Events ## Events

26
src/textual/layout.py
View File

@@ -6,35 +6,39 @@ class Container(Widget):
DEFAULT_CSS = """ DEFAULT_CSS = """
Container { Container {
layout: vertical; layout: vertical;
overflow: auto; overflow: auto;
}
}
""" """
class Vertical(Container): class Vertical(Widget):
"""A container widget to align children vertically.""" """A container widget to align children vertically."""
# Blank CSS is important, otherwise you get a clone of Container DEFAULT_CSS = """
DEFAULT_CSS = "" Vertical {
layout: vertical;
overflow-y: auto;
}
"""
class Horizontal(Container): class Horizontal(Widget):
"""A container widget to align children horizontally.""" """A container widget to align children horizontally."""
DEFAULT_CSS = """ DEFAULT_CSS = """
Horizontal { Horizontal {
layout: horizontal; layout: horizontal;
} overflow-x: hidden;
}
""" """
class Center(Container): class Center(Widget):
"""A container widget to align children in the center.""" """A container widget to align children in the center."""
DEFAULT_CSS = """ DEFAULT_CSS = """
Center { Center {
layout: center; layout: center;
} }
""" """