پرتوپرتو

گروه دکمه (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

PropTypeDefaultتوضیحات
orientation'horizontal' | 'vertical''horizontal'جهت چینش دکمه‌ها