文本

就绪

Storybook

Text 组件可以用来以简单的方式应用排版样式，无需额外的 CSS。

用法

何时使用

• 用于在整个产品中一致地显示应用了样式的文本，并为每个页面提供结构。

何时不使用

• 如果文本与用户之间有任何直接交互，应使用更合适的组件，例如 Button、TextLink、Menu 等。

建议

• 标题应按层次结构组织。
• 当标题需要具有另一标题级别的外观，但会影响页面标题层次结构时，请改用 variant 属性来修改其样式。
• 使用字重或斜体进行强调。

不建议

• 不要仅仅为了外观而使用 element 属性，请使用它来组织页面结构。
• 不要使用颜色进行强调，因为颜色与 error、success、disabled 等状态相关联。
• code 变体仅用于代码片段，不得用于其他用途。
• 如果 Text 包含嵌套组件，避免使用 p 作为 element 属性，因为它可能会违反 DOM 嵌套规则。

内容

文本内容应按照 Grafana 写作风格指南 的要求编写。

格式

以下是默认行为，将根据其类型应用。

结构

Text 组件主要由自身组成。有时，Text 组件可以包含另一个 Text 或 TextLink 组件作为子组件。

加载中...

实时编辑器

<Text color="primary">
  If you need more help of how to write in Grafana you can go to our{' '}
  <TextLink href="https://grafana.org.cn/docs/writers-toolkit/" external>
    Writer’s Toolkit
  </TextLink>
  .
</Text>

行为

Text 组件可以被截断。但是，Text 组件的默认渲染元素（未设置 element 属性时）是 <span>。这是一个内联容器，必须有父元素，父元素可能是或不是另一个 Text 组件。因此，截断必须应用于父元素。

1. 如果父元素是 Text 组件：用户只需将 element 属性设置为不同的值，并将 truncate 属性设置为 true。结果，Text 将被截断，但当用户悬停在文本上时，完整的文本将显示在工具提示中。

加载中...

实时编辑器

<Text color="primary" element="p" truncate>
  And Forrest Gump said: <Text italic>Life is like a box of chocolates. You never know what you're gonna get.</Text>
</Text>

2. 如果父元素不是 Text 组件：用户需要为其添加 overflow: hidden、text-overflow: ellipsis 和 whiteSpace: 'nowrap' 样式。在此场景下，用户应使用 Tooltip 包裹此容器，以便当文本被截断时，仍可通过悬停在文本上来查看其内容。

加载中...

实时编辑器

<Tooltip content="This is an example of a span element truncated by its parent container">
  <div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
    <Text color="primary" variant="body">
      {'This is an example of a span element truncated by its parent container.'}
    </Text>
  </div>
</Tooltip>

可访问性

• 每个页面应只有一个 h1 标题。
• 标题应根据其重要性进行组织：h1 具有 级别 1，而 h6 标题具有 级别 6。例如，h1 可用于页面标题，h2 用于章节标题，h3 用于子章节标题。
• 标题的级别排名应该是连续的。h2 不应紧随 h5 之后，但如果 h2 是为了关闭之前的章节，则可以在 h5 之后使用。应尽可能避免跳跃标题级别，因为它可能会造成混淆。

演练场