리본 키 설명

리본 키 설명은 SpreadJS 디자이너 컴포넌트의 리본 및 파일 메뉴에 키보드로 액세스할 수 있도록 합니다. 사용자는 Alt 또는 F10과 같은 활성화 키를 눌러 키 설명 레이블을 표시한 다음, 표시된 레이블을 입력하여 탭을 열거나, 명령을 실행하거나, 관련 UI 컨트롤로 이동할 수 있습니다.

키 설명을 사용하면 포인터를 사용하지 않고 디자이너 명령에 액세스할 수 있습니다.

리본 키 설명 활성화

리본 키 설명은 포커스가 디자이너 영역 내부에 있을 때 기본적으로 활성화됩니다. 기본 활성화 키는 단독 Alt 및 단독 F10입니다.

디자이너 구성에서 리본 키 설명을 활성화하거나 비활성화할 수 있습니다.

const config = {
  keyboard: {
    keyTips: {
      enabled: true,
    },
  },
};

활성화 키를 사용자 지정하려면 keyboard.keyTips.activationKeys를 설정합니다.

const config = {
  keyboard: {
    keyTips: {
      enabled: true,
      activationKeys: [
        { key: 'Alt' },
        { key: 'F10' },
      ],
    },
  },
};

activationKeys가 지정된 경우 구성된 키 조합만 키 설명을 활성화합니다. activationKeys가 지정되지 않은 경우 디자이너는 기본 활성화 키인 Alt와 F10을 사용합니다.

디자이너가 초기화된 후 키 설명을 비활성화할 수도 있습니다.

designer.setConfig({
  ...config,
  keyboard: {
    keyTips: {
      enabled: false,
    },
  },
});

리본 키 설명 사용

사용자가 활성화 키를 누르면 디자이너에 첫 번째 키 설명 레이어가 표시됩니다. 이 레이어에는 다음 항목에 대한 키 설명이 포함됩니다.

• 파일 메뉴

• 현재 표시된 리본 탭

키 설명이 활성화되었을 때 디자이너는 명령 키 설명을 즉시 표시하지 않습니다. 사용자가 먼저 리본 탭의 키 설명을 선택하면 디자이너가 해당 탭을 열고 그 탭에서 사용할 수 있는 명령의 키 설명을 표시합니다.

일반적인 흐름의 예는 다음과 같습니다.

Alt 또는 F10 누르기 -> 탭 키 설명 입력 -> 명령 키 설명 입력

선택한 키 설명이 명령을 실행하는 경우 디자이너는 명령을 실행하고 키 설명 모드를 종료합니다.

선택한 키 설명이 드롭다운, 팝업, 메뉴, 입력 필드, 콤보 상자, 색 선택기 또는 대화 상자와 같은 다른 UI 영역을 여는 경우 디자이너는 해당 영역을 열고 이후의 키보드 입력은 해당 영역에서 처리하도록 합니다.

키 설명은 현재 표시된 레이어 내에서 확인됩니다. 서로 다른 레이어에서는 동일한 키 설명을 다시 사용할 수 있습니다. 동일한 레이어 내에서는 하나의 완전한 키 설명이 다른 키 설명의 접두사가 되지 않도록 디자이너가 키 설명을 할당합니다. 입력한 내용이 완전한 키 설명과 일치하면 디자이너가 즉시 적용합니다.

구성된 활성화 키를 다시 누르면 키 설명 모드가 종료됩니다.

리본 탭에 직접 액세스

디자이너가 단축키를 받을 수 있는 경우 활성화 키와 탭 키 설명을 사용하여 최상위 리본 탭에 직접 액세스할 수 있습니다.

예를 들어 홈 탭에 H 키 설명이 표시되는 경우 다음과 같이 홈 탭을 직접 열 수 있습니다.

Alt+H
F10, H

이는 먼저 활성화 키를 누른 다음 H를 입력하는 것과 동일합니다.

파일 메뉴에서 키 설명 사용

사용자가 파일 메뉴 키 설명을 활성화하면 디자이너가 파일 메뉴를 열고 현재 표시된 파일 메뉴 콘텐츠에 대한 키 설명을 표시합니다.

파일 메뉴는 템플릿 기반이므로 키 설명은 현재 표시된 파일 메뉴 페이지와 해당 페이지에 표시된 대화형 항목을 기반으로 합니다. 키 설명으로 인해 표시되는 파일 메뉴 페이지 또는 콘텐츠가 변경되는 경우, 디자이너는 가능한 경우 키 설명을 활성 상태로 유지하고 새 콘텐츠에 표시되는 키 설명을 새로 고칩니다.

템플릿 항목은 keyTip 값을 정의하여 고정된 키 설명을 제공할 수 있습니다.

const templates = [
  {
    name: 'Blank Workbook',
    keyTip: 'B',
  },
  {
    name: 'Expense Budget',
    data: '/app/templates/expense-budget.ssjson',
    thumbnail: '/app/templates/expense-budget.png',
    keyTip: 'EB',
  },
];

템플릿 항목에 keyTip이 정의되지 않은 경우 가능한 경우 디자이너가 키 설명을 자동으로 할당할 수 있습니다.

리본 키 설명 사용자 지정

레이블을 표시할 특정 리본 배치에 keyTip을 설정하여 리본 구성에서 키 설명을 사용자 지정할 수 있습니다.

키 설명은 배치 수준에서 정의됩니다. 동일한 명령이 여러 위치에 표시되는 경우 각 배치에 서로 다른 키 설명을 사용할 수 있습니다.

const config = {
  ribbon: [
    {
      id: 'customTab',
      text: 'Custom',
      keyTip: 'CT',
      buttonGroups: [
        {
          label: 'Custom',
          commandGroup: {
            children: [
              {
                direction: "vertical",
                commands: [
                     "MyCheckbox"
                 ],
                keyTip: 'M',
              },
            ],
          },
        },
      ],
    },
  ],
};

이 예제에서는 사용자 지정 탭에 CT를 사용하고 명령 배치에 M을 사용합니다.

사용자 지정 키 설명에는 다음 규칙이 적용됩니다.

• 지원되는 문자는 A-Z 및 0-9입니다.

• 키 설명 값의 앞뒤 공백은 제거되며 대문자로 정규화됩니다.

• 여러 문자로 구성된 키 설명이 지원됩니다.

• 일치 여부는 대/소문자를 구분하지 않습니다.

• 키 설명은 활성 레이어 내에서 독립적으로 확인됩니다. 서로 다른 레이어에서는 동일한 키 설명을 다시 사용할 수 있습니다.

• 동일한 레이어 내에서는 중복된 키 설명 및 접두사 충돌이 허용되지 않습니다.

• 배치에 keyTip이 정의되지 않은 경우 가능한 경우 디자이너가 키 설명을 자동으로 할당합니다.

• 사용자 지정 키 설명이 유효하지 않거나 동일한 레이어의 다른 키 설명과 충돌하는 경우 가능한 경우 디자이너가 충돌하지 않는 대체 키 설명을 사용합니다.

• 자동으로 할당된 키 설명은 리본 항목이 추가, 제거되거나 다른 레이어에 표시될 때 변경될 수 있습니다. 고정된 레이블을 유지하려면 keyTip을 명시적으로 정의합니다.

컨트롤을 연 후의 키보드 동작

키 설명은 명령 및 진입점에 접근하는 데 사용됩니다. 키 설명으로 자체 키보드 동작이 있는 컨트롤을 연 후에는 해당 컨트롤이 이후의 키보드 입력을 처리합니다.

예를 들면 다음과 같습니다.

• 드롭다운 또는 팝업은 자체 키보드 동작을 따릅니다.

• 메뉴 또는 하위 메뉴에서는 명령과 유사한 항목에 대한 키 설명이 계속 표시될 수 있습니다.

• 입력 필드 또는 콤보 상자는 포커스를 받고 입력된 문자를 처리합니다.

• 색 선택기는 포커스를 받고 색 선택 동작을 처리합니다.

• 대화 상자는 해당 대화 상자의 동작에 따라 포커스를 받습니다.

지원되는 드롭다운, 메뉴, 갤러리, 색 선택기 및 이와 유사한 영역은 키 설명을 통해 열린 후 포커스 탐색을 제공할 수 있습니다. 이러한 영역에서는 다음과 같이 동작합니다.

• Tab 및 Shift+Tab은 활성화된 대화형 항목 사이에서 포커스를 앞이나 뒤로 이동합니다.

• 위쪽 화살표 및 아래쪽 화살표는 포커스를 세로 방향으로 이동합니다. 메뉴 또는 1차원 목록에서는 이전 또는 다음 활성화된 항목으로 이동합니다.

• 왼쪽 화살표 및 오른쪽 화살표는 그리드 또는 갤러리에서 포커스를 가로 방향으로 이동합니다. 중첩 메뉴에서는 오른쪽 화살표를 누르면 하위 메뉴가 열리고 첫 번째 항목으로 포커스가 이동하며, 왼쪽 화살표를 누르면 하위 메뉴가 닫히고 상위 항목으로 포커스가 돌아갑니다.

• Enter 및 Space는 포커스된 항목을 활성화합니다. 항목에 하위 메뉴 또는 드롭다운이 있는 경우 해당 영역이 열리고 그 안으로 포커스가 이동합니다.

• Esc는 현재 팝업 또는 하위 메뉴를 닫고 가능한 경우 포커스와 키 설명을 상위 레이어로 복원합니다.

이 포커스 탐색은 키 설명을 통해 열린 지원 영역에 적용됩니다. 전체 리본의 포커스 탐색을 정의하는 것은 아닙니다.

동작 참고 사항

리본 키 설명에는 다음과 같은 일반적인 동작 규칙이 적용됩니다.

• 시각적 요소에만 해당하는 항목에는 키 설명이 표시되지 않습니다.

• 비활성화된 대상은 실행할 수 없습니다. 하지만 할당된 키 설명은 그대로 예약될 수 있습니다.

• 숨겨져 있거나 잘렸거나 화면 밖에 있는 일부 대상은 배지가 표시되지 않더라도 키 설명을 예약할 수 있습니다.

• 분할 버튼의 키 설명은 기본 동작을 실행하는 대신 드롭다운을 엽니다.

• 포인터를 사용하면 키 설명 모드가 종료됩니다.

• 구성된 활성화 키를 다시 누르면 키 설명 모드가 종료됩니다.

• Esc는 가능한 경우 이전 키 설명 레이어로 돌아갑니다. 그렇지 않으면 키 설명 모드가 종료됩니다.

• 키 설명 레이블은 가능한 경우 홈 탭의 H와 같이 Excel 스타일의 키 설명을 따릅니다.