SText <s-text>

支持色调、字重和强调样式的行内文本。 SText 是 Shopify Polaris <s-text> web component 的带类型 Vue 3 wrapper。

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

最佳实践

• 选择语义化的 type。 用 "strong" 标记关键词或短语，用 "address" 表示邮寄地址或电子邮件地址，用 "redundant" 表示当相同内容已显示在屏幕上时为屏幕阅读器用户提供上下文的文字。选择正确的类型能让辅助技术表达出文字的含义。
• 谨慎使用强调。 将 type="strong" 用于句子中的关键词或数字，而不是整个句子；强调过多会失去效果，并让文字更难浏览。
• 用色调表示行内状态。 "critical"、"success" 或 "caution" 等色调能吸引对状态的注意，但请搭配清晰的措辞，而不是让颜色单独传达信息。
• 不要弱化重要内容。 color="subdued" 适合时间戳和元数据，但不要将其用于商家必须阅读的关键信息。

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

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

示例

Default textStrong textSubdued textSuccess toneCritical toneTabular numbers: 10 200 3000

<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	文本组件中显示的文本内容，会根据指定的文本类型应用相应的语义含义和样式。