Toolbar

نصب

pnpm dlx @simurgh-ui/cli add toolbar

import { Toolbar, ToolbarButton } from '@simurgh-ui/react/toolbar';
import { Toolbar as VueToolbar, ToolbarButton as VueToolbarButton } from '@simurgh-ui/vue/toolbar';
import { ToolbarComponent, ToolbarButtonDirective } from '@simurgh-ui/angular/toolbar';
import '@simurgh-ui/styles/toolbar.css';

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

Live component Toolbar ◆

BoldItalicLink

استفاده

React

<Toolbar label="قالب‌بندی متن">
  <ToolbarButton>ضخیم</ToolbarButton>
  <ToolbarButton>مورب</ToolbarButton>
</Toolbar>

Vue

<Toolbar label="قالب‌بندی متن">
  <ToolbarButton>ضخیم</ToolbarButton>
  <ToolbarButton>مورب</ToolbarButton>
</Toolbar>

Angular

<simurgh-toolbar label="قالب‌بندی متن">
  <button simurghToolbarButton>ضخیم</button>
  <button simurghToolbarButton>مورب</button>
</simurgh-toolbar>

Toolbar کنترل‌های مرتبط را در یک توقف صفحه‌کلید گروه‌بندی می‌کند و هنگام جابه‌جایی focus موردهای غیرفعال را رد می‌کند. برای گروه عمودی orientation="vertical" را تعیین کنید. در حالت افقی راست‌به‌چپ، کلیدهای قبلی و بعدی مطابق جهت منطقی معکوس می‌شوند.

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