Typography

基础排版

基于 Bootstrap 5 的排版组件套件，提供 TypographyTitle、TypographyText、TypographyParagraph 与 TypographyLink 子组件，支持标题层级、行内样式（mark/code/keyboard/strong/italic/underline/delete）、文本颜色、复制、省略截断（多行与展开）、可编辑以及通过根组件统一设置默认值

Component Demo

Basic usage and examples of the Typography component

基础用法

基础的文本展示组件，支持多种行内样式。

标题层级

一级标题 h1

二级标题 h2

三级标题 h3

四级标题 h4

五级标题 h5

六级标题 h6

行内文本样式

mark 高亮文本

安装依赖：npm install

复制快捷键：ctrl + c

加粗文本 · 斜体文本 · 下划线文本 · 删除线文本

次要文本 · 禁用文本

文本颜色

primary 主色文本success 成功文本danger 危险文本warning 警告文本info 信息文本secondary 次要文本light 浅色文本（深色背景）dark 深色文本

段落

React Bootstrap 是一个基于 Bootstrap 5 的 React 组件库，提供与原生 HTML 一致的排版体验。段落组件默认渲染为 p 元素，自带段落间距。

在段落中还可以自由混用其他行内元素：加粗、高亮与链接。

链接

可复制

点击图标复制这段文本

通过配置对象自定义复制文本、提示文案与回调。

单行省略

这是一段很长的文本，超出一行时会被截断并以省略号结尾。开启 tooltip 后，鼠标悬停在文本上可以查看完整内容。

多行省略与展开

Bootstrap 由 Twitter 的 Mark Otto 和 Jacob Thornton 开发，最初命名为 Twitter Blueprint，后来在 2011 年 8 月作为开源项目发布。它提供了一系列 CSS 类与 JavaScript 插件，用于快速构建响应式、移动优先的网页界面，是全球最流行的前端框架之一。

可编辑

组合与默认值

整组应用 mark 样式

通过 Typography 根组件为内部的 Title、Text、Paragraph、Link 提供统一默认值，子组件仍可通过同名属性覆盖。

所有文本都会继承高亮样式。

自定义元素

使用 div 渲染的标题

使用 label 渲染的文本

使用 blockquote 渲染的段落

API Documentation

Complete API reference for the Typography component

Props

Common Props

属性名	类型	默认值	描述
`as`	`ElementType`	-	渲染的根元素类型，默认值随子组件变化：Title 为 h1–h6（由 level 决定）、Text 为 span、Paragraph 为 p、Link 为 a
`children`	`ReactNode`	-	文本内容，可复制、可编辑与省略截断时会自动提取其中的纯文本
`className`	`string`	-	自定义类名
`code`	`boolean`	`false`	是否以行内代码样式展示（等宽字体、强调色）
`copyable`	`TypographyCopyable`	`false`	是否可复制，配置对象支持自定义复制文本、提示文案与复制回调
`delete`	`boolean`	`false`	是否显示删除线
`disabled`	`boolean`	`false`	是否禁用，文本变灰并显示不可用光标，同时隐藏复制按钮
`editable`	`TypographyEditable`	`false`	是否可编辑，点击文本进入编辑态：Text/Title/Link 渲染为 input，Paragraph 渲染为 textarea，回车（单行）或失焦保存，Esc 取消
`ellipsis`	`TypographyEllipsis`	`false`	文本超出时是否省略截断，配置对象支持行数、展开按钮与提示
`italic`	`boolean`	`false`	是否以斜体展示
`keyboard`	`boolean`	`false`	是否以按键样式展示（复用 Kbd 组件）
`mark`	`boolean`	`false`	是否以高亮样式展示
`muted`	`boolean`	`false`	是否以次要文本样式展示
`strong`	`boolean`	`false`	是否以加粗展示
`type`	`TypographyColor`	-	文本颜色变体，对应 Bootstrap 的 `text-*` 工具类
`underline`	`boolean`	`false`	是否显示下划线
`...rest`	`HTMLAttributes`	-	根元素的所有原生属性（如 `style`、`onClick`、`aria-*` 等）

TypographyTitle

属性名	类型	默认值	描述
`level`	`TypographyTitleLevel`	`1`	标题级别，对应 h1–h6 元素

TypographyLink

属性名	类型	默认值	描述
`href`	`string`	-	链接地址，透传给 a 元素

Type Definitions

TypographyAutoSize

可编辑 textarea 的自动尺寸配置

export interface TypographyAutoSize {
  maxRows?: number;
  minRows?: number;
}

TypographyColor

文本颜色变体类型

export type TypographyColor =
  | 'black'
  | 'body-emphasis'
  | 'body-secondary'
  | 'body-tertiary'
  | 'body'
  | 'danger'
  | 'dark'
  | 'info'
  | 'light'
  | 'muted'
  | 'primary'
  | 'secondary'
  | 'success'
  | 'warning'
  | 'white';

TypographyCommonProps

各子组件共享的基础属性接口

export interface TypographyCommonProps extends HTMLAttributes<HTMLElement> {
  as?: ElementType;
  children?: ReactNode;
  className?: string;
  code?: boolean;
  copyable?: TypographyCopyable;
  delete?: boolean;
  disabled?: boolean;
  editable?: TypographyEditable;
  ellipsis?: TypographyEllipsis;
  italic?: boolean;
  keyboard?: boolean;
  mark?: boolean;
  muted?: boolean;
  strong?: boolean;
  type?: TypographyColor;
  underline?: boolean;
}

TypographyContextValue

Typography 根组件通过 Context 提供的默认值类型

export interface TypographyContextValue {
  code?: boolean;
  copyable?: TypographyCopyable;
  delete?: boolean;
  disabled?: boolean;
  editable?: TypographyEditable;
  ellipsis?: TypographyEllipsis;
  italic?: boolean;
  keyboard?: boolean;
  mark?: boolean;
  muted?: boolean;
  strong?: boolean;
  type?: TypographyColor;
  underline?: boolean;
}

TypographyCopyable

可复制配置类型

export type TypographyCopyable = boolean | TypographyCopyableConfig;

export interface TypographyCopyableConfig {
  onCopy?: (text: string) => void;
  text?: string;
  tooltips?: [string, string];
}

TypographyEditable

可编辑配置类型

export type TypographyEditable = boolean | TypographyEditableConfig;

export interface TypographyEditableConfig {
  autoSize?: boolean | TypographyAutoSize;
  maxLength?: number;
  onChange?: (value: string) => void;
  onEnd?: () => void;
  onStart?: () => void;
  text?: string;
  tooltip?: string;
}

TypographyEllipsis

省略截断配置类型

export type TypographyEllipsis = boolean | TypographyEllipsisConfig;

export interface TypographyEllipsisConfig {
  expandable?: boolean;
  onExpand?: (expanded: boolean) => void;
  rows?: number;
  symbol?: ReactNode | ((expanded: boolean) => ReactNode);
  tooltip?: boolean | string;
}

TypographyLinkProps

链接子组件属性类型

export interface TypographyLinkProps extends TypographyCommonProps {
  href?: string;
  rel?: string;
  target?: string;
}

TypographyParagraphProps

段落子组件属性类型

export type TypographyParagraphProps = TypographyCommonProps;

TypographyProps

Typography 根组件属性接口

export interface TypographyProps {
  children?: ReactNode;
  code?: boolean;
  copyable?: TypographyCopyable;
  delete?: boolean;
  disabled?: boolean;
  editable?: TypographyEditable;
  ellipsis?: TypographyEllipsis;
  italic?: boolean;
  keyboard?: boolean;
  mark?: boolean;
  muted?: boolean;
  strong?: boolean;
  type?: TypographyColor;
  underline?: boolean;
}

TypographyTextProps

文本子组件属性类型

export type TypographyTextProps = TypographyCommonProps;

TypographyTitleLevel

标题级别类型

export type TypographyTitleLevel = 1 | 2 | 3 | 4 | 5 | 6;

TypographyTitleProps

标题子组件属性接口

export interface TypographyTitleProps extends TypographyCommonProps {
  level?: TypographyTitleLevel;
}