Menubar

최상위 메뉴 사이를 이동한 뒤 각 명령 계층을 탐색합니다.

용법

응용 프로그램 메뉴

최상위 응용 프로그램 메뉴 사이를 이동한 뒤 열린 명령 목록으로 들어갑니다.

Sectile Studio All changes saved

Untitled project

Choose a command from the menu bar

<!-- Menubar / Application -->
<script setup lang="ts">
import { MenubarRoot, MenubarItem, MenubarContent, MenubarSeparator } from '@sectile/vue/menubar'
import { ref } from 'vue'

const lastAction = ref('')
const items = [
  { id: 'file', parentID: null },
  { id: 'new-project', parentID: 'file' },
  { id: 'open-project', parentID: 'file' },
  { id: 'edit', parentID: null },
  { id: 'undo', parentID: 'edit' },
  { id: 'redo', parentID: 'edit' },
  { id: 'help', parentID: null },
  { id: 'shortcuts', parentID: 'help' },
]

const labels = {
  file: 'File',
  'new-project': 'New project',
  'open-project': 'Open project',
  edit: 'Edit',
  undo: 'Undo',
  redo: 'Redo',
  help: 'Help',
  shortcuts: 'Keyboard shortcuts',
}
const textValue = id => labels[id] ?? id

</script>

<template>
  <MenubarRoot
    :items="items"
    :text-value="textValue"
    default-highlighted-value="file"
    label="Application commands"
    @invoke="lastAction = $event"
  >
    <MenubarItem value="file" as="button">File</MenubarItem>
    <MenubarContent for="file">
      <MenubarItem value="new-project" as="button">New project</MenubarItem>
      <MenubarSeparator />
      <MenubarItem value="open-project" as="button">Open project</MenubarItem>
    </MenubarContent>
    <MenubarItem value="edit" as="button">Edit</MenubarItem>
    <MenubarContent for="edit">
      <MenubarItem value="undo" as="button">Undo</MenubarItem>
      <MenubarItem value="redo" as="button">Redo</MenubarItem>
    </MenubarContent>
    <MenubarItem value="help" as="button">Help</MenubarItem>
    <MenubarContent for="help">
      <MenubarItem value="shortcuts" as="button">Keyboard shortcuts</MenubarItem>
    </MenubarContent>
  </MenubarRoot>
  <p role="status">{{ lastAction ? lastAction + ' invoked' : 'Choose an action' }}</p>
</template>

비활성 항목 최상위

활성 최상위 메뉴를 따라 양옆 메뉴 사이를 이동합니다.

Sectile Studio All changes saved

Untitled project

View menu is unavailable in this workspace

<!-- Menubar / Disabled Root -->
<script setup lang="ts">
import { MenubarRoot, MenubarItem, MenubarContent, MenubarSeparator } from '@sectile/vue/menubar'
import { ref } from 'vue'

const lastAction = ref('')
const items = [
  { id: 'file', parentID: null },
  { id: 'new-project', parentID: 'file' },
  { id: 'open-project', parentID: 'file' },
  { id: 'edit', parentID: null },
  { id: 'undo', parentID: 'edit' },
  { id: 'redo', parentID: 'edit' },
  { id: 'help', parentID: null },
  { id: 'shortcuts', parentID: 'help' },
]

const labels = {
  file: 'File',
  'new-project': 'New project',
  'open-project': 'Open project',
  edit: 'Edit',
  undo: 'Undo',
  redo: 'Redo',
  help: 'Help',
  shortcuts: 'Keyboard shortcuts',
}
const textValue = id => labels[id] ?? id

</script>

<template>
  <MenubarRoot
    :items="items"
    :text-value="textValue"
    default-highlighted-value="file"
    label="Application commands"
    @invoke="lastAction = $event"
  >
    <MenubarItem value="file" as="button">File</MenubarItem>
    <MenubarContent for="file">
      <MenubarItem value="new-project" as="button">New project</MenubarItem>
      <MenubarSeparator />
      <MenubarItem value="open-project" as="button">Open project</MenubarItem>
    </MenubarContent>
    <MenubarItem value="edit" as="button">Edit</MenubarItem>
    <MenubarContent for="edit">
      <MenubarItem value="undo" as="button">Undo</MenubarItem>
      <MenubarItem value="redo" as="button">Redo</MenubarItem>
    </MenubarContent>
    <MenubarItem value="help" as="button">Help</MenubarItem>
    <MenubarContent for="help">
      <MenubarItem value="shortcuts" as="button">Keyboard shortcuts</MenubarItem>
    </MenubarContent>
  </MenubarRoot>
  <p role="status">{{ lastAction ? lastAction + ' invoked' : 'Choose an action' }}</p>
</template>

글자 입력으로 이동

입력한 글자로 시작하는 다음 메뉴로 이동합니다.

Sectile Studio All changes saved

Untitled project

Focus the menu bar and type a menu name

<!-- Menubar / Typeahead -->
<script setup lang="ts">
import { MenubarRoot, MenubarItem, MenubarContent, MenubarSeparator } from '@sectile/vue/menubar'
import { ref } from 'vue'

const lastAction = ref('')
const items = [
  { id: 'file', parentID: null },
  { id: 'new-project', parentID: 'file' },
  { id: 'open-project', parentID: 'file' },
  { id: 'edit', parentID: null },
  { id: 'undo', parentID: 'edit' },
  { id: 'redo', parentID: 'edit' },
  { id: 'help', parentID: null },
  { id: 'shortcuts', parentID: 'help' },
]

const labels = {
  file: 'File',
  'new-project': 'New project',
  'open-project': 'Open project',
  edit: 'Edit',
  undo: 'Undo',
  redo: 'Redo',
  help: 'Help',
  shortcuts: 'Keyboard shortcuts',
}
const textValue = id => labels[id] ?? id

</script>

<template>
  <MenubarRoot
    :items="items"
    :text-value="textValue"
    default-highlighted-value="file"
    label="Application commands"
    @invoke="lastAction = $event"
  >
    <MenubarItem value="file" as="button">File</MenubarItem>
    <MenubarContent for="file">
      <MenubarItem value="new-project" as="button">New project</MenubarItem>
      <MenubarSeparator />
      <MenubarItem value="open-project" as="button">Open project</MenubarItem>
    </MenubarContent>
    <MenubarItem value="edit" as="button">Edit</MenubarItem>
    <MenubarContent for="edit">
      <MenubarItem value="undo" as="button">Undo</MenubarItem>
      <MenubarItem value="redo" as="button">Redo</MenubarItem>
    </MenubarContent>
    <MenubarItem value="help" as="button">Help</MenubarItem>
    <MenubarContent for="help">
      <MenubarItem value="shortcuts" as="button">Keyboard shortcuts</MenubarItem>
    </MenubarContent>
  </MenubarRoot>
  <p role="status">{{ lastAction ? lastAction + ' invoked' : 'Choose an action' }}</p>
</template>

API

Vue 패키지: @sectile/vue/menubar

컴포넌트

MenubarItem
MenubarSeparator
MenubarContent
MenubarRoot

Props

`MenubarItemProps`

as: 타입PrimitiveAs기본값undefined
이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild: 타입boolean기본값undefined
하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.
disabled: 타입boolean기본값undefined
사용자 조작을 막을지 여부입니다.
value: 타입string기본값필수
이 계약이 노출하는 현재 값입니다.

`MenubarPartProps`

as: 타입PrimitiveAs기본값파트별로 다름
이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild: 타입boolean기본값false
하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.

`MenubarRootProps`

as: 타입PrimitiveAs기본값undefined
이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild: 타입boolean기본값undefined
하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.
defaultHighlightedValue: 타입string | null기본값undefined
컴포넌트가 관리하는 처음 강조 값입니다.
disabled: 타입boolean기본값undefined
사용자 조작을 막을지 여부입니다.
disabledItems: 타입readonly string[]기본값undefined
포커스와 선택 대상에서 제외할 항목 값입니다.
items: 타입readonly MenuItemDefinition<string>[]기본값필수
컴포넌트가 관리할 순서 있는 항목 값입니다.
label: 타입string기본값undefined
보조 기술이 읽는 컨트롤 이름입니다.
policies: 타입MenuPolicies<string>기본값undefined
검증, 이동, 선택 동작을 조정하는 정책입니다.
textValue: 타입(id: string) => string기본값undefined
항목 값을 검색 또는 표시 문자열로 바꾸는 함수입니다.

`MenubarContentProps`

as: 타입PrimitiveAs기본값undefined
이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild: 타입boolean기본값undefined
하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.
for: 타입string기본값필수
이 컴포넌트가 연결할 관련 파트의 값 또는 ID입니다.

슬롯

`MenubarItemSlotProps`

disabled: 타입boolean
사용자 조작을 막을지 여부입니다.
highlighted: 타입boolean
조작 대상으로 강조된 항목인지 여부입니다.
open: 타입boolean
연결된 팝업이나 펼침 영역이 열려 있는지 여부입니다.
value: 타입string
이 계약이 노출하는 현재 값입니다.

`MenubarRootSlotProps`

disabled: 타입boolean
사용자 조작을 막을지 여부입니다.
highlightedValue: 타입string | null
조작 대상으로 강조된 현재 값입니다.
open: 타입boolean
연결된 팝업이나 펼침 영역이 열려 있는지 여부입니다.
openPath: 타입readonly string[]
열린 메뉴 경로의 순서 있는 값입니다.

이벤트

`MenubarRoot`

invoke: 페이로드string
현재 작업을 실행할 때 발생합니다.
update:open: 페이로드boolean
컴포넌트가 새 열림 상태를 요청할 때 발생합니다.

파트

공통 범위: [data-scope="menubar"]. 컴포넌트 내부로 스타일을 제한할 때 파트 선택자와 함께 사용합니다.

파트	선택자	역할	추가 속성
`root`	`[data-part="root"]`	컴포넌트 경계와 내부 파트를 묶습니다.	—
`item`	`[data-part="item"]`	모든 계층의 메뉴 항목. data-level로 최상위 항목과 중첩 항목을 구분	`data-level="<depth>"`
`sub-content`	`[data-part="sub-content"]`	상위 메뉴 항목이 소유하는 팝업 콘텐츠	`data-scope="menu"` `data-level="<depth>"`
`separator`	`[data-part="separator"]`	관련 그룹 사이에 의미 구분선을 표시합니다.	`data-scope="menu"`

키보드 동작

키	동작
`Arrow Left` / `Arrow Right`	최상위 메뉴 항목 사이를 이동합니다.
`Arrow Down` / `Arrow Up`	하위 메뉴를 열거나 세로 항목 목록 안에서 이동합니다.
`Home` / `End`	현재 단계의 첫 번째 또는 마지막 항목으로 이동합니다.
`Enter` / `Space`	하위 메뉴를 열거나 현재 항목을 실행합니다.
`Escape`	하위 메뉴를 닫고 이를 연 항목으로 돌아갑니다.

접근성

루트는 메뉴 막대 의미를 제공하고 열린 가지는 계층형 메뉴 항목과 이동 포커스를 사용합니다.

관련 WAI-ARIA 패턴에서 호스트 접근성 규칙을 확인할 수 있습니다.

Menubar ​

용법 ​

응용 프로그램 메뉴 ​

비활성 항목 최상위 ​

글자 입력으로 이동 ​

API ​

Props ​

MenubarItemProps ​

MenubarPartProps ​

MenubarRootProps ​

MenubarContentProps ​

슬롯 ​

MenubarItemSlotProps ​

MenubarRootSlotProps ​

이벤트 ​

MenubarRoot ​

파트 ​

키보드 동작 ​

접근성 ​

Menubar

용법

응용 프로그램 메뉴

비활성 항목 최상위

글자 입력으로 이동

API

Props

`MenubarItemProps`

`MenubarPartProps`

`MenubarRootProps`

`MenubarContentProps`

슬롯

`MenubarItemSlotProps`

`MenubarRootSlotProps`

이벤트

`MenubarRoot`

파트

키보드 동작

접근성