Menu Button

하나의 버튼에서 명령 메뉴를 열고 닫을 때 포커스를 복원합니다.

용법

작업 메뉴

하나의 간결한 버튼에서 작업 공간 리소스를 만들거나 가져옵니다.

<!-- Menu Button / Actions -->
<script setup lang="ts">
import { MenuButtonRoot, MenuButtonTrigger, MenuButtonContent, MenuItem, MenuSeparator } from '@sectile/vue/menu-button'
import { ref } from 'vue'

const lastAction = ref('')
const items = [
  { id: 'new-file', parentID: null },
  { id: 'new-folder', parentID: null },
  { id: 'import', parentID: null },
]

</script>

<template>
  <MenuButtonRoot :items="items" @invoke="lastAction = $event">
    <MenuButtonTrigger>Create</MenuButtonTrigger>
    <MenuButtonContent>
      <MenuItem value="new-file">New file <kbd>⌘N</kbd></MenuItem>
      <MenuItem value="new-folder">New folder <kbd>⇧⌘N</kbd></MenuItem>
      <MenuSeparator />
      <MenuItem value="import">Import…</MenuItem>
    </MenuButtonContent>
  </MenuButtonRoot>
  <p v-if="lastAction" role="status">{{ lastAction }} invoked</p>
</template>

중첩 하위 메뉴

부가 내보내기 형식은 내보내기 하위 메뉴 안에 정리합니다.

<!-- Menu Button / Nested -->
<script setup lang="ts">
import { MenuButtonRoot, MenuButtonTrigger, MenuButtonContent, MenuItem, MenuSeparator, MenuSubContent } from '@sectile/vue/menu-button'
import { ref } from 'vue'

const lastAction = ref('')
const items = [
  { id: 'download', parentID: null },
  { id: 'share', parentID: null },
  { id: 'export', parentID: null },
  { id: 'pdf', parentID: 'export' },
  { id: 'markdown', parentID: 'export' },
  { id: 'csv', parentID: 'export' },
]

</script>

<template>
  <MenuButtonRoot :items="items" @invoke="lastAction = $event">
    <MenuButtonTrigger>Export options</MenuButtonTrigger>
    <MenuButtonContent>
      <MenuItem value="download">Download copy <kbd>⇧D</kbd></MenuItem>
      <MenuItem value="share">Share link <kbd>⌘L</kbd></MenuItem>
      <MenuSeparator />
      <MenuItem value="export">Export as ›</MenuItem>
      <MenuSubContent for="export">
        <MenuItem value="pdf">PDF document</MenuItem>
        <MenuItem value="markdown">Markdown</MenuItem>
        <MenuItem value="csv">CSV data</MenuItem>
      </MenuSubContent>
    </MenuButtonContent>
  </MenuButtonRoot>
  <p v-if="lastAction" role="status">{{ lastAction }} invoked</p>
</template>

외부 상태 관리

현재 값은 부모가 관리하고, 허용된 변경을 컴포넌트에 다시 전달합니다.

<!-- Menu Button / Controlled -->
<script setup lang="ts">
import { MenuButtonRoot, MenuButtonTrigger, MenuButtonContent, MenuItem } from '@sectile/vue/menu-button'
import { ref } from 'vue'

const open = ref(false)
const items = [{ id: 'duplicate', parentID: null }, { id: 'archive', parentID: null }]

</script>

<template>
  <MenuButtonRoot v-model:open="open" :items="items">
    <MenuButtonTrigger>{{ open ? 'Close actions' : 'Open actions' }}</MenuButtonTrigger>
    <MenuButtonContent>
      <MenuItem v-for="item in items" :key="item.id" :value="item.id">
        {{ item.id }}
      </MenuItem>
    </MenuButtonContent>
  </MenuButtonRoot>
</template>

Floating 위치

이 컴포넌트는 공통 위치 엔진을 사용합니다. 실시간 위치 예시에서 side, align, 간격, 충돌 경계, strategy, tracking을 바꾸며 계산 결과를 확인할 수 있습니다.

API

Vue 패키지: @sectile/vue/menu-button

컴포넌트

MenuButtonContent
MenuButtonRoot
MenuButtonTrigger
MenuItem
MenuSeparator
MenuSubContent

Props

`MenuButtonRootProps`

align: 타입PositionAlign기본값undefined
기준 요소를 중심으로 팝업 내용을 정렬할 위치입니다.
as: 타입PrimitiveAs기본값undefined
이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild: 타입boolean기본값undefined
하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.
avoidCollisions: 타입boolean기본값undefined
팝업이 화면 안에 남도록 위치를 뒤집거나 이동할지 여부입니다.
collisionBoundary: 타입PositionBoundary기본값undefined
팝업을 화면 안에 유지할 때 사용할 경계입니다.
collisionPadding: 타입PositionPadding기본값undefined
팝업과 충돌 경계 사이에 둘 간격입니다.
defaultHighlightedValue: 타입string | null기본값undefined
컴포넌트가 관리하는 처음 강조 값입니다.
defaultOpen: 타입boolean기본값undefined
컴포넌트가 관리하는 초기 열림 상태입니다.
disabled: 타입boolean기본값undefined
사용자 조작을 막을지 여부입니다.
disabledItems: 타입readonly string[]기본값undefined
포커스와 선택 대상에서 제외할 항목 값입니다.
hideWhenDetached: 타입boolean기본값undefined
기준 요소가 레이아웃에서 벗어나면 팝업을 숨길지 여부입니다.
items: 타입readonly MenuItemDefinition<string>[]기본값필수
컴포넌트가 관리할 순서 있는 항목 값입니다.
label: 타입string기본값undefined
보조 기술이 읽는 컨트롤 이름입니다.
open: 타입boolean기본값undefined
연결된 팝업이나 펼침 영역이 열려 있는지 여부입니다.
policies: 타입MenuPolicies<string>기본값undefined
검증, 이동, 선택 동작을 조정하는 정책입니다.
position: 타입boolean기본값undefined
실행 요소를 기준으로 팝업 위치를 계산할지 여부입니다.
side: 타입PositionSide기본값undefined
기준 요소를 중심으로 팝업을 우선 배치할 방향입니다.
sideOffset: 타입number기본값undefined
팝업과 기준 요소 사이 거리입니다.
strategy: 타입PositionStrategy기본값undefined
기준 요소에 연결된 콘텐츠의 CSS 위치 전략입니다.
textValue: 타입(id: string) => string기본값undefined
항목 값을 검색 또는 표시 문자열로 바꾸는 함수입니다.
tracking: 타입PositionTracking기본값undefined
기준 요소에 연결된 콘텐츠가 열린 동안 위치를 갱신할 방식입니다.

`MenuItemProps`

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

`MenuPartProps`

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

`MenuSubContentProps`

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

슬롯

`MenuItemSlotProps`

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

`MenuRootSlotProps`

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

이벤트

`MenuButtonRoot`

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

파트

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

파트	선택자	역할	추가 속성
`trigger`	`[data-part="trigger"]`	연결된 콘텐츠를 열고 닫거나 활성화합니다.	—
`content`	`[data-part="content"]`	현재 상태에 맞는 컴포넌트 콘텐츠를 담습니다.	—
`item`	`[data-part="item"]`	모든 계층의 메뉴 항목. data-level로 최상위 항목과 중첩 항목을 구분	`data-scope="menu"` `data-level="<depth>"`
`sub-content`	`[data-part="sub-content"]`	상위 메뉴 항목이 소유하는 팝업 콘텐츠	`data-scope="menu"` `data-level="<depth>"`
`separator`	`[data-part="separator"]`	관련 그룹 사이에 의미 구분선을 표시합니다.	`data-scope="menu"`

키보드 동작

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

접근성

실행 요소가 팝업과 열림 상태를 노출하고 열린 내용은 메뉴 의미를 사용한 뒤 닫힐 때 포커스를 돌려줍니다.

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

Menu Button ​

용법 ​

작업 메뉴 ​

중첩 하위 메뉴 ​

외부 상태 관리 ​

Floating 위치 ​

API ​

Props ​

MenuButtonRootProps ​

MenuItemProps ​

MenuPartProps ​

MenuSubContentProps ​

슬롯 ​

MenuItemSlotProps ​

MenuRootSlotProps ​

이벤트 ​

MenuButtonRoot ​

파트 ​

키보드 동작 ​

접근성 ​

용법