ActionBar

Aşağıdaki örnek Storybook’tan canlı yüklenir; denetimleri Storybook’ta açabilirsiniz. Öğeleri seçin; çubuk ilk seçimde aşağıdan yükselerek belirir ve sayı değiştikçe yumuşakça yenilenir.

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

ActionBar seçim sayısını, seçimi temizleme düğmesini ve eylemleri gösterir. Örnekte placement="inline" kullanılır; varsayılan floating çubuğu ekranın altına sabitler.

3 öğe seçildi

3 öğe seçildi

ArşivleTaşı

Sil

AçıkKoyu

Kodu kopyala

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

export default function Default() {
  const [count, setCount] = useState(3);
  return (
    <ActionBar placement="inline" count={count} onClear={() => setCount(0)}>
      <ToolbarButton label="Arşivle" icon="download" />
      <ToolbarButton label="Taşı" icon="arrow-right" />
      <ToolbarSeparator />
      <ToolbarButton label="Sil" icon="trash" />
    </ActionBar>
  );
}

Yalnızca ikonlu eylemler

Dar alanlarda eylemler iconOnly ile yalnızca ikon gösterebilir; ad label’dan gelir.

2 öğe seçildi

2 öğe seçildi

AçıkKoyu

Kodu kopyala

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

export default function IconOnly() {
  return (
    <ActionBar placement="inline" count={2} onClear={() => {}}>
      <ToolbarButton label="İndir" icon="download" iconOnly />
      <ToolbarButton label="Kopyala" icon="copy" iconOnly />
      <ToolbarButton label="Sil" icon="trash" iconOnly />
    </ActionBar>
  );
}

Özel sayı metni

countLabel neyin seçildiğini söyleyen metni verir.

12 dosya seçildi

12 dosya seçildi

İndir

AçıkKoyu

Kodu kopyala

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

export default function CustomCount() {
  return (
    <ActionBar placement="inline" count={12} onClear={() => {}} countLabel={(count) => `${count} dosya seçildi`}>
      <ToolbarButton label="İndir" icon="download" />
    </ActionBar>
  );
}

Açık ve koyu mod

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

Açık

3 öğe seçildi

3 öğe seçildi

ArşivleTaşı

Sil

Koyu

3 öğe seçildi

3 öğe seçildi

ArşivleTaşı

Sil

Kodu kopyala

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

export default function Default() {
  const [count, setCount] = useState(3);
  return (
    <ActionBar placement="inline" count={count} onClear={() => setCount(0)}>
      <ToolbarButton label="Arşivle" icon="download" />
      <ToolbarButton label="Taşı" icon="arrow-right" />
      <ToolbarSeparator />
      <ToolbarButton label="Sil" icon="trash" />
    </ActionBar>
  );
}