Grid
2차원 칸을 이동하고 값을 선택하거나 편집 상태로 들어갑니다.
용법
선택 가능
격자 사이를 이동하고 현재 칸을 선택합니다.
격자 사이를 이동하고 현재 칸을 선택합니다.
<!-- Grid / Selectable -->
<script setup lang="ts">
import { GridRoot, GridRow, GridCell } from '@sectile/vue/grid'
const rows = [['name', 'status'], ['Sectile', 'Ready']]
</script>
<template>
<GridRoot :rows="rows">
<GridRow v-for="row in rows" :key="row[0]">
<GridCell v-for="cell in row" :key="cell" :value="cell">{{ cell }}</GridCell>
</GridRow>
</GridRoot>
</template>비활성 항목 끝에서 처음으로 이동
격자 끝에서도 활성 칸을 따라 이동을 이어 갑니다.
격자 끝에서도 활성 칸을 따라 이동을 이어 갑니다.
<!-- Grid / Disabled Wrap -->
<script setup lang="ts">
import { GridRoot, GridRow, GridCell } from '@sectile/vue/grid'
const rows = [['name', 'status'], ['Sectile', 'Ready']]
</script>
<template>
<GridRoot :rows="rows">
<GridRow v-for="row in rows" :key="row[0]">
<GridCell v-for="cell in row" :key="cell" :value="cell">{{ cell }}</GridCell>
</GridRow>
</GridRoot>
</template>편집 가능
격자 이동을 유지하면서 현재 칸의 값을 편집합니다.
격자 이동을 유지하면서 현재 칸의 값을 편집합니다.
<!-- Grid / Editable -->
<script setup lang="ts">
import { GridRoot, GridRow, GridCell } from '@sectile/vue/grid'
const rows = [['name', 'status'], ['Sectile', 'Ready']]
</script>
<template>
<GridRoot :rows="rows">
<GridRow v-for="row in rows" :key="row[0]">
<GridCell v-for="cell in row" :key="cell" :value="cell">{{ cell }}</GridCell>
</GridRow>
</GridRoot>
</template>외부 상태 관리
현재 값은 부모가 관리하고, 허용된 변경을 컴포넌트에 다시 전달합니다.
현재 값은 부모가 관리하고, 허용된 변경을 컴포넌트에 다시 전달합니다.
<!-- Grid / Controlled -->
<script setup lang="ts">
import { GridRoot, GridRow, GridCell } from '@sectile/vue/grid'
const rows = [['name', 'status'], ['Sectile', 'Ready']]
</script>
<template>
<GridRoot :rows="rows">
<GridRow v-for="row in rows" :key="row[0]">
<GridCell v-for="cell in row" :key="cell" :value="cell">{{ cell }}</GridCell>
</GridRow>
</GridRoot>
</template>API
Vue 패키지: @sectile/vue/grid
GridRootGridRowGridCell
Props
GridRootProps
as이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.
defaultEditMode컴포넌트가 관리하는 초기 편집 상태입니다.
defaultHighlightedValue컴포넌트가 관리하는 처음 강조 값입니다.
defaultValue컴포넌트가 값을 관리할 때 사용할 초깃값입니다.
disabled사용자 조작을 막을지 여부입니다.
disabledItems포커스와 선택 대상에서 제외할 항목 값입니다.
editMode외부에서 제어하는 편집 상태입니다.
highlightedValue키보드 조작 대상으로 강조된 현재 값입니다.
label보조 기술이 읽는 컨트롤 이름입니다.
modelValue부모가 상태를 관리할 때 사용할 현재 값입니다.
policies검증, 이동, 선택 동작을 조정하는 정책입니다.
readonly값 확인만 허용하는 읽기 전용 상태 여부입니다.
rows컴포넌트가 관리할 2차원 항목 구조입니다.
GridPartProps
as이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.
슬롯
GridRootSlotProps
disabled사용자 조작을 막을지 여부입니다.
editMode현재 편집 상태입니다.
highlightedValue조작 대상으로 강조된 현재 값입니다.
readonly값 확인만 허용하는 읽기 전용 상태 여부입니다.
value이 계약이 노출하는 현재 값입니다.
GridCellSlotProps
disabled사용자 조작을 막을지 여부입니다.
editMode현재 편집 상태입니다.
highlighted조작 대상으로 강조된 항목인지 여부입니다.
highlightedValue조작 대상으로 강조된 현재 값입니다.
readonly값 확인만 허용하는 읽기 전용 상태 여부입니다.
selected현재 선택된 항목인지 여부입니다.
value이 계약이 노출하는 현재 값입니다.
이벤트
GridRoot
editCancel편집을 취소하고 기존 값을 유지할 때 발생합니다.
editCommit편집한 셀 값을 확정할 때 발생합니다.
editStart셀이 편집 상태로 들어갈 때 발생합니다.
update:editMode새 편집 상태를 요청할 때 발생합니다.
update:highlightedValue새 강조 값을 요청할 때 발생합니다.
update:modelValue컴포넌트가 외부 제어 값의 변경을 요청할 때 발생합니다.
기타 타입
GridValueChangeHandler
type GridValueChangeHandler = (value: string | null) => voidGridHighlightedValueChangeHandler
type GridHighlightedValueChangeHandler = (value: string | null) => voidGridEditModeChangeHandler
type GridEditModeChangeHandler = (value: GridEditMode) => voidGridEditStartHandler
type GridEditStartHandler = (value: string) => voidGridEditCommitHandler
type GridEditCommitHandler = (value: string) => voidGridEditCancelHandler
type GridEditCancelHandler = (value: string) => voidGridEditMode
type GridEditMode = 'navigation' | 'editing'GridPolicies
| 이름 | 타입 | 필수 |
|---|---|---|
eligible | (id: ID) => boolean | — |
boundary | AxisBoundaryPolicy | — |
maxScan | number | — |
파트
공통 범위: [data-scope="grid"]. 컴포넌트 내부로 스타일을 제한할 때 파트 선택자와 함께 사용합니다.
| 파트 | 선택자 | 역할 | 추가 속성 |
|---|---|---|---|
root | [data-part="root"] | 컴포넌트 경계와 내부 파트를 묶습니다. | — |
row | [data-part="row"] | 같은 그리드 행에 속한 셀을 묶습니다. | — |
cell | [data-part="cell"] | 탐색하거나 선택할 수 있는 그리드 값 하나입니다. | — |
키보드 동작
| 키 | 동작 |
|---|---|
| Arrow keys | 격자 칸 사이를 이동합니다. |
| Space | 현재 칸이나 행을 선택합니다. |
| Enter / F2 | 현재 칸이 편집을 지원하면 편집 모드로 들어갑니다. |
| Escape | 현재 편집을 취소합니다. |
접근성
이름이 있는 격자가 행과 열 수를 전달하고 각 칸은 위치·선택·비활성 상태를 노출합니다.
관련 WAI-ARIA 패턴에서 호스트 접근성 규칙을 확인할 수 있습니다.