Kbd

Playground

'use client';
import { Kbd, KbdGroup } from '@mbsw/ui';

export default function Demo() {
  return (
    <div style={{ transform: 'scale(1.5)' }}>
      <KbdGroup>
        <Kbd>⌘</Kbd>
        <Kbd>K</Kbd>
      </KbdGroup>
    </div>
  );
}

Usage

키 이름은 Kbd, 키 조합은 KbdGroup으로 묶습니다. Kbd는 최소 16×16px이며 긴 키 이름은 내용에 맞게 넓어집니다. 단축키 실행은 앱에서 구현합니다.

'use client';
import { Kbd, KbdGroup } from '@mbsw/ui';

export default function Example() {
  return (
    <KbdGroup>
      <Kbd>⌘</Kbd>
      <Kbd>K</Kbd>
    </KbdGroup>
  );
}

Playground의 Code 탭에서 현재 설정과 동작이 포함된 예제 전체를 복사할 수 있습니다. 공통 CSS 설치는 설치하기를 확인하세요.

Composition

KbdKbdGroup