Toggle Group

نصب

pnpm dlx @simurgh-ui/cli add toggle-group

import { ToggleGroup, ToggleGroupItem } from '@simurgh-ui/react/toggle-group';
import { ToggleGroup as VueToggleGroup, ToggleGroupItem as VueToggleGroupItem } from '@simurgh-ui/vue/toggle-group';
import { ToggleGroupComponent, ToggleGroupItemDirective } from '@simurgh-ui/angular/toggle-group';
import '@simurgh-ui/styles/toggle-group.css';

پیش‌نمایش واقعی

Live component Toggle Group ◆

StartCenterEnd

استفاده

React

<ToggleGroup aria-label="تراز متن">
  <ToggleGroupItem value="start">ابتدا</ToggleGroupItem>
  <ToggleGroupItem value="center">وسط</ToggleGroupItem>
</ToggleGroup>

Vue

<ToggleGroup v-model="alignment" aria-label="تراز متن">
  <ToggleGroupItem value="start">ابتدا</ToggleGroupItem>
  <ToggleGroupItem value="center">وسط</ToggleGroupItem>
</ToggleGroup>

Angular

<simurgh-toggle-group [(value)]="alignment" aria-label="تراز متن">
  <button simurghToggleGroupItem="start">ابتدا</button>
  <button simurghToggleGroupItem="center">وسط</button>
</simurgh-toggle-group>

برای فعال‌بودن هم‌زمان چند گزینه type="multiple" را تعیین کنید. هر item فقط‌آیکن باید نام دسترس‌پذیر داشته باشد. کلیدهای جهت focus را جابه‌جا می‌کنند، Home و End به ابتدا و انتها می‌روند و در layout راست‌به‌چپ جهت افقی به‌طور منطقی معکوس می‌شود.

Last verified on 2026-08-13 against Simurgh registry 0.1.1.