SText `<s-text>`

톤, 굵기, 강조 스타일을 지정하는 인라인 텍스트입니다. SText은(는) Shopify Polaris <s-text> web component를 위한 타입이 지정된 Vue 3 wrapper입니다.

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

모범 사례

의미에 맞는 type을 고르세요. 핵심 단어나 구절을 표시할 때는 "strong", 우편 주소나 이메일 주소에는 "address", 같은 내용이 이미 화면에 있을 때 스크린 리더 사용자에게 맥락을 주는 텍스트에는 "redundant"를 선택합니다. 올바른 type을 고르면 보조 기술이 텍스트의 의미를 전달할 수 있습니다.
강조는 아껴서 사용하세요. type="strong"은 문장 전체가 아니라 문장 안의 핵심 단어나 숫자에 적용합니다. 강조가 지나치면 효과가 사라지고 텍스트를 훑어보기 어려워집니다.
인라인 상태에는 tone을 사용하세요. "critical", "success", "caution" 같은 tone은 상태에 주의를 끌지만, 색상에만 메시지를 맡기지 말고 명확한 문구와 함께 사용합니다.
중요한 내용은 흐리게 처리하지 마세요. color="subdued"는 타임스탬프와 메타데이터에 적합하지만, 판매자가 반드시 읽어야 하는 중요한 정보에는 피합니다.

vue

<SParagraph>
  Order shipped to <SText type="address">150 Elgin St, Ottawa</SText>.
  <SText type="strong">Payment pending.</SText>
</SParagraph>

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

예시

Default text

Strong text

Subdued text

Success tone

Critical tone

Tabular numbers: 10 200 3000

vue

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

<template>
  <SText>Default text</SText>
  <SText type="strong">Strong text</SText>
  <SText color="subdued">Subdued text</SText>
  <SText tone="success">Success tone</SText>
  <SText tone="critical">Critical tone</SText>
  <SText fontVariantNumeric="tabular-nums">Tabular numbers: 10 200 3000</SText>
</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"`	텍스트의 글꼴 두께입니다.
`interestFor`	`string`	이 컴포넌트에 대한 관심(예: 호버 및 포커스)에 응답해야 하는 컴포넌트의 ID입니다.
`tone`	`"auto" \| "neutral" \| "info" \| "success" \| "caution" \| "warning" \| "critical"`	텍스트에 적용되는 시맨틱 톤으로, 색상을 바꿔 의미를 전달합니다. - `info`: 정보성 콘텐츠 또는 유용한 팁(파란색). - `success`: 긍정적인 결과 또는 성공 상태(초록색). - `warning`: 잠재적 문제에 대한 중요한 경고(주황색). - `critical`: 긴급한 문제 또는 파괴적인 액션(빨간색). - `auto`: 컨텍스트에 따라 자동으로 결정됩니다. - `neutral`: 특정 의도가 없는 일반 정보(회색). - `caution`: 주의가 필요한 권고 알림(노란색).
`type`	`"strong" \| "address" \| "redundant" \| "generic"`	텍스트 콘텐츠의 시맨틱 유형과 스타일 처리입니다. 텍스트의 다른 표현 속성이 기본 스타일을 재정의합니다. - `strong`: 텍스트를 강한 중요도로 강조하며, 일반적으로 굵게 표시됩니다. - `generic`: 특별한 시맨틱 의미나 스타일이 없는 일반 텍스트. - `address`: 실제 주소나 이메일 주소 같은 연락처 정보로 텍스트를 표시합니다. - `redundant`: 스크린 리더 컨텍스트에서 텍스트가 중복되거나 반복된 정보임을 나타냅니다.

Slots

Slot	설명
`default`	텍스트 컴포넌트 안에 표시되는 텍스트 콘텐츠로, 지정된 텍스트 유형에 맞는 시맨틱 의미와 스타일을 적용합니다.

SText <s-text> ​

모범 사례 ​

예시 ​

Props ​

Slots ​

SText `<s-text>`

모범 사례

예시

Props

Slots