ActionBar

Ne zaman kullanılır

ActionBar, bir listede ya da tabloda birden çok öğe seçildiğinde hepsine birlikte uygulanacak eylemleri gösterir: arşivle, taşı, sil. İlk seçimde belirir, seçim temizlenince kaybolur.

Ne zaman kullanılmaz

• Tek bir öğenin eylemleri için: Eylemleri satırın içinde gösterin.
• Seçimden bağımsız eylemler için: Toolbar ya da PageHeader eylemleri kullanın.
• Seçim olmayan sayfalarda: Çubuk her zaman görünmemelidir.

Anatomi

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

1. Temizle düğmesi: Seçimi kaldırır; yalnızca ikonlu, adı Provider’dan gelir.
2. Sayı: Kaç öğenin seçildiğini söyler.
3. Ayırıcı: Sayıyı eylemlerden ayırır.
4. Eylemler: Seçili öğelerin hepsine uygulanan ToolbarButton’lar.

Davranış

• count 0’dan büyük olunca çubuk 8 px aşağıdan yükselerek ve solarak belirir. Hareketi azaltma tercihinde yalnızca saydamlık değişir.
• Sayı değişince metin yumuşakça yeniden belirir ve ekran okuyucuya bir kez duyurulur.
• Çubuk tek sekme durağıdır; ok tuşları düğmeler arasında gezer. Çubuk içindeyken Escape seçimi temizler.
• floating çubuk ekranın altına sabitlenir ve ortalanır; 640 px’in altında iki yanda boşlukla tam genişlik olur. inline çubuk koyduğunuz yerde durur.
• Çubuk belirince odak yerinde kalır; kullanıcı seçmeye devam edebilir.

Yönergeler

• Üç ile beş eylem gösterin; geri alınamayan eylemi sona koyun ve onay isteyin.
• Eylemleri seçili öğelerin hepsine uygulanabilir tutun.
• Sayfada tek ActionBar olsun.
• floating çubuğun içeriği örtmemesi için sayfanın altına çubuk yüksekliği kadar boşluk bırakın.

İçerik

• Eylem etiketleri kısa fiillerdir.
• Sayı metni neyin seçildiğini söyleyebilir: “12 dosya seçildi”.

Türkçe	İngilizce
Toplu eylemler	Bulk actions
3 öğe seçildi	3 selected
Seçimi temizle	Clear selection
Arşivle	Archive

Cam

Provider material="glass" altında çubuk cama döner. material="solid" onu opak tutar.

İlgili bileşenler

• Toolbar: Seçimden bağımsız denetimler.
• Checkbox: Öğeleri seçmek için.
• SplitButton: Ana eylem ve çeşitleri.