SHeading <s-heading>

페이지 섹션의 제목을 나타내는 헤딩입니다. SHeading은(는) Shopify Polaris <s-heading> web component를 위한 타입이 지정된 Vue 3 wrapper입니다.

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

모범 사례

• 모든 주요 섹션에 제목을 붙이세요. 제목은 인터페이스의 개요를 이루어 판매자가 길을 찾고 콘텐츠의 구성을 파악하도록 돕습니다.
• 제목 레벨은 컴포넌트가 정하게 하세요. 컴포넌트는 중첩 깊이에 따라 HTML 레벨(h2, h3, h4)을 지정하므로, 레벨을 직접 설정하지 않아도 스크린 리더가 올바른 문서 구조를 얻습니다.
• 구체적으로 작성하세요. 단순히 "Details"가 아니라 "Product details"나 "Customer details"처럼 섹션이 다루는 내용을 말합니다.
• 줄 수 제한은 꼭 필요할 때만 사용하세요. lineClamp는 카드처럼 좁은 공간에서 긴 제목을 다스리는 데 도움이 되지만, 제목을 잘라내면 판매자에게 필요한 정보가 가려질 수 있습니다.
• 비슷한 제목은 같은 스타일로 표시하세요. 목록의 모든 카드처럼 같은 종류의 콘텐츠에 붙는 제목은 같은 모양이어야 합니다.

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

예시

Default headingRenders as a semantic heading element by default.Presentational headingSame visual style, but stripped from the accessibility tree's heading structure. A long heading that gets truncated to a single line via lineClamp

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

<template>
  <SHeading>Default heading</SHeading>
  <SParagraph>Renders as a semantic heading element by default.</SParagraph>

  <SHeading accessibilityRole="presentation">Presentational heading</SHeading>
  <SParagraph>Same visual style, but stripped from the accessibility tree's heading structure.</SParagraph>

  <SHeading :lineClamp="1" style="max-width: 220px">
    A long heading that gets truncated to a single line via lineClamp
  </SHeading>
</template>

Props

Prop	타입	설명
accessibilityRole	"heading" | "presentation" | "none"	컴포넌트 콘텐츠의 시맨틱 의미입니다. 설정하면 보조 기술이 이 role을 사용해 사용자의 페이지 탐색을 돕습니다. - heading: 보조 기술에 이 요소를 제목으로 식별시킵니다. - none: 제목 요소에서 시맨틱 의미를 제거합니다. - presentation: 제목 요소에서 시맨틱 의미를 제거합니다.
accessibilityVisibility	"visible" | "hidden" | "exclusive"	요소의 표시 여부를 변경합니다. - visible: 요소가 모든 사용자에게 표시됩니다. - hidden: 요소가 접근성 트리에서 제거되지만 화면에는 표시됩니다. - exclusive: 요소가 시각적으로는 숨겨지지만 접근성 트리에는 남아 있습니다.
fontSize	"base" | "auto" | "small" | "large" | "large-100" | "large-200" | "large-300" | "large-400"	제목의 글꼴 크기입니다. 이름이 지정된 값은 해당하는 line-height와 letter-spacing도 함께 적용합니다: - 'small'은 headingXs에 대응 - 'base'는 headingSm에 대응 - 'large' / 'large-100'은 headingMd에 대응 - 'large-200'은 headingLg에 대응 - 'large-300'은 headingXl에 대응 - 'large-400'은 heading2xl에 대응
lineClamp	number	텍스트 콘텐츠를 지정한 줄 수로 잘라냅니다.

Slots

Slot	설명
default	제목 컴포넌트 안에 표시되는 제목 텍스트로, 콘텐츠의 제목이나 섹션 헤더를 제공합니다.