SDivider <s-divider>

콘텐츠를 구분하는 가로선 또는 세로선입니다. SDivider은(는) Shopify Polaris <s-divider> web component를 위한 타입이 지정된 Vue 3 wrapper입니다.

import { SDivider } from 'polaris-vue-elements'

모범 사례

• 정말로 다른 콘텐츠만 구분하세요. 구분선은 명확히 구별되는 섹션 사이에서 제 역할을 합니다. 너무 많으면 인터페이스가 어수선하고 조각나 보이므로, 여백만으로도 콘텐츠를 충분히 묶을 수 있는지 확인합니다.
• 구분의 정도에 맞게 굵기를 조절하세요. 구분선의 두드러짐이 구분의 중요도를 반영하게 합니다. 큰 섹션 구분에는 color="strong"을 쓸 수 있고, 작은 그룹 구분에는 더 옅은 선이나 여백만으로 충분합니다.
• 레이아웃의 방향을 따르세요. direction을 설정해, 세로로 쌓인 항목 사이든 가로로 나란히 놓인 항목 사이든 선이 구분하는 콘텐츠의 흐름을 가로지르게 합니다.
• 먼저 여백을 시도하세요. 레이아웃 컴포넌트의 여백 props가 선보다 콘텐츠를 더 깔끔하게 묶는 경우가 많습니다. 구분선은 내용을 더 분명하게 하려고 추가하는 것이지, 잘 설계된 여백을 대신하는 것이 아닙니다.

전체 가이드는 <s-divider>에 대한 Shopify 모범 사례(영어)를 참고하세요.

예시

Content above the divider.Content below the divider.A stronger divider variant.

<script setup>
import { SDivider, SParagraph } from 'polaris-vue-elements'
</script>

<template>
  <SParagraph>Content above the divider.</SParagraph>
  <SDivider />
  <SParagraph>Content below the divider.</SParagraph>
  <SDivider color="strong" />
  <SParagraph color="subdued">A stronger divider variant.</SParagraph>
</template>

Props

Prop	타입	설명
color	"base" | "strong"	구분선의 시각적 두드러짐입니다. - base: 대부분의 구분에 쓰이는 표준 구분선(기본값) - strong: 주요 섹션 구분을 위한 더 두드러진 구분선
direction	"block" | "inline"	논리 속성을 사용한 구분선의 방향입니다. - inline: 세로로 쌓인 콘텐츠를 구분하는 가로 구분선 - block: 가로로 배열된 콘텐츠를 구분하는 세로 구분선