SParagraph <s-paragraph>

본문 텍스트 블록입니다. SParagraph은(는) Shopify Polaris <s-paragraph> web component를 위한 타입이 지정된 Vue 3 wrapper입니다.

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

모범 사례

• 문단을 짧게 유지하세요. 전문 용어 없이 쉬운 말로 두세 문장에서 네 문장 정도를 목표로 합니다. 판매자는 훑어보는 경향이 있으므로 긴 내용은 작은 단위로 나눕니다.
• tone으로 의도를 나타내세요. tone="critical"은 오류에, "caution"은 경고에, "success"는 확인에 적합합니다. 색상에만 의존하지 말고 항상 명확한 문구로 뒷받침합니다.
• 접근성을 고려해 설계하세요. 시각적으로 보는 판매자가 레이아웃이나 아이콘으로 파악하는 맥락은 스크린 리더 전용 텍스트(accessibilityVisibility="exclusive")로 추가하고, tone이 적용된 텍스트도 읽을 수 있을 만큼 대비가 충분한지 확인합니다.
• 줄 수 제한은 신중하게 사용하세요. lineClamp는 카드나 미리보기처럼 좁은 곳에서 유용하지만, 잘라내기로 중요한 정보가 가려지게 해서는 안 됩니다.

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

예시

Default paragraph text, used for the bulk of body copy.A subdued paragraph, useful for secondary or helper text.A critical paragraph, useful for inline error copy. A long paragraph that demonstrates lineClamp truncating its content after a fixed number of lines instead of wrapping indefinitely down the page.

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

<template>
  <SParagraph>Default paragraph text, used for the bulk of body copy.</SParagraph>
  <SParagraph color="subdued">A subdued paragraph, useful for secondary or helper text.</SParagraph>
  <SParagraph tone="critical">A critical paragraph, useful for inline error copy.</SParagraph>
  <SParagraph :lineClamp="2" style="max-width: 280px">
    A long paragraph that demonstrates lineClamp truncating its content after a fixed
    number of lines instead of wrapping indefinitely down the page.
  </SParagraph>
</template>

Props

Prop	타입	설명
accessibilityVisibility	"visible" | "hidden" | "exclusive"	요소의 표시 여부를 변경합니다. - visible: 요소가 모든 사용자에게 표시됩니다. - hidden: 요소가 접근성 트리에서 제거되지만 화면에는 표시됩니다. - exclusive: 요소가 시각적으로는 숨겨지지만 접근성 트리에는 남아 있습니다.
color	"subdued" | "base"	색상의 강도를 더 강하거나 약하게 조정합니다.
dir	"auto" | "ltr" | "rtl"	요소 텍스트의 방향을 나타냅니다. - ltr: 왼쪽에서 오른쪽으로 쓰는 언어(예: 영어) - rtl: 오른쪽에서 왼쪽으로 쓰는 언어(예: 아랍어) - auto: 사용자 에이전트가 콘텐츠를 기반으로 방향을 결정합니다 - '': 부모 요소로부터 방향을 상속합니다(속성을 설정하지 않은 것과 같음)
fontSize	"base" | "auto" | "small-200" | "small-100" | "small" | "large" | "large-100"	단락의 글꼴 크기입니다. 이름이 있는 값은 그에 맞는 줄 높이와 자간도 함께 적용합니다.
fontVariantNumeric	"auto" | "normal" | "tabular-nums"	글꼴의 숫자 속성을 설정합니다.
fontWeight	"base" | "auto" | "medium" | "semibold" | "bold"	단락의 글꼴 두께입니다.
lineClamp	number	텍스트 콘텐츠를 지정한 줄 수로 잘라냅니다.
tone	"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"	단락 텍스트에 적용되는 시맨틱 톤으로, 색상을 바꿔 의미를 전달합니다. - info: 정보성 콘텐츠 또는 유용한 팁(파란색). - success: 긍정적인 결과 또는 성공 상태(초록색). - warning: 잠재적 문제에 대한 중요한 경고(주황색). - critical: 긴급한 문제 또는 파괴적인 액션(빨간색). - caution: 주의가 필요한 권고 알림(노란색).

Slots

Slot	설명
default	단락 컴포넌트 안에 표시되는 단락 텍스트 콘텐츠로, 관련 텍스트 블록을 적절한 스타일로 표시합니다.