SParagraph <s-paragraph>

本文テキストのブロック。 SParagraph は、Shopify Polaris の <s-paragraph> web component 向けの型付き Vue 3 wrapper です。

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

ベストプラクティス

• 段落は短くする。 専門用語を避けた平易な言葉で、2〜4 文を目安にします。マーチャントは流し読みすることが多いため、長いコンテンツは小さく分けます。
• トーンで意図を伝える。 エラーには tone="critical"、警告には "caution"、確認には "success" が適しています。色だけに頼らず、必ず明確な文言で補います。
• アクセシビリティを考慮して設計する。 目の見えるマーチャントがレイアウトやアイコンから読み取る文脈には、スクリーンリーダー専用のテキスト（accessibilityVisibility="exclusive"）を追加し、トーン付きのテキストが読みやすいコントラストを保っているか確認します。
• 行数の制限は慎重に行う。 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"	段落のフォントサイズです。名前付きの値は、対応する line-height と letter-spacing も適用します。
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	段落コンポーネント内に表示される段落テキストのコンテンツです。関連するテキストのまとまりを適切なスタイルで表示します。