文本
排版有助于建立层次结构，并通过创建清晰的视觉模式来传达重要内容。
α
这个组件正在开发中。在Polaris的非主要版本中可能会对其进行突破性的更改。请谨慎使用。
用于在页面上创建各种层次结构。
进口{文本，堆栈}从“@shopify /北极星”；进口反应从“反应”；函数TextExample（）{返回（<堆栈垂直><文本变体＝“heading4xl”作为＝“标题”>欧宝体育官网入口首页网上商店仪表盘</文本><文本变体＝“heading3xl”作为＝“氢气”>欧宝体育官网入口首页网上商店仪表盘</文本><文本变体＝“heading2xl”作为＝“h3”>欧宝体育官网入口首页网上商店仪表盘</文本><文本变体＝“headingXl”作为＝“h4”>欧宝体育官网入口首页网上商店仪表盘</文本><文本变体＝“headingLg”作为＝“h5”>欧宝体育官网入口首页网上商店仪表盘</文本><文本变体＝“headingMd”作为＝“编辑”>欧宝体育官网入口首页网上商店仪表盘</文本><文本变体＝“headingSm”作为＝“编辑”>欧宝体育官网入口首页网上商店仪表盘</文本><文本变体＝“headingXs”作为＝“编辑”>欧宝体育官网入口首页网上商店仪表盘</文本></堆栈>）；}道具
想让这个功能变得更好吗?请分享你的反馈．
接口
TextProps
- 对齐？ “OB欧宝娱乐APP开始”|“中心”|“结束”|“证明”
-
调整文本的水平对齐方式。
- 作为 “标题”|“氢气”|“h3”|h4的|“h5”|“编辑”|“p”|“跨越”
-
元素类型。
- 孩子们 ReactNode
-
显示的文本。
- 颜色？ “成功”|“关键”|“警告”|“低调”
-
调整文字的颜色。
- fontWeight？ “普通”|“媒介”|“半黑体的”|“大胆”
-
调整文字的粗细。
- 截断？ 布尔
-
用省略号截断文本溢出。
- 变体 “headingXs”|“headingSm”|“headingMd”|“headingLg”|“headingXl”|“heading2xl”|“heading3xl”|“heading4xl”|“bodySm”|“bodyMd”|“bodyLg”
-
文本的排版样式。
- visuallyHidden？ 布尔
-
在视觉上隐藏文本。
以前类型组件的映射
这些都是现有文本样式组件的建议替代品，但最终最好的替代品应该根据使用的上下文进行评估。的文本组件还需要通过作为道具。
DisplayText
小
例子
-<DisplayText大小＝“小”>销售这一年</DisplayText>+<文本变体＝“headingLg”作为＝“p”>销售这一年</文本>
媒介
例子
-<DisplayText大小＝“媒介”>销售这一年</DisplayText>+<文本变体＝“headingXl”作为＝“p”>销售这一年</文本>
大
例子
-<DisplayText大小＝“大”>销售这一年</DisplayText>+<文本变体＝“heading2xl”作为＝“p”>销售这一年</文本>
超大
例子
-<DisplayText大小＝有没有这种款式特大号””>销售这一年</DisplayText>+<文本变体＝“heading4xl”作为＝“p”>销售这一年</文本>
标题
例子
-<标题>欧宝体育官网入口首页网上商店仪表盘</标题>+<文本变体＝“headingMd”作为＝“氢气”>欧宝体育官网入口首页网上商店仪表盘</文本>
副标题
例子
-<副标题>账户</副标题>+<文本变体＝“headingXs”作为＝“h3”>账户</文本>
标题
例子
-<标题>收到4月21，2017</标题>+<文本变体＝“bodySm”作为＝“p”>收到4月21，2017</文本>
TextStyle
柔和
例子
-<TextStyle变异＝“低调”>未列出供应商</TextStyle>+<文本变体＝“bodyMd”作为＝“跨越”颜色＝“低调”>未列出供应商</文本>
强大的
例子
-<TextStyle变异＝“强”>未列出供应商</TextStyle>+<文本变体＝“bodyMd”作为＝“跨越”fontWeight＝“半黑体的”>未列出供应商</文本>
积极的
例子
-<TextStyle变异＝“积极的”>未列出供应商</TextStyle>+<文本变体＝“bodyMd”作为＝“跨越”颜色＝“成功”>未列出供应商</文本>
负
例子
-<TextStyle变异＝“负面”>未列出供应商</TextStyle>+<文本变体＝“bodyMd”作为＝“跨越”颜色＝“关键”>未列出供应商</文本>
警告
例子
-<TextStyle变异＝“警告”>未列出供应商</TextStyle>+<文本变体＝“bodyMd”作为＝“跨越”颜色＝“警告”>未列出供应商</文本>
代码
例子
-<TextStyle变异＝“代码”>未列出供应商</TextStyle>+<文本变体＝“bodyMd”作为＝“跨越”><InlineCode>未列出供应商</InlineCode></文本>
VisuallyHidden
例子
-<VisuallyHidden>-<标题>标题和描述</标题>-</VisuallyHidden>+<文本视觉上隐藏的变体＝“bodySm”作为＝“氢气”>标题和描述</文本>