Text - Kumo

Headingtext-lg (16px)

Heading large

text-xl (20px)

Body

text-base (14px)

Body bold

text-base (14px)

Body lg

text-lg (16px)

Body sm

text-sm (13px)

Body xs

text-xs (12px)

Body secondary

text-base (14px)

Monospacetext-sm (13px)

Monospace lgtext-base (14px)

Monospace secondarytext-sm (13px)

Success

text-base (14px)

Error

text-base (14px)

import { Text } from "@cloudflare/kumo";

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-kumo-hairline bg-kumo-base p-4">
        <Text variant="heading">Heading</Text>
        <Text variant="mono-secondary">text-lg (16px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
        <Text variant="heading" size="lg" as="h2">
          Heading large
        </Text>
        <Text variant="mono-secondary">text-xl (20px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
        <Text>Body</Text>
        <Text variant="mono-secondary">text-base (14px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
        <Text bold>Body bold</Text>
        <Text variant="mono-secondary">text-base (14px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
        <Text size="lg">Body lg</Text>
        <Text variant="mono-secondary">text-lg (16px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
        <Text size="sm">Body sm</Text>
        <Text variant="mono-secondary">text-sm (13px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
        <Text size="xs">Body xs</Text>
        <Text variant="mono-secondary">text-xs (12px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
        <Text variant="secondary">Body secondary</Text>
        <Text variant="mono-secondary">text-base (14px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
        <Text variant="mono">Monospace</Text>
        <Text variant="mono-secondary">text-sm (13px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
        <Text variant="mono" size="lg">
          Monospace lg
        </Text>
        <Text variant="mono-secondary">text-base (14px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
        <Text variant="mono-secondary">Monospace secondary</Text>
        <Text variant="mono-secondary">text-sm (13px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
        <Text variant="success">Success</Text>
        <Text variant="mono-secondary">text-base (14px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
        <Text variant="error">Error</Text>
        <Text variant="mono-secondary">text-base (14px)</Text>
      </div>
    </div>
  );
}

安装

桶式导出

import { Text } from "@cloudflare/kumo";

细粒度导入

import { Text } from "@cloudflare/kumo/components/text";

用法

import { Text } from "@cloudflare/kumo";

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 容器内时尤其有用。

This is a long piece of text that will be truncated with an ellipsis when it overflows its container.

import { Text } from "@cloudflare/kumo";

export function TextTruncateDemo() {
  return (
    <div className="w-64 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
      <Text truncate>
        This is a long piece of text that will be truncated with an ellipsis
        when it overflows its container.
      </Text>
    </div>
  );
}

<Text truncate>This is a long piece of text that will be truncated...</Text>

API 参考

Prop	Type	Default	Description
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
bold	`boolean`	-	是否使用粗体字重（仅适用于正文变体）。
truncate	`boolean`	-	是否用省略号截断溢出的文本。添加 `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"`）。
children	`ReactNode`	-	文本内容。