Bileşenler

SearchInput

Temizleme düğmeli, gecikmeli aramalı ve yükleniyor durumlu arama alanı.

Storybook: Storybook
Kaynak kod: Kaynak kod

Aşağıdaki örnek Storybook’tan canlı yüklenir; denetimleri Storybook’ta açabilirsiniz.

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

Arama ikonu başta durur; değer yazılınca sonda temizleme düğmesi belirir.

Ara

import { SearchInput } from '@bigbang/ui';

export default function Default() {
  return <SearchInput label="Ara" placeholder="Ada göre ara" className="max-w-sm" />;
}

Durumlar

Değerli, yükleniyor (ikonun yerinde dönen halka) ve devre dışı.

Ara

import { SearchInput } from '@bigbang/ui';

export default function States() {
  return (
    <div className="flex max-w-sm flex-col gap-lg">
      <SearchInput label="Ara" defaultValue="Öğe" />
      <SearchInput label="Ara" defaultValue="Öğe" loading />
      <SearchInput label="Ara" placeholder="Ada göre ara" disabled />
    </div>
  );
}

Gizli etiket

hideLabel etiketi görsel olarak gizler, ekran okuyucu okur. landmark alanı role="search" bölgesine sarar.

import { SearchInput } from '@bigbang/ui';

export default function HiddenLabel() {
  return <SearchInput label="Ara" hideLabel placeholder="Ada göre ara" landmark className="max-w-sm" />;
}

Yazarken arama

onSearch kullanıcı 300 ms durunca çalışır; sonuçlar gelene kadar loading gösterin.

Ara

import { SearchInput } from '@bigbang/ui';
import { useState } from 'react';

export default function SearchAsYouType() {
  const [loading, setLoading] = useState(false);
  const [count, setCount] = useState<number | null>(null);
  return (
    <div className="flex max-w-sm flex-col gap-sm">
      <SearchInput
        label="Ara"
        placeholder="Ada göre ara"
        loading={loading}
        onSearch={(query) => {
          if (!query) return setCount(null);
          setLoading(true);
          setTimeout(() => {
            setLoading(false);
            setCount(query.length * 3);
          }, 700);
        }}
      />
      <p className="type-body-sm text-fg-subtle">{count === null ? '' : `${count} sonuç`}</p>
    </div>
  );
}

Açık ve koyu mod

İkon ve düğmeler anlamsal token kullanır.

Ara

import { SearchInput } from '@bigbang/ui';

export default function States() {
  return (
    <div className="flex max-w-sm flex-col gap-lg">
      <SearchInput label="Ara" defaultValue="Öğe" />
      <SearchInput label="Ara" defaultValue="Öğe" loading />
      <SearchInput label="Ara" placeholder="Ada göre ara" disabled />
    </div>
  );
}