Stepper

진행 상태와 사용 가능 조건을 보여 주며 순서가 있는 작업을 안내합니다.

용법

결제

사용 가능한 결제 단계를 정해진 순서대로 진행합니다.

Step 2 of 4Delivery

Address and shipping method

<!-- Stepper / Checkout -->
<script setup lang="ts">
import { StepperRoot, StepperList, StepperStep, StepperContent, StepperPrevious, StepperNext } from '@sectile/vue/stepper'
import { ref } from 'vue'

const steps = [
  { id: 'account', label: 'Account', detail: 'Contact and sign-in details' },
  { id: 'delivery', label: 'Delivery', detail: 'Address and shipping method' },
  { id: 'payment', label: 'Payment', detail: 'Secure payment information' },
  { id: 'review', label: 'Review', detail: 'Confirm and place the order' },
]
const stepIDs = steps.map(({ id }) => id)
const current = ref('delivery')
const stepLabel = (id: string) => steps.find(step => step.id === id)?.label ?? id

</script>

<template>
  <StepperRoot v-model="current" :items="stepIDs">
    <StepperList>
      <StepperStep v-for="(step, index) in steps" :key="step.id" :value="step.id">
        {{ index + 1 }}. {{ step.label }}
      </StepperStep>
    </StepperList>
    <StepperContent v-for="step in steps" :key="step.id" :value="step.id">
      <strong>{{ step.label }}</strong>
      <p>{{ step.detail }}</p>
      <StepperPrevious>Back</StepperPrevious>
      <StepperNext v-slot="{ targetValue }">
        {{ targetValue === null ? 'Checkout steps complete' : 'Continue to ' + stepLabel(targetValue) }}
      </StepperNext>
    </StepperContent>
  </StepperRoot>
</template>

외부 상태 관리

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

Step 2 of 4Delivery

Address and shipping method

<!-- Stepper / Controlled -->
<script setup lang="ts">
import { StepperRoot, StepperList, StepperStep, StepperContent, StepperPrevious, StepperNext } from '@sectile/vue/stepper'
import { ref } from 'vue'

const steps = [
  { id: 'account', label: 'Account', detail: 'Contact and sign-in details' },
  { id: 'delivery', label: 'Delivery', detail: 'Address and shipping method' },
  { id: 'payment', label: 'Payment', detail: 'Secure payment information' },
  { id: 'review', label: 'Review', detail: 'Confirm and place the order' },
]
const stepIDs = steps.map(({ id }) => id)
const current = ref('delivery')
const stepLabel = (id: string) => steps.find(step => step.id === id)?.label ?? id

</script>

<template>
  <StepperRoot v-model="current" :items="stepIDs">
    <StepperList>
      <StepperStep v-for="(step, index) in steps" :key="step.id" :value="step.id">
        {{ index + 1 }}. {{ step.label }}
      </StepperStep>
    </StepperList>
    <StepperContent v-for="step in steps" :key="step.id" :value="step.id">
      <strong>{{ step.label }}</strong>
      <p>{{ step.detail }}</p>
      <StepperPrevious>Back</StepperPrevious>
      <StepperNext v-slot="{ targetValue }">
        {{ targetValue === null ? 'Checkout steps complete' : 'Continue to ' + stepLabel(targetValue) }}
      </StepperNext>
    </StepperContent>
  </StepperRoot>
</template>

예시

진행 조건

현재 단계의 완료 조건을 충족하면 다음 단계로 이동합니다.

Step 2 of 4Delivery

Address and shipping method

<!-- Stepper / Gated Step -->
<script setup lang="ts">
import { StepperRoot, StepperList, StepperStep, StepperContent, StepperPrevious, StepperNext } from '@sectile/vue/stepper'
import { ref } from 'vue'

const steps = [
  { id: 'account', label: 'Account', detail: 'Contact and sign-in details' },
  { id: 'delivery', label: 'Delivery', detail: 'Address and shipping method' },
  { id: 'payment', label: 'Payment', detail: 'Secure payment information' },
  { id: 'review', label: 'Review', detail: 'Confirm and place the order' },
]
const stepIDs = steps.map(({ id }) => id)
const current = ref('delivery')
const stepLabel = (id: string) => steps.find(step => step.id === id)?.label ?? id

</script>

<template>
  <StepperRoot v-model="current" :items="stepIDs">
    <StepperList>
      <StepperStep v-for="(step, index) in steps" :key="step.id" :value="step.id">
        {{ index + 1 }}. {{ step.label }}
      </StepperStep>
    </StepperList>
    <StepperContent v-for="step in steps" :key="step.id" :value="step.id">
      <strong>{{ step.label }}</strong>
      <p>{{ step.detail }}</p>
      <StepperPrevious>Back</StepperPrevious>
      <StepperNext v-slot="{ targetValue }">
        {{ targetValue === null ? 'Checkout steps complete' : 'Continue to ' + stepLabel(targetValue) }}
      </StepperNext>
    </StepperContent>
  </StepperRoot>
</template>

API

Vue 패키지: @sectile/vue/stepper

컴포넌트

StepperRoot
StepperList
StepperStep
StepperContent
StepperIndicator
StepperPrevious
StepperNext

Props

`StepperRootProps`

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

`StepperActionProps`

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

슬롯

`StepperActionSlotProps`

disabled: 타입boolean
사용자 조작을 막을지 여부입니다.
targetValue: 타입string | null
이 동작이 활성화할 값입니다. 해당 방향의 끝에서는 null입니다.
value: 타입string
이 계약이 노출하는 현재 값입니다.

이벤트

`StepperRoot`

activate: 페이로드string
항목이 활성화될 때 발생합니다.
highlight: 페이로드string | null
강조된 항목이 바뀔 때 발생합니다.
update:modelValue: 페이로드string
컴포넌트가 외부 제어 값의 변경을 요청할 때 발생합니다.

기타 타입

`StepperValueChangeHandler`

type StepperValueChangeHandler = (value: string) => void

`StepperHighlightHandler`

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

`StepperActivateHandler`

type StepperActivateHandler = (value: string) => void

파트

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

파트	선택자	역할	추가 속성
`root`	`[data-part="root"]`	컴포넌트 경계와 내부 파트를 묶습니다.	—
`list`	`[data-part="list"]`	컴포넌트 항목을 탐색 순서대로 묶습니다.	—
`step`	`[data-part="step"]`	순서가 있는 작업 단계 하나입니다.	—
`indicator`	`[data-part="indicator"]`	주요 콘텐츠와 나란히 상태나 위치를 표시합니다.	—
`content`	`[data-part="content"]`	현재 상태에 맞는 컴포넌트 콘텐츠를 담습니다.	—
`previous`	`[data-part="previous"]`	이전의 활성화 가능한 단계를 선택하고 포커스를 옮깁니다.	`data-target-value="<value>"` `data-disabled=""`
`next`	`[data-part="next"]`	다음의 활성화 가능한 단계를 선택하고 포커스를 옮깁니다.	`data-target-value="<value>"` `data-disabled=""`

키보드 동작

키	동작
`Arrow Left` / `Arrow Right`	가로 탭 목록에서 탭 사이를 이동합니다.
`Arrow Up` / `Arrow Down`	세로 탭 목록에서 탭 사이를 이동합니다.
`Home` / `End`	첫 번째 또는 마지막 탭으로 이동합니다.
`Enter` / `Space`	직접 실행 모드에서 포커스된 탭을 엽니다.

접근성

순서 있는 단계 목록이 현재 단계를 노출하고 각 단계 실행 요소를 내용 패널과 연결합니다.

Stepper ​

용법 ​

결제 ​

외부 상태 관리 ​

예시 ​

진행 조건 ​

API ​

Props ​

StepperRootProps ​

StepperActionProps ​

슬롯 ​

StepperActionSlotProps ​

이벤트 ​

StepperRoot ​

기타 타입 ​

StepperValueChangeHandler ​

StepperHighlightHandler ​

StepperActivateHandler ​

파트 ​

키보드 동작 ​

접근성 ​

Stepper

용법

결제

외부 상태 관리

예시

진행 조건

API

Props

`StepperRootProps`

`StepperActionProps`

슬롯

`StepperActionSlotProps`

이벤트

`StepperRoot`

기타 타입

`StepperValueChangeHandler`

`StepperHighlightHandler`

`StepperActivateHandler`

파트

키보드 동작

접근성