Bileşenler

Toolbar

Tek sekme durağı olan, ok tuşlarıyla gezilen ilgili denetimler satırı.

Storybook: Storybook
Kaynak kod: Kaynak kod

Aşağıdaki örnek Storybook’tan canlı yüklenir; denetimleri Storybook’ta açabilirsiniz. Tab ile araç çubuğuna girin, ok tuşlarıyla düğmeler arasında gezin.

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

Araç çubuğu ilgili denetimleri tek satırda toplar. pressed alan düğmeler açılıp kapanır; ToolbarGroup ve ToolbarSeparator onları gruplar. label zorunludur.

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>
  );
}

Etiketli düğmeler

iconOnly verilmezse düğme ikonla birlikte görünür etiket gösterir.

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

export default function WithLabels() {
  return (
    <Toolbar label="Görünüm">
      <ToolbarButton label="Süz" icon="filter" />
      <ToolbarButton label="Yenile" icon="refresh" />
      <ToolbarSeparator />
      <ToolbarButton label="İndir" icon="download" />
    </Toolbar>
  );
}

Dikey

orientation="vertical" düğmeleri alt alta dizer; ok tuşları yukarı ve aşağı olur.

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

export default function Vertical() {
  return (
    <Toolbar label="Görünüm" orientation="vertical">
      <ToolbarButton label="Yakınlaştır" icon="plus" iconOnly />
      <ToolbarButton label="Uzaklaştır" icon="minus" iconOnly />
      <ToolbarSeparator />
      <ToolbarButton label="Yenile" icon="refresh" iconOnly />
    </Toolbar>
  );
}

Devre dışı

Devre dışı düğme ok tuşu sırasında kalır ama çalışmaz. Tüm araç çubuğu için disabled verin.

import { Toolbar, ToolbarButton } from '@bigbang/ui';

export default function Disabled() {
  return (
    <Toolbar label="Görünüm">
      <ToolbarButton label="Kopyala" icon="copy" />
      <ToolbarButton label="Sil" icon="trash" disabled />
    </Toolbar>
  );
}

Açık ve koyu mod

Renkler semantik token’lardan gelir; iki modda ayrı ayar gerekmez.

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>
  );
}