Typography
Typography
Basic text writing, including headings, body text, lists, and more.
Importimport{ Typography }from"antd"; |
Sourcecomponents/typography |
- Components Overview
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
Importimport{ Typography }from"antd"; |
Sourcecomponents/typography |
Common props ref：Common props
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| code | Code style | boolean | false | |
| copyable | Whether to be copyable, customize it via setting an object | boolean | copyable | false | copyable |
| delete | Deleted line style | boolean | false | |
| disabled | Disabled content | boolean | false | |
| editable | If editable. Can control edit state when is object | boolean | editable | false | editable |
| ellipsis | Display ellipsis when text overflows, can't configure expandable、rows and onExpand by using object. Diff with Typography.Paragraph, Text do not have 100% width style which means it will fix width on the first ellipsis. If you want to have responsive ellipsis, please set width manually | boolean | Omit<ellipsis, 'expandable' | 'rows' | 'onExpand'> | false | ellipsis |
| keyboard | Keyboard style | boolean | false | 4.3.0 |
| mark | Marked style | boolean | false | |
| onClick | Set the handler to handle click event | (event) => void | - | |
| strong | Bold style | boolean | false | |
| italic | Italic style | boolean | false | 4.16.0 |
| type | Content type | secondary | success | warning | danger | - | success: 4.6.0 |
| underline | Underlined style | boolean | false |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| code | Code style | boolean | false | |
| copyable | Whether to be copyable, customize it via setting an object | boolean | copyable | false | copyable |
| delete | Deleted line style | boolean | false | |
| disabled | Disabled content | boolean | false | |
| editable | If editable. Can control edit state when is object | boolean | editable | false | editable |
| ellipsis | Display ellipsis when text overflows, can configure rows and expandable by using object | boolean | ellipsis | false | ellipsis |
| level | Set content importance. Match with h1, h2, h3, h4, h5 | number: 1, 2, 3, 4, 5 | 1 | 5: 4.6.0 |
| mark | Marked style | boolean | false | |
| onClick | Set the handler to handle click event | (event) => void | - | |
| italic | Italic style | boolean | false | 4.16.0 |
| type | Content type | secondary | success | warning | danger | - | success: 4.6.0 |
| underline | Underlined style | boolean | false |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| code | Code style | boolean | false | |
| copyable | Whether to be copyable, customize it via setting an object | boolean | copyable | false | copyable |
| delete | Deleted line style | boolean | false | |
| disabled | Disabled content | boolean | false | |
| editable | If editable. Can control edit state when is object | boolean | editable | false | editable |
| ellipsis | Display ellipsis when text overflows, can configure rows and expandable by using object | boolean | ellipsis | false | ellipsis |
| mark | Marked style | boolean | false | |
| onClick | Set the handler to handle click event | (event) => void | - | |
| strong | Bold style | boolean | false | |
| italic | Italic style | boolean | false | 4.16.0 |
| type | Content type | secondary | success | warning | danger | - | success: 4.6.0 |
| underline | Underlined style | boolean | false |
{text: string | (() => string | Promise<string>),onCopy: function(event),icon: ReactNode,tooltips: false | [ReactNode, ReactNode],format: 'text/plain' | 'text/html',tabIndex: number,}
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| format | The Mime Type of the text | 'text/plain' | 'text/html' | - | 4.21.0 |
| icon | Custom copy icon: [copyIcon, copiedIcon] | [ReactNode, ReactNode] | - | 4.6.0 |
| text | The text to copy | string | - | |
| tooltips | Custom tooltip text, hide when it is false | [ReactNode, ReactNode] | [Copy, Copied] | 4.4.0 |
| onCopy | Called when copied text | function | - | |
| tabIndex | Set tabIndex of the copy button | number | 0 | 5.17.0 |
{icon: ReactNode,tooltip: 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,tabIndex: number,}
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| autoSize | autoSize attribute of textarea | boolean | { minRows: number, maxRows: number } | - | 4.4.0 |
| editing | Whether to be editable | boolean | false | |
| icon | Custom editable icon | ReactNode | <EditOutlined /> | 4.6.0 |
| maxLength | maxLength attribute of textarea | number | - | 4.4.0 |
| tooltip | Custom tooltip text, hide when it is false | ReactNode | Edit | 4.6.0 |
| text | Edit text, specify the editing content instead of using the children implicitly | string | - | 4.24.0 |
| onChange | Called when input at textarea | function(value: string) | - | |
| onCancel | Called when type ESC to exit editable state | function | - | |
| onStart | Called when enter editable state | function | - | |
| onEnd | Called when type ENTER to exit editable state | function | - | 4.14.0 |
| triggerType | Edit mode trigger - icon, text or both (not specifying icon as trigger hides it) | Array<icon|text> | [icon] | |
| enterIcon | Custom "enter" icon in the edit field (passing null removes the icon) | ReactNode | <EnterOutlined /> | 4.17.0 |
| tabIndex | Set tabIndex of the edit button | number | 0 | 5.17.0 |
interface EllipsisConfig {rows: number;/** `collapsible` added in `5.16.0` */expandable: boolean | 'collapsible';suffix: string;/** render function added in `5.16.0` */symbol: ReactNode | ((expanded: boolean) => ReactNode);tooltip: ReactNode | TooltipProps;/** added in `5.16.0` */defaultExpanded: boolean;/** added in `5.16.0` */expanded: boolean;/** `info` added in `5.16.0` */onExpand: (event: MouseEvent, info: { expanded: boolean }) => void;onEllipsis: (ellipsis: boolean) => void;}
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| expandable | Whether to be expandable | boolean | 'collapsible' | - | collapsible: 5.16.0 |
| rows | Max rows of content | number | - | |
| suffix | Suffix of ellipsis content | string | - | |
| symbol | Custom description of ellipsis | ReactNode | ((expanded: boolean) => ReactNode) | Expand Collapse | |
| tooltip | Show tooltip when ellipsis | ReactNode | TooltipProps | - | 4.11.0 |
| defaultExpanded | Default expand or collapse | boolean | 5.16.0 | |
| expanded | Expand or Collapse | boolean | 5.16.0 | |
| onEllipsis | Called when enter or leave ellipsis state | function(ellipsis) | - | 4.2.0 |
| onExpand | Called when expand content | function(event, { expanded: boolean }) | - | info: 5.16.0 |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| titleMarginBottom | Margin bottom of title | string | number | 0.5em |
| titleMarginTop | Margin top of title | string | number | 1.2em |
Display the document sample.
Display title in different levels.
Display the title and paragraph.
Provides multiple types of text and a link.
Makes Typography editable.
Makes Typography copyable with the click of a button.
Multiple line ellipsis support. You can use tooltip to configure ellipsis tooltip. The expandable property is recommended when you have lots of content.
Controlled multi line text omission.
You can ellipsis content from middle by customize ellipsis={{ suffix: ... }}.
Multiple line ellipsis support.
Add suffix ellipsis support.
Custom component token.
Sketch and Axure), to help people create their product prototypes beautifully and efficiently.Sketch 和Axure），来帮助业务快速设计出高质量的产品原型。AntV 是蚂蚁集团全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、不限可能的数据可视化最佳实践。得益于丰富的业务场景和用户需求挑战，AntV 经历多年积累与不断打磨，已支撑整个阿里集团内外 20000+ 业务系统，通过了日均千万级 UV 产品的严苛考验。 我们正在基础图表，图分析，图编辑，地理空间可视化，智能可视化等各个可视化的领域耕耘，欢迎同路人一起前行。
AntV 是蚂蚁集团全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、不限可能的数据可视化最佳实践。得益于丰富的业务场景和用户需求挑战，AntV 经历多年积累与不断打磨，已支撑整个阿里集团内外 20000+ 业务系统，通过了日均千万级 UV 产品的严苛考验。 我们正在基础图表，图分析，图编辑，地理空间可视化，智能可视化等各个可视化的领域耕耘，欢迎同路人一起前行。
Sketch and Axure), to help people create their product prototypes beautifully and efficiently.Sketch 和Axure），来帮助业务快速设计出高质量的产品原型。Ant Design (code)Ant Design, a design language for background applications, is refined by Ant UED Team.Test[Before]not ellipsis[After]
this is a multiline text that has many lines and - render like this - and this and that
Sketch and Axure), to help people create their product prototypes beautifully and efficiently.Sketch 和Axure），来帮助业务快速设计出高质量的产品原型。AntV 是蚂蚁集团全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、不限可能的数据可视化最佳实践。得益于丰富的业务场景和用户需求挑战，AntV 经历多年积累与不断打磨，已支撑整个阿里集团内外 20000+ 业务系统，通过了日均千万级 UV 产品的严苛考验。 我们正在基础图表，图分析，图编辑，地理空间可视化，智能可视化等各个可视化的领域耕耘，欢迎同路人一起前行。
AntV 是蚂蚁集团全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、不限可能的数据可视化最佳实践。得益于丰富的业务场景和用户需求挑战，AntV 经历多年积累与不断打磨，已支撑整个阿里集团内外 20000+ 业务系统，通过了日均千万级 UV 产品的严苛考验。 我们正在基础图表，图分析，图编辑，地理空间可视化，智能可视化等各个可视化的领域耕耘，欢迎同路人一起前行。