Bileşenler

Kbd

Bir klavye tuşunu ya da kısayolunu gösteren öğe.

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

keys bir kombinasyonu basılma sırasıyla alır. mod Apple platformlarında ⌘, diğerlerinde Ctrl olarak görünür.

CtrlControl+K

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

export default function Default() {
  return (
    <Kbd keys={['mod', 'K']} />
  );
}

Adlı tuşlar

Adlı tuşlar simge ya da kısa yazı alır; ekran okuyucu her birini Provider dilinde okur.

⌘Komut⇧Shift⌥Alt↵EnterEscEscape↑Yukarı ok↓Aşağı ok

CtrlControlShiftAltTabSekme

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

export default function NamedKeys() {
  return (
    <div className="flex flex-col items-start gap-md">
        <div className="flex flex-wrap gap-sm">
          <Kbd keys={['mod']} platform="apple" />
          <Kbd keys={['shift']} platform="apple" />
          <Kbd keys={['alt']} platform="apple" />
          <Kbd keys={['enter']} />
          <Kbd keys={['escape']} />
          <Kbd keys={['up']} />
          <Kbd keys={['down']} />
        </div>
        <div className="flex flex-wrap gap-sm">
          <Kbd keys={['mod']} platform="other" />
          <Kbd keys={['shift']} platform="other" />
          <Kbd keys={['alt']} platform="other" />
          <Kbd keys={['tab']} platform="other" />
        </div>
      </div>
  );
}

Metin içinde

Gövde metni içinde size="sm" kullanın.

Aramak için CtrlControl+K tuşlarına basın.

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

export default function InText() {
  return (
    <p className="type-body-md text-fg-default">
      Aramak için <Kbd keys={['mod', 'K']} size="sm" /> tuşlarına basın.
    </p>
  );
}

İpucunda

Bir işlemin kısayolunu Tooltip içinde gösterin.

import { Button, Kbd, Tooltip } from '@bigbang/ui';

export default function InTooltip() {
  return (
    <Tooltip
      content={
        <span className="inline-flex items-center gap-sm">
          Kaydet <Kbd keys={['mod', 'S']} size="sm" />
        </span>
      }
    >
      <Button variant="secondary">Kaydet</Button>
    </Tooltip>
  );
}

Açık ve koyu mod

Tuş color-surface-layer-2 zemin alır ve kenarlığı yoktur.

⌘Komut⇧Shift⌥Alt↵EnterEscEscape↑Yukarı ok↓Aşağı ok

CtrlControlShiftAltTabSekme

⌘Komut⇧Shift⌥Alt↵EnterEscEscape↑Yukarı ok↓Aşağı ok

CtrlControlShiftAltTabSekme

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

export default function NamedKeys() {
  return (
    <div className="flex flex-col items-start gap-md">
        <div className="flex flex-wrap gap-sm">
          <Kbd keys={['mod']} platform="apple" />
          <Kbd keys={['shift']} platform="apple" />
          <Kbd keys={['alt']} platform="apple" />
          <Kbd keys={['enter']} />
          <Kbd keys={['escape']} />
          <Kbd keys={['up']} />
          <Kbd keys={['down']} />
        </div>
        <div className="flex flex-wrap gap-sm">
          <Kbd keys={['mod']} platform="other" />
          <Kbd keys={['shift']} platform="other" />
          <Kbd keys={['alt']} platform="other" />
          <Kbd keys={['tab']} platform="other" />
        </div>
      </div>
  );
}