Toolbar

Ne zaman kullanılır

Toolbar, tek bir alana etki eden sık denetimleri bir satırda toplar: metin biçimi, görünüm denetimleri, düzenleyici eylemleri. Klavye kullanıcısı tek Tab ile araç çubuğuna girer ve ok tuşlarıyla gezer; böylece çok düğmeli bir satır sekme sırasını uzatmaz.

Ne zaman kullanılmaz

• Sayfanın ana eylemleri için: PageHeader içinde Button kullanın.
• Seçili satırlara toplu eylem için: ActionBar kullanın.
• İki ya da üç bağımsız düğme için: ButtonGroup yeterlidir.
• Tek seçimli görünüm değişimi için: SegmentedControl kullanın.

Anatomi

AçıkKoyu

Kodu kopyala

import { Toolbar, ToolbarButton, ToolbarGroup, ToolbarSeparator } from '@bigbang/ui';
import { useState } from 'react';

export default function Default() {
  const [bold, setBold] = useState(true);
  const [italic, setItalic] = useState(false);
  const [align, setAlign] = useState('left');
  return (
    <Toolbar label="Metin biçimi">
      <ToolbarGroup label="Stil">
        <ToolbarButton label="Kalın" icon="bold" iconOnly pressed={bold} onClick={() => setBold(!bold)} />
        <ToolbarButton label="İtalik" icon="italic" iconOnly pressed={italic} onClick={() => setItalic(!italic)} />
      </ToolbarGroup>
      <ToolbarSeparator />
      <ToolbarGroup label="Hizalama">
        <ToolbarButton label="Sola hizala" icon="align-left" iconOnly pressed={align === 'left'} onClick={() => setAlign('left')} />
        <ToolbarButton label="Ortala" icon="align-center" iconOnly pressed={align === 'center'} onClick={() => setAlign('center')} />
        <ToolbarButton label="Sağa hizala" icon="align-right" iconOnly pressed={align === 'right'} onClick={() => setAlign('right')} />
      </ToolbarGroup>
    </Toolbar>
  );
}

1. Kap: toolbar rolü ve zorunlu label adı; yükseltilmiş yüzey ve ince kenarlık.
2. Grup: İlgili düğmeler; isteğe bağlı adı vardır.
3. Düğme: Eylem ya da pressed ile açma-kapama; ikonlu, etiketli ya da yalnızca ikonlu.
4. Ayırıcı: Gruplar arasında ince çizgi.

Davranış

• Tab araç çubuğuna girer; son odaklanan düğmeye döner. İkinci Tab araç çubuğundan çıkar.
• Ok tuşları düğmeler arasında gezer ve sonda başa döner. Devre dışı düğmeler de odaklanır, yerleri duyurulur ama çalışmazlar.
• pressed alan düğme basılıyken seçili zemin alır; renk geçişi yumuşaktır. Basılan düğme hafifçe küçülür.
• Dar ekranda yatay araç çubuğu satır atlamaz, yana kayar.

Yönergeler

• Düğmeleri işleve göre gruplayın ve gruplar arasına ayırıcı koyun.
• Yalnızca ikonlu düğmelerde yaygın ikonlar kullanın; anlamı belirsizse etiket gösterin.
• Bir araç çubuğunda on düğmeyi geçmeyin.
• Tek seçimli gruplarda (hizalama gibi) yalnızca bir düğme pressed olsun.

İçerik

• Etiketler kısa fiil ya da biçim adıdır.
• label araç çubuğunun neye etki ettiğini söyler: “Metin biçimi”, “Görünüm”.

Türkçe	İngilizce
Metin biçimi	Text format
Kalın	Bold
İtalik	Italic
Sola hizala	Align left
Ortala	Align centre

Cam

Provider material="glass" altında araç çubuğu cama döner. material="solid" onu opak tutar.

İlgili bileşenler

• ButtonGroup: Birkaç ilgili düğme, her biri ayrı sekme durağı.
• ToggleGroup: Açık ya da kapalı kalan ayar grubu.
• SplitButton: Ana eylem ve çeşitleri.