گروه دکمه (Button Group)
گروهبندی چند دکمه در کنار یکدیگر
معرفی
کامپوننت Button Group برای گروهبندی دکمههای مرتبط در کنار یکدیگر استفاده میشود.
استفاده
import { ButtonGroup, Button } from '@parto/ui';
export default function MyComponent() {
return (
<ButtonGroup>
<Button variant="outline">راست</Button>
<Button variant="outline">وسط</Button>
<Button variant="outline">چپ</Button>
</ButtonGroup>
);
}انواع چینش
افقی (پیشفرض)
<ButtonGroup orientation="horizontal">
<Button variant="outline">یک</Button>
<Button variant="outline">دو</Button>
<Button variant="outline">سه</Button>
</ButtonGroup>عمودی
<ButtonGroup orientation="vertical">
<Button variant="outline">بالا</Button>
<Button variant="outline">وسط</Button>
<Button variant="outline">پایین</Button>
</ButtonGroup>با جداکننده
import { ButtonGroup, Button, ButtonGroupSeparator } from '@parto/ui';
<ButtonGroup>
<Button variant="outline">یک</Button>
<ButtonGroupSeparator />
<Button variant="outline">دو</Button>
<ButtonGroupSeparator />
<Button variant="outline">سه</Button>
</ButtonGroup>با متن
<ButtonGroup>
<ButtonGroupText>انتخاب کنید:</ButtonGroupText>
<Button variant="outline">گزینه ۱</Button>
<Button variant="outline">گزینه ۲</Button>
</ButtonGroup>Props
ButtonGroup
| Prop | Type | Default | توضیحات |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | جهت چینش دکمهها |