Text 正文

以明确的语义元素、尺寸和语气呈现正文内容。

Beta

示例

直接操作示例,查看组件在具体任务中的状态与反馈。

语义元素、字号与语气可以独立选择;长内容在窄容器中保持自然换行。
正文尺寸

辅助说明适合较低强调度,但仍需保持可读对比度。

Monkeys Design 的公开目录记录成熟度、真实限制和可复现示例,帮助团队在采用前做出判断。

重要摘要可以提升字号,但不应替代语义标题。

行内与容器文本
当前状态:已通过基础证据检查
字号用于建立阅读节奏,语义元素仍由 as 独立决定。
字号梯度

xs · 公开组件说明

sm · 公开组件说明

md · 公开组件说明

lg · 公开组件说明

xl · 公开组件说明

文字语气辅助表达强调和状态,但文案本身仍须可理解。
语气对比

默认正文

辅助说明

校验通过

等待确认

执行失败

使用建议

先选择语义元素

正文段落使用 p,局部行内内容使用 span,只有确实需要容器语义时才使用 div。

尺寸跟随阅读层级

常规正文保持 md,辅助信息可用 sm;较大字号用于摘要,不应代替 Heading。

语气仍需文字支撑

tone 用于辅助强调成功、警告或次要信息,正文措辞仍需独立表达含义。

引入方式

从已验证的公开子路径导入组件;全局样式接入方式见安装指南。

import { BaseText } from '@inf-monkeys-tech/monkeys-design/components/base';

当前限制

  • Text 只提供基础排版语义,不负责截断策略、富文本解析或 Markdown 渲染;内容结构和长度控制由宿主负责。
  • Automated axe checks and deterministic browser visual evidence are pending T17/T23.
export interface BaseTextProps
  extends Omit<
    HTMLAttributes<HTMLElement>,
    'children' | 'className' | 'style'
  > {
  as?: 'div' | 'p' | 'span';
  children?: ReactNode;
  size?: BaseTypographySize;
  tone?: BaseTypographyTone;
  appearance?: BaseAppearance;
  className?: string;
  classNames?: BaseTextClassNames;
  style?: CSSProperties;
}
属性说明类型默认值
as用于渲染组件根节点的 HTML 元素类型。'div' | 'p' | 'span''p'
children在 BaseText 内渲染的子内容;支持渲染函数时以对应的 Props 类型为准。ReactNode
size组件使用的预设尺寸。BaseTypographySize'md'
tone组件使用的语义色调。BaseTypographyTone'default'
appearance覆盖组件使用的外观令牌或局部样式配置。BaseAppearance
className追加到组件根元素的 CSS 类名。string
classNames按组件公开的结构插槽分别追加 CSS 类名。BaseTextClassNames
style追加到组件根元素的内联样式。CSSProperties