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" は文全体ではなく、文中の重要な語や数値に適用します。強調が多すぎると効果が薄れ、テキストが読み取りにくくなります。
インラインのステータスにはトーンを使う。 "critical"、"success"、"caution" のようなトーンはステータスに注目を集めますが、色だけにメッセージを担わせず、明確な文言と組み合わせます。
重要なものを目立たなくしない。 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"`	テキストのフォントサイズです。名前付きの値は、対応する line-height と letter-spacing も適用します。
`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