示例
直接操作示例,查看组件在具体任务中的状态与反馈。
正文尺寸
辅助说明适合较低强调度,但仍需保持可读对比度。
Monkeys Design 的公开目录记录成熟度、真实限制和可复现示例,帮助团队在采用前做出判断。
重要摘要可以提升字号,但不应替代语义标题。
行内与容器文本
当前状态:已通过基础证据检查
字号梯度
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.
API
查看组件源码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 | — |