Toolbar

관련 작업을 짧은 막대에 모아 이동하고 현재 도구를 실행합니다.

용법

가로 도구 막대

인라인 텍스트 서식 작업을 자연스러운 가로 순서로 묶습니다.

<!-- Toolbar / Formatting -->
<script setup lang="ts">
import { ToolbarRoot, ToolbarItem, ToolbarSeparator } from '@sectile/vue/toolbar'
import { ref } from 'vue'

const items = ['bold', 'italic', 'link']
const lastAction = ref('')

</script>

<template>
  <ToolbarRoot :items="items" label="Text formatting" @invoke="lastAction = $event">
    <ToolbarItem value="bold"><strong>B</strong><span class="sr-only">Bold</span></ToolbarItem>
    <ToolbarItem value="italic"><em>I</em><span class="sr-only">Italic</span></ToolbarItem>
    <ToolbarSeparator />
    <ToolbarItem value="link">Link</ToolbarItem>
    </ToolbarRoot>
  <p v-if="lastAction" role="status">{{ lastAction }} applied</p>
</template>

세로 도구 막대

편집 화면 옆에 캔버스 도구를 세로로 배치합니다.

<!-- Toolbar / Vertical -->
<script setup lang="ts">
import { ToolbarRoot, ToolbarItem, ToolbarSeparator } from '@sectile/vue/toolbar'
import { ref } from 'vue'

const items = ['select', 'comment', 'upload']
const activeTool = ref('select')

</script>

<template>
  <ToolbarRoot :items="items" orientation="vertical" label="Canvas tools" @invoke="activeTool = $event">
    <ToolbarItem value="select">Select</ToolbarItem>
    <ToolbarItem value="comment">Comment</ToolbarItem>
    <ToolbarSeparator />
    <ToolbarItem value="upload">Upload</ToolbarItem>
    </ToolbarRoot>
  <p role="status">Active tool: {{ activeTool }}</p>
</template>

부모가 관리하는 포커스

키보드 이동 규칙은 유지하면서 현재 도구 항목을 부모가 관리합니다.

<!-- Toolbar / Controlled Focus -->
<script setup lang="ts">
import { ToolbarRoot, ToolbarItem } from '@sectile/vue/toolbar'
import { ref } from 'vue'

const items = ['select', 'comment', 'upload']
const activeTool = ref('select')

</script>

<template>
  <ToolbarRoot v-model="activeTool" :items="items" label="Canvas tools">
    <ToolbarItem v-for="item in items" :key="item" :value="item">
      {{ item }}
    </ToolbarItem>
  </ToolbarRoot>
  <button type="button" @click="activeTool = 'comment'">Focus comment</button>
</template>

API

Vue 패키지: @sectile/vue/toolbar

컴포넌트

ToolbarRoot
ToolbarItem
ToolbarSeparator

Props

`ToolbarRootProps`

as: 타입PrimitiveAs기본값'div'
이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild: 타입boolean기본값false
하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.
defaultValue: 타입string | null기본값null
컴포넌트가 값을 관리할 때 사용할 초깃값입니다.
disabled: 타입boolean기본값false
사용자 조작을 막을지 여부입니다.
disabledItems: 타입readonly string[]기본값[]
포커스와 선택 대상에서 제외할 항목 값입니다.
items: 타입readonly string[]기본값필수
컴포넌트가 관리할 순서 있는 항목 값입니다.
label: 타입string기본값undefined
보조 기술이 읽는 컨트롤 이름입니다.
modelValue: 타입string | null기본값undefined
부모가 상태를 관리할 때 사용할 현재 값입니다.
orientation: 타입'horizontal' | 'vertical'기본값'horizontal'
배치와 키보드 이동에 사용할 축입니다.
policies: 타입ToolbarPolicies<string>기본값undefined
검증, 이동, 선택 동작을 조정하는 정책입니다.

`ToolbarItemProps`

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

`ToolbarPartProps`

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

슬롯

`ToolbarRootSlotProps`

disabled: 타입boolean
사용자 조작을 막을지 여부입니다.
highlightedValue: 타입string | null
조작 대상으로 강조된 현재 값입니다.
orientation: 타입'horizontal' | 'vertical'
현재 배치와 이동 축입니다.

`ToolbarItemSlotProps`

disabled: 타입boolean
사용자 조작을 막을지 여부입니다.
highlighted: 타입boolean
조작 대상으로 강조된 항목인지 여부입니다.
value: 타입string
이 계약이 노출하는 현재 값입니다.

이벤트

`ToolbarRoot`

invoke: 페이로드string
현재 작업을 실행할 때 발생합니다.
update:modelValue: 페이로드string | null
컴포넌트가 외부 제어 값의 변경을 요청할 때 발생합니다.

기타 타입

`ToolbarValueChangeHandler`

type ToolbarValueChangeHandler = (value: string | null) => void

`ToolbarInvokeHandler`

type ToolbarInvokeHandler = (value: string) => void

파트

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

파트	선택자	역할	추가 속성
`root`	`[data-part="root"]`	컴포넌트 경계와 내부 파트를 묶습니다.	—
`item`	`[data-part="item"]`	선택하거나 실행할 수 있는 항목 하나입니다.	—
`separator`	`[data-part="separator"]`	관련 그룹 사이에 의미 구분선을 표시합니다.	—

키보드 동작

키	동작
`Arrow keys`	설정된 방향에 따라 도구 항목 사이를 이동합니다.
`Home` / `End`	활성화된 첫 번째 또는 마지막 항목으로 이동합니다.
`Enter` / `Space`	포커스된 도구를 실행합니다.

접근성

이름이 있는 도구 막대가 하나의 이동 탭 위치를 사용하고 구분선을 포커스 순서에서 제외합니다.

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

Toolbar ​

용법 ​

가로 도구 막대 ​

세로 도구 막대 ​

부모가 관리하는 포커스 ​

API ​

Props ​

ToolbarRootProps ​

ToolbarItemProps ​

ToolbarPartProps ​

슬롯 ​

ToolbarRootSlotProps ​

ToolbarItemSlotProps ​

이벤트 ​

ToolbarRoot ​

기타 타입 ​

ToolbarValueChangeHandler ​

ToolbarInvokeHandler ​

파트 ​

키보드 동작 ​

접근성 ​

용법