Text 文本
@lark-ui/core

Text 文本

提供多种标题和正文样式的排版组件。

标题text-lg (16px)

大号标题

text-xl (20px)

正文

text-base (14px)

加粗正文

text-base (14px)

大号正文

text-lg (16px)

小号正文

text-sm (13px)

极小正文

text-xs (12px)

次要正文

text-base (14px)
等宽字体text-sm (13px)
大号等宽字体text-base (14px)
次要等宽字体text-sm (13px)

成功

text-base (14px)

错误

text-base (14px)
import { Text } from "@lark-ui/core";

export function TextVariantsDemo() {
  return (
    <div className="grid w-full grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-lark-hairline bg-lark-base p-4">
        <Text variant="heading">标题</Text>
        <Text variant="mono-secondary">text-lg (16px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-lark-hairline bg-lark-base p-4">
        <Text variant="heading" size="lg" as="h2">
          大号标题
        </Text>
        <Text variant="mono-secondary">text-xl (20px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-lark-hairline bg-lark-base p-4">
        <Text>正文</Text>
        <Text variant="mono-secondary">text-base (14px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-lark-hairline bg-lark-base p-4">
        <Text bold>加粗正文</Text>
        <Text variant="mono-secondary">text-base (14px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-lark-hairline bg-lark-base p-4">
        <Text size="lg">大号正文</Text>
        <Text variant="mono-secondary">text-lg (16px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-lark-hairline bg-lark-base p-4">
        <Text size="sm">小号正文</Text>
        <Text variant="mono-secondary">text-sm (13px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-lark-hairline bg-lark-base p-4">
        <Text size="xs">极小正文</Text>
        <Text variant="mono-secondary">text-xs (12px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-lark-hairline bg-lark-base p-4">
        <Text variant="secondary">次要正文</Text>
        <Text variant="mono-secondary">text-base (14px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-lark-hairline bg-lark-base p-4">
        <Text variant="mono">等宽字体</Text>
        <Text variant="mono-secondary">text-sm (13px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-lark-hairline bg-lark-base p-4">
        <Text variant="mono" size="lg">
          大号等宽字体
        </Text>
        <Text variant="mono-secondary">text-base (14px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-lark-hairline bg-lark-base p-4">
        <Text variant="mono-secondary">次要等宽字体</Text>
        <Text variant="mono-secondary">text-sm (13px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-lark-hairline bg-lark-base p-4">
        <Text variant="success">成功</Text>
        <Text variant="mono-secondary">text-base (14px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-lark-hairline bg-lark-base p-4">
        <Text variant="error">错误</Text>
        <Text variant="mono-secondary">text-base (14px)</Text>
      </div>
    </div>
  );
}

安装

统一导出

import { Text } from "@lark-ui/core";

按需导出

import { Text } from "@lark-ui/core/components/text";

用法

import { Text } from "@lark-ui/core";

export default function Example() {
  return <Text>Your content here</Text>;
}

语义化 HTML

variant 属性只控制视觉样式，不会决定最终渲染的 HTML 元素。 标题类变体必须提供 as 属性，否则真实的章节标题会悄悄从文档大纲中消失。 正文和等宽类变体有合理的默认值（分别是 <p> 和 <span>），也可以选择性地指定 as。

// Heading variants REQUIRE `as` — TypeScript will flag usages missing it
<Text variant="heading1">Page Title</Text> // Doesn't compile

// Real section headings (contribute to the document outline)
<Text variant="heading1" as="h1">Page Title</Text>
<Text variant="heading2" as="h2">Section Title</Text>

// Decorative heading-styled text that is NOT a section heading
<Text variant="heading1" as="span">Big bold card label</Text>

// Visually one size, semantically another
<Text variant="heading1" as="h3">Visually large, but semantically h3</Text>

as 属性接受："h1" 到 "h6"、"p" 和 "span"。 正文类变体默认为 "p"，等宽类变体默认为 "span"， 标题类变体没有默认值——你必须显式指定。

限制

bold 和 size 属性有意限制为仅在 base、secondary、success 和 error 这几种文本变体上使用。

<Text size="sm" bold>Body</Text>
<Text variant="secondary" bold>Body secondary</Text>
<Text variant="success" size="lg">Success</Text>
<Text variant="error">Error</Text>

等宽类变体（mono 和 mono-secondary）只能将 size 设为 lg， 且不能使用 bold 属性：

<Text variant="mono">Monospace</Text>
<Text variant="mono" size="lg">Monospace</Text>
<Text variant="mono" bold>Monospace</Text> // Doesn't compile

标题类变体（即 heading1、heading2 和 heading3）完全不能使用 这些属性：

<Text variant="heading1" bold>
  Heading 1
</Text> // Doesn't compile

截断

使用 truncate 属性可以用省略号截断溢出的文本。它会添加 truncate min-w-0 类，当 Text 位于 flex 或 grid 容器中时非常有用。

这是一段较长的文本，当它超出容器时会被省略号截断。

import { Text } from "@lark-ui/core";

export function TextTruncateDemo() {
  return (
    <div className="w-64 rounded-lg border border-lark-hairline bg-lark-base p-4">
      <Text truncate>这是一段较长的文本，当它超出容器时会被省略号截断。</Text>
    </div>
  );
}
<Text truncate>This is a long piece of text that will be truncated...</Text>

API 参考

属性类型默认值说明
variant"heading" | "heading1" | "heading2" | "heading3" | "body" | "secondary" | "success" | "error" | "mono" | "mono-secondary""body"文字样式变体。决定颜色、字体和字重。 - `"heading"` — 标题文字（默认 16px，`size="lg"` 时为 20px；半粗） - `"heading1"` — 已废弃，请使用 `"heading"`（30px，半粗） - `"heading2"` — 已废弃，请使用 `"heading"`（24px，半粗） - `"heading3"` — 已废弃，请使用 `"heading"`（16px，半粗） - `"body"` — 默认正文 - `"secondary"` — 次要信息的弱化文字 - `"success"` — 成功状态文字 - `"error"` — 错误状态文字 - `"mono"` — 代码等宽文字 - `"mono-secondary"` — 弱化的等宽文字
size"xs" | "sm" | "base" | "lg""base"文字尺寸。可选值取决于变体： - `"heading"` — 省略时为 16px，设为 `"lg"` 时为 20px - 正文变体 — `"xs"`（12px）、`"sm"`（13px）、`"base"`（14px）或 `"lg"`（16px） - 等宽变体 — 省略时为 13px，设为 `"lg"` 时为 14px
boldboolean-是否使用粗体字重（仅适用于正文变体）。
truncateboolean-是否用省略号截断溢出的文字。会添加 `truncate min-w-0` 类名。
as"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "label" | "dt" | "dd" | "li" | "figcaption" | "legend" | "pre" | "code" | "em" | "strong" | "small" | "abbr" | "time"-要渲染的 HTML 元素。支持标题（`"h1"`–`"h6"`）、块级文字（`"p"`、`"pre"`）、行内文字（`"span"`、`"code"`、`"em"`、`"strong"`、`"small"`、`"abbr"`、`"time"`）、表单相关（`"label"`、`"legend"`）、列表/定义（`"dt"`、`"dd"`、`"li"`），以及 `"figcaption"`。 - `"heading"` 变体**可选**（默认为 `"span"`）。请传入与该文字在文档大纲中层级相对应的标题元素。 - 已废弃的标题变体（`"heading1"`、`"heading2"`、`"heading3"`）**必填**。 - 正文变体（默认为 `"p"`）和等宽变体（默认为 `"span"`）**可选**。
childrenReactNode-文字内容。