ant-design/components/typography/index.zh-CN.md
afc163 0c97250db3
style: fix Typography copyable style and update demos (#46748)
* style: fix Typography copyable style and update demos

* chore: update jest snapshot
2024-01-02 21:36:10 +08:00

8.3 KiB
Raw Blame History

category subtitle group title cover coverDark
Components 排版 通用 Typography https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*MLt3R6m9huoAAAAAAAAAAAAADrJ8AQ/original https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAAAAAAAAAAAADrJ8AQ/original

文本的基本格式。

何时使用

  • 当需要展示标题、段落、列表内容时使用,如文章/博客/日志的文本样式。
  • 当需要一列基于文本的基础操作时,如拷贝/省略/可编辑。

代码演示

基本 标题组件 标题与段落 文本与超链接组件 可编辑 可复制 省略号 省略中间 省略号 Debug 后缀 组件 Token

API

通用属性参考:通用属性

Typography.Text

参数 说明 类型 默认值 版本
code 添加代码样式 boolean false
copyable 是否可拷贝,为对象时可进行各种自定义 boolean | copyable false copyable
delete 添加删除线样式 boolean false
disabled 禁用文本 boolean false
editable 是否可编辑,为对象时可对编辑进行控制 boolean | editable false editable
ellipsis 自动溢出省略为对象时不能设置省略行数、是否可展开、onExpand 展开事件。不同于 Typography.ParagraphText 组件自身不带 100% 宽度样式,因而默认情况下初次缩略后宽度便不再变化。如果需要自适应宽度,请手工配置宽度样式 boolean | Omit<ellipsis, 'expandable' | 'rows' | 'onExpand'> false ellipsis
keyboard 添加键盘样式 boolean false 4.3.0
mark 添加标记样式 boolean false
onClick 点击 Text 时的回调 (event) => void -
strong 是否加粗 boolean false
italic 是否斜体 boolean false 4.16.0
type 文本类型 secondary | success | warning | danger - success: 4.6.0
underline 添加下划线样式 boolean false

Typography.Title

参数 说明 类型 默认值 版本
code 添加代码样式 boolean false
copyable 是否可拷贝,为对象时可进行各种自定义 boolean | copyable false copyable
delete 添加删除线样式 boolean false
disabled 禁用文本 boolean false
editable 是否可编辑,为对象时可对编辑进行控制 boolean | editable false editable
ellipsis 自动溢出省略,为对象时可设置省略行数、是否可展开、添加后缀等 boolean | ellipsis false ellipsis
level 重要程度,相当于 h1h2h3h4h5 number: 1, 2, 3, 4, 5 1 5: 4.6.0
mark 添加标记样式 boolean false
onClick 点击 Title 时的回调 (event) => void -
italic 是否斜体 boolean false 4.16.0
type 文本类型 secondary | success | warning | danger - success: 4.6.0
underline 添加下划线样式 boolean false

Typography.Paragraph

参数 说明 类型 默认值 版本
code 添加代码样式 boolean false
copyable 是否可拷贝,为对象时可进行各种自定义 boolean | copyable false copyable
delete 添加删除线样式 boolean false
disabled 禁用文本 boolean false
editable 是否可编辑,为对象时可对编辑进行控制 boolean | editable false editable
ellipsis 自动溢出省略,为对象时可设置省略行数、是否可展开、添加后缀等 boolean | ellipsis false ellipsis
mark 添加标记样式 boolean false
onClick 点击 Paragraph 时的回调 (event) => void -
strong 是否加粗 boolean false
italic 是否斜体 boolean false 4.16.0
type 文本类型 secondary | success | warning | danger - success: 4.6.0
underline 添加下划线样式 boolean false

copyable

{
  text: string,
  onCopy: function(event),
  icon: ReactNode,
  tooltips: false | [ReactNode, ReactNode],
  format: 'text/plain' | 'text/html',
}
参数 说明 类型 默认值 版本
format 剪切板数据的 Mime Type 'text/plain' | 'text/html' - 4.21.0
icon 自定义拷贝图标:[默认图标, 拷贝后的图标] [ReactNode, ReactNode] - 4.6.0
text 拷贝到剪切板里的文本 string -
tooltips 自定义提示文案,为 false 时隐藏文案 [ReactNode, ReactNode] [复制, 复制成功] 4.4.0
onCopy 拷贝成功的回调函数 function -

editable

{
  icon: ReactNode,
  tooltip: boolean | ReactNode,
  editing: boolean,
  maxLength: number,
  autoSize: boolean | { minRows: number, maxRows: number },
  text: string,
  onChange: function(string),
  onCancel: function,
  onStart: function,
  onEnd: function,
  triggerType: ('icon' | 'text')[],
  enterIcon: ReactNode,
}
参数 说明 类型 默认值 版本
autoSize 自动 resize 文本域 boolean | { minRows: number, maxRows: number } - 4.4.0
editing 控制是否是编辑中状态 boolean false
icon 自定义编辑图标 ReactNode <EditOutlined /> 4.6.0
maxLength 编辑中文本域最大长度 number - 4.4.0
tooltip 自定义提示文本,为 false 时关闭 boolean | ReactNode 编辑 4.6.0
text 显式地指定编辑文案,为空时将隐式地使用 children string - 4.24.0
onChange 文本域编辑时触发 function(value: string) -
onCancel 按 ESC 退出编辑状态时触发 function -
onStart 进入编辑中状态时触发 function -
onEnd 按 ENTER 结束编辑状态时触发 function - 4.14.0
triggerType 编辑模式触发器类型,图标、文本或者两者都设置(不设置图标作为触发器时它会隐藏) Array<icon|text> [icon]
enterIcon 在编辑段中自定义“enter”图标传递“null”将删除图标 ReactNode <EnterOutlined /> 4.17.0

ellipsis

{
  rows: number,
  expandable: boolean,
  suffix: string,
  symbol: ReactNode,
  tooltip: boolean | ReactNode | TooltipProps,
  onExpand: function(event),
  onEllipsis: function(ellipsis),
}
参数 说明 类型 默认值 版本
expandable 是否可展开 boolean -
rows 最多显示的行数 number -
suffix 自定义省略内容后缀 string -
symbol 自定义展开描述文案 ReactNode 展开
tooltip 省略时,展示提示信息 boolean | ReactNode | TooltipProps - 4.11.0
onEllipsis 触发省略时的回调 function(ellipsis) - 4.2.0
onExpand 点击展开时的回调 function(event) -

主题变量Design Token

FAQ

react-router 支持自定义渲染组件:

<Link to="/" component={Typography.Link} />

注意: 这并不是和 react-router 的 Link 的执行逻辑等价 参考