spz-text#

#何时使用

spz-text 通过查询翻译并替换占位符值来渲染国际化文本。支持文本插槽和货币插槽。

#支持布局

• container

#代码演示

#基本国际化文本

<spz-text layout="container" translationid="welcome_message"></spz-text>

#使用文本插槽

如果翻译中包含 {name}，可通过 slot-text-name 提供值：

<spz-text
  layout="container"
  translationid="greeting"
  slot-text-name="World">
</spz-text>

#使用货币插槽

货币插槽会渲染 <spz-currency> 组件以正确格式化货币：

<spz-text
  layout="container"
  translationid="price_label"
  slot-currency-price="29.99">
</spz-text>

#属性

#工作原理

1. 组件从 locale 服务获取区域数据。
2. 使用 sections.{sectionId}.settings.{translationid} 路径查询翻译，其中 sectionId 来自最近的带有 data-section-id 属性的父元素。
3. {name} 形式的占位符会被对应的 slot-text-name 或 slot-currency-name 属性值替换。
4. 货币插槽会包裹在 <spz-currency> 标签中以正确格式化。

#注意事项

• 该组件不暴露自定义 action。
• 该组件不派发自定义事件。
• 渲染完成后组件会添加 i-spzhtml-text CSS 类。