151 lines
4.1 KiB
Markdown
151 lines
4.1 KiB
Markdown
---
|
|
components:
|
|
- rx.chakra.ButtonGroup
|
|
---
|
|
|
|
```python exec
|
|
import reflex as rx
|
|
from pcweb.templates.docpage import docdemo
|
|
|
|
|
|
basic_button_group = (
|
|
"""rx.chakra.button_group(
|
|
rx.chakra.button('Option 1'),
|
|
rx.chakra.button('Option 2'),
|
|
rx.chakra.button('Option 3'),
|
|
)
|
|
"""
|
|
)
|
|
|
|
button_group_attached = (
|
|
"""rx.chakra.button_group(
|
|
rx.chakra.button('Option 1'),
|
|
rx.chakra.button('Option 2'),
|
|
rx.chakra.button('Option 3'),
|
|
is_attached=True,
|
|
)
|
|
|
|
"""
|
|
)
|
|
|
|
button_group_variant = (
|
|
"""rx.chakra.button_group(
|
|
rx.chakra.button('Option 1'),
|
|
rx.chakra.button('Option 2'),
|
|
rx.chakra.button('Option 3'),
|
|
variant='ghost',
|
|
)
|
|
|
|
"""
|
|
)
|
|
|
|
button_group_sizes = (
|
|
"""rx.chakra.button_group(
|
|
rx.chakra.button('Large Button', size='lg'),
|
|
rx.chakra.button('Medium Button', size='md'),
|
|
rx.chakra.button('Small Button', size='sm'),
|
|
)
|
|
|
|
"""
|
|
)
|
|
|
|
button_group_disable = (
|
|
"""rx.chakra.button_group(
|
|
rx.chakra.button('Option 1'),
|
|
rx.chakra.button('Option 2'),
|
|
rx.chakra.button('Option 3'),
|
|
is_disabled=True,
|
|
)
|
|
|
|
"""
|
|
)
|
|
|
|
button_group_spacing = (
|
|
"""rx.chakra.button_group(
|
|
rx.chakra.button('Option 1'),
|
|
rx.chakra.button('Option 2'),
|
|
rx.chakra.button('Option 3'),
|
|
spacing=8,
|
|
)
|
|
|
|
"""
|
|
|
|
)
|
|
```
|
|
|
|
# Button Group
|
|
|
|
The `rx.chakra.button_group` component allows you to create a group of buttons that are visually connected and styled together.
|
|
This is commonly used to group related actions or options in your application's user interface.
|
|
|
|
## Basic Usage
|
|
|
|
Here's an example of how to use the `rx.chakra.button_group` component to create a simple group of buttons:
|
|
|
|
```python eval
|
|
docdemo(basic_button_group)
|
|
```
|
|
|
|
In this example, a button group is created with three buttons. The buttons are visually connected, and there
|
|
is a default spacing of `2` pixels between them.
|
|
|
|
## Adjusting ButtonGroup Properties
|
|
|
|
You can customize the appearance and behavior of the `rx.chakra.button_group` component by adjusting
|
|
its properties. For instance, you can set `is_attached` prop to `True` to make the buttons
|
|
appear flushed together:
|
|
|
|
```python eval
|
|
docdemo(button_group_attached)
|
|
```
|
|
|
|
In this example, the `is_attached` property is set to `True`, resulting in the buttons having a seamless appearance.
|
|
|
|
## ButtonGroup Variants
|
|
|
|
Just like the `button` component, you can customize the visual style of your buttons using the `variant` prop.
|
|
This will apply to all buttons in the group.
|
|
|
|
```python eval
|
|
docdemo(button_group_variant)
|
|
```
|
|
|
|
In this example, the `variant` prop is set to `ghost`, applying the variant style to all buttons in the group.
|
|
|
|
## ButtonGroup Sizes
|
|
|
|
Similarly, you can adjust the size of buttons within a button group using the `size` prop.
|
|
This prop allows you to choose from different size options, affecting all buttons within the group.
|
|
|
|
```python eval
|
|
docdemo(button_group_sizes)
|
|
```
|
|
|
|
In this example, the `size` prop is used to set the size of all buttons within the group, with options such as `"lg"` (large), `"md"` (medium), and `"sm"` (small).
|
|
|
|
## Disabling ButtonGroup
|
|
|
|
You can also disable all the buttons within a button group by setting the `is_disabled` prop to `True`:
|
|
|
|
```python eval
|
|
docdemo(button_group_disable)
|
|
```
|
|
|
|
In this case, all the buttons within the group will be disabled and unclickable.
|
|
|
|
## Customizing Spacing
|
|
|
|
The `spacing` prop allows you to control the gap between buttons within the group. Here's an example of setting a custom spacing of `8` pixels:
|
|
|
|
```python eval
|
|
docdemo(button_group_spacing)
|
|
```
|
|
|
|
By setting `spacing` to `8`, the buttons will have a larger gap between them.
|
|
|
|
```md alert info
|
|
- You can nest other components or elements within the button group to create more complex layouts.
|
|
- Button groups are a useful way to visually organize related actions or options in your application, providing a consistent and cohesive user interface.
|
|
- Experiment with different combinations of props to achieve the desired styling and behavior for your button groups in Reflex-based applications.
|
|
```
|