Toolbar — نوار ابزار
کپی کد یک نوار ابزار با کپی کد است: کل نوار با یک توقف Tab در دسترس است و با فلشها بین ابزارها حرکت میکنید. کپی کد وضعیت فشرده را با کپی کد اعلام میکند و کپی کد ابزارهای مرتبط را کنار هم گروه میکند.
- برای قالببندی متن، ابزارهای بوم و کنترلهای نمایش.
- برای نوار کناری ابزار، کپی کد.
وضعیت: beta · لایه: ۳ (کپی کد) · کد: کپی کد
import { Toolbar, ToolGroup, ToolbarSeparator, ToggleButton } from '@tokapps/tuk';نمونهٔ زنده
کد قابل کپی
پایه با گروه و جداکننده
import { Toolbar, ToolGroup, ToolbarSeparator, ToggleButton } from '@tokapps/tuk';<Toolbar aria-label="قالببندی متن"> <ToolGroup aria-label="سبک"> <ToggleButton label="پررنگ" shortcut="mod+B" defaultPressed /> <ToggleButton label="مورب" shortcut="mod+I" /> </ToolGroup> <ToolbarSeparator /> <ToggleButton label="واگرد" toggle={false} shortcut="mod+Z" /></Toolbar>فقط آیکون
import { Icon } from '@tokapps/icons';import { Toolbar, ToggleButton } from '@tokapps/tuk';<Toolbar aria-label="نمایش"> <ToggleButton aria-label="بزرگنمایی" tooltip="بزرگنمایی" icon={<Icon name="zoom.in" />} toggle={false} /> <ToggleButton aria-label="کوچکنمایی" tooltip="کوچکنمایی" icon={<Icon name="zoom.out" />} toggle={false} /> <ToggleButton aria-label="تمامصفحه" tooltip="تمامصفحه" icon={<Icon name="media.maximize" />} /></Toolbar>نوار عمودی
<Toolbar aria-label="ابزارها" orientation="vertical"> <ToggleButton label="انتخاب" defaultPressed /> <ToggleButton label="قلم" /></Toolbar>دسترسپذیری
کپی کد (در RTL معکوس میشود)، در حالت عمودی کپی کد، و کپی کد برای ابتدا و انتها. دکمهٔ فقطآیکون باید کپی کد داشته باشد؛ کپی کد جایگزین برچسب نیست. جزئیات در کپی کد.