SSection `<s-section>`

관련 콘텐츠를 묶으며, 제목, 부제목, 작업을 선택적으로 포함할 수 있습니다. SSection은(는) Shopify Polaris <s-section> web component를 위한 타입이 지정된 Vue 3 wrapper입니다.

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

모범 사례

함께 속한 콘텐츠를 묶으세요. 관련 정보든 관련 컨트롤이든 각 섹션에 하나의 일관된 역할을 부여합니다. 그러면 섹션이 시각적 컨테이너로 동작하고 페이지 구조에 의미를 더합니다.
설명적인 제목을 작성하세요. 판매자는 heading을 훑어보며 길을 찾으므로, 일반적인 제목에 기대지 말고 안에 무엇이 있는지 밝힙니다.
콘텐츠에 필요한 만큼만 중첩하세요. 중첩된 섹션은 모양이 아니라 제목 위계와 페이지 개요에 영향을 줍니다. 최대 두세 단계로 유지하고, 추가 구조가 콘텐츠를 더 명확하게 할 때만 중첩합니다.
콘텐츠가 가장자리까지 채워져야 한다면 padding을 없애세요. 섹션을 가득 채워야 하는 표나 이미지 같은 콘텐츠에는 padding="none"을 사용하고, 안쪽 콘텐츠가 자체적으로 충분한 여백을 유지하는지 확인합니다.
제목만으로 부족하면 accessibilityLabel을 추가하세요. 화면에 보이는 제목만으로는 스크린 리더 사용자에게 섹션의 목적이 분명하지 않을 때, 빠진 맥락을 채워 주는 레이블을 지정합니다.
알맞은 헤더 슬롯을 고르세요. tooltip이나 개수처럼 제목 자체를 꾸미는 세부 정보는 accessory에 넣습니다. 상태 배지처럼 섹션 전체에 관한 정보는 supplemental에 넣습니다. 버튼이나 메뉴 같은 액션은 supplemental에 넣을 수 없으므로 accessory에 둡니다.

vue

<SSection heading="Products" padding="none">
  <STable>
    <!-- … -->
  </STable>
</SSection>

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

예시

123 Main Street, Ottawa, ON, Canada

Delivery instructions: leave at front door.

vue

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

<template>
  <SSection heading="Shipping address">
    <SParagraph>123 Main Street, Ottawa, ON, Canada</SParagraph>
    <SDivider />
    <SParagraph color="subdued">Delivery instructions: leave at front door.</SParagraph>
  </SSection>
</template>

Props

Prop	타입	설명
`accessibilityLabel`	`string`	스크린 리더 같은 보조 기술을 위해 컴포넌트의 목적이나 내용을 설명하는 레이블입니다. 보이는 콘텐츠만으로는 컴포넌트의 목적이 명확하게 전달되지 않을 때 추가 맥락을 제공하는 데 사용합니다.
`heading`	`string`	섹션 상단에 표시되는 제목 텍스트입니다. 섹션 콘텐츠의 제목을 제공하며, 올바른 문서 구조를 유지하도록 중첩 깊이에 따라 적절한 시맨틱 제목 수준(h2, h3, h4)을 자동으로 사용합니다.
`padding`	`"base" \| "none"`	요소 콘텐츠의 모든 가장자리에 적용되는 패딩입니다. - `base`: 요소에 적합한 패딩을 적용합니다. 특정 컨텍스트에서 그것이 올바른 디자인 결정이라면 패딩이 없을 수도 있습니다. - `none`: 요소 콘텐츠의 모든 패딩을 제거합니다. 섹션 안의 요소가 섹션 가장자리까지 확장되어야 할 때 유용합니다. 예를 들어 전체 너비 이미지가 있습니다. 이 경우 나머지 콘텐츠에 원하는 패딩을 되돌리려면 패딩이 'base'인 `s-box`를 사용하세요. `heading`과 헤더 액션은 패딩을 유지하므로 `none`과 함께 사용할 수 있습니다.
`subheading`	`string`	제목을 보충 설명하는 보조 텍스트로, 제목 아래에 차분한 스타일로 렌더링됩니다. 제목이 아닙니다. 문서 개요에 항목을 추가하지 않고, 섹션 자식 요소의 제목 수준을 바꾸지 않으며, 제목의 일부로 읽히지도 않습니다. 이 섹션을 다른 섹션과 구별하는 내용은 `heading`에 두세요. 제목으로 탐색하는 사용자가 듣는 것이 바로 이 값이기 때문입니다.

Slots

Slot	설명
`default`	섹션 컴포넌트 안에 표시되는 콘텐츠입니다. 관련 요소를 선택적 제목과 함께 하나의 논리적 단위로 묶습니다.
`accessory`	제목을 한정하는 추가 맥락 정보로, 제목 텍스트 옆에 인라인으로 렌더링됩니다. Badge, Icon, Button, Menu, Text, Avatar, Thumbnail, Tooltip 요소만 받습니다. Text는 `tone`, `fontSize`, `fontWeight`가 `auto`여야 하고, Icon, Avatar, Thumbnail은 `size="base"`, Badge는 `size="base"`와 `color="base"`, Button은 `inlineSize="auto"`를 사용해야 합니다. 보조 요소의 `interestFor`가 가리키는 Tooltip은 그 옆에 이 슬롯으로 넣을 수 있습니다.
`graphic`	제목을 보강하는 장식용 시각 요소로, 제목 앞에 렌더링됩니다. `size`가 `base`인 Icon 하나, 또는 `size`가 `large`인 아이콘 전용 Badge(`icon`을 설정하고 텍스트 콘텐츠 없음) 하나를 받습니다. 섹션은 제목으로 식별되므로 이 콘텐츠는 보조 기술에서 읽히지 않으며, 섹션에 `heading`이 없으면 아예 렌더링되지 않습니다.
`primary-action`	이 컨텍스트에서 사용할 수 있는 가장 중요한 주 액션 버튼 또는 링크입니다. 명확한 위계를 세우기 위해 일반적으로 보조 액션보다 시각적으로 더 두드러지게 표시됩니다.
`secondary-actions`	대체 액션이나 보조 액션을 제공하는 추가 액션 버튼 또는 링크입니다. 기본 액션보다 시각적으로 덜 강조됩니다. 액션 하나와 그 Menu를 여는 아이콘 전용 활성화 버튼을 담은 ButtonGroup은 셰브론 활성화 버튼이 있는 하나의 세그먼트 그룹으로 렌더링됩니다. 이 그룹에는 `accessibilityLabel`이 필요하며, 텍스트가 있는 Button 하나와 그 뒤에 텍스트 없이 `accessibilityLabel`과 Menu를 여는 `commandFor`를 가진 Button 하나를 정확히 담아야 합니다. 두 버튼 모두 `variant`는 `secondary` 또는 `auto`여야 합니다.
`supplemental`	제목을 한정하는 대신 섹션 전체를 설명하는 상태나 메타데이터로, 헤더의 inline-end 쪽 액션 앞에 렌더링됩니다. 액션이 아닙니다. Badge, Avatar, Text, Icon, Thumbnail, Tooltip 요소만 받으며, `accessory`와 동일한 prop 제약이 적용됩니다.

SSection <s-section> ​

모범 사례 ​

예시 ​

Props ​

Slots ​

SSection `<s-section>`

모범 사례

예시

Props

Slots