KeyboardShortcut

키보드 단축키 키 조합을 시각적으로 표시하는 컴포넌트

KeyboardShortcut#

키보드 단축키의 키 조합을 시각적으로 표시하는 컴포넌트입니다. 메뉴 / 도움말 / 사이드바 등에서 단축키를 안내할 때 사용합니다. 내부적으로 CoKbd 를 사용해 양쪽 플랫폼 동일한 키 박스 spec 으로 렌더됩니다.

Live Preview#

Web

Ctrl+Shift+K

Flutter

Loading Flutter...

class KeyboardShortcutDefaultExample extends StatelessComponent {
  const KeyboardShortcutDefaultExample({super.key});

  @override
  Component build(BuildContext context) {
    return const CoKeyboardShortcut(keys: ['Ctrl', 'Shift', 'K']);
  }
}

class KeyboardShortcutDefaultExample extends StatelessWidget {
  const KeyboardShortcutDefaultExample({super.key});

  @override
  Widget build(BuildContext context) {
    return const CoKeyboardShortcut(keys: ['Ctrl', 'Shift', 'K']);
  }
}

사용 시기 (When to Use)#

이 컴포넌트를 사용하세요:

메뉴 항목 옆에 해당 키보드 단축키를 안내할 때
설정 / 도움말 페이지의 단축키 목록을 표시할 때
커맨드 팔레트의 단축키 힌트를 표시할 때

대신 다른 컴포넌트를 사용하세요:

Kbd: 단축키 wrapper 없이 단일 키 박스만 필요할 때 (KeyboardShortcut 의 내부 building block)
Tooltip: 단축키가 아닌 일반 설명 텍스트를 호버 시 보여줄 때

기본 사용법 (Basic Usage)#

// 단축키 키 조합
const CoKeyboardShortcut(keys: ['Ctrl', 'S'])

// 복잡한 단축키
const CoKeyboardShortcut(keys: ['Ctrl', 'Shift', 'P'])

// macOS 표기
const CoKeyboardShortcut(keys: ['⌘', 'K'])

// Flutter ShortcutActivator 에서 자동 변환
CoKeyboardShortcut.fromActivator(
  activator: SingleActivator(LogicalKeyboardKey.keyS, control: true),
)

const CoKeyboardShortcut(keys: ['Ctrl', 'S'])
const CoKeyboardShortcut(keys: ['Ctrl', 'Shift', 'P'])
const CoKeyboardShortcut(keys: ['⌘', 'K'])

Props / Parameters#

속성	타입	기본값	설명
`keys`	`List<String>`	필수	표시할 키 목록 (`+` 구분자로 자동 join)
`spacing`	`double?`	`null`	키 사이 간격 override (null = 토큰 기본값)

Flutter 전용#

속성	타입	설명
`CoKeyboardShortcut.fromActivator`	`ShortcutActivator`	Flutter `SingleActivator` / `CharacterActivator` / `LogicalKeySet` 에서 자동 추출

동작 스펙#

표시 전용. 인터랙션 없음. 키 박스 spec 은 Kbd 와 동일 토큰 사용 (labelSmall + sans + surfaceContainer + outline + field radius).