SParagraph <s-paragraph>

一段正文文本。 SParagraph 是 Shopify Polaris <s-paragraph> web component 的带类型 Vue 3 wrapper。

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

最佳实践

• 保持段落简短。 每段以两到四句为宜，使用通俗易懂、不含术语的语言。商家往往是快速浏览的，因此请将较长的内容拆分成小段。
• 用色调表明意图。 tone="critical" 适用于错误，"caution" 适用于警告，"success" 适用于确认。始终用清晰的措辞配合颜色，而不是只依赖颜色。
• 为无障碍而设计。 对于视力正常的商家能从布局或图标中获取的上下文，添加仅供屏幕阅读器读取的文字（accessibilityVisibility="exclusive"），并确保带色调的文字有足够的对比度以便阅读。
• 谨慎限制行数。 lineClamp 在卡片或预览等狭小空间中很有用，但绝不能让截断隐藏关键信息。

参阅 Shopify 关于 <s-paragraph> 的最佳实践（英文）以获取完整指南。

示例

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	段落组件中显示的段落文本内容，以合适的样式呈现一段相关文本。