Importimport { Typography } from 'antd'; |
contributors
Common props ref：Common props
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| actions | Configure the operation bar | actions | - | 6.4.0 |
| classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | 6.4.0 |
| code | Code style | boolean | false | |
| copyable | Whether to be copyable, customize it via setting an object | boolean | copyable | false | |
| delete | Deleted line style | boolean | false | |
| disabled | Disabled content | boolean | false | |
| editable | If editable. Can control edit state when is object | boolean | editable | false | |
| 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 | |
| italic | Italic style | boolean | false | 4.16.0 |
| keyboard | Keyboard style | boolean | false | 4.3.0 |
| mark | Marked style | boolean | false | |
| strong | Bold style | boolean | false | |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | 6.4.0 |
| type | Content type | secondary | success | warning | danger | - | success: 4.6.0 |
| underline | Underlined style | boolean | false | |
| onClick | Set the handler to handle click event | (event) => void | - |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| actions | Configure the operation bar | actions | - | 6.4.0 |
| classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | 6.4.0 |
| code | Code style | boolean | false | |
| copyable | Whether to be copyable, customize it via setting an object | boolean | copyable | false | |
| delete | Deleted line style | boolean | false | |
| disabled | Disabled content | boolean | false | |
| editable | If editable. Can control edit state when is object | boolean | editable | false | |
| ellipsis | Display ellipsis when text overflows, can configure rows and expandable by using object | boolean | ellipsis | false | |
| italic | Italic style | boolean | false | 4.16.0 |
| 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 | |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | 6.4.0 |
| type | Content type | secondary | success | warning | danger | - | success: 4.6.0 |
| underline | Underlined style | boolean | false | |
| onClick | Set the handler to handle click event | (event) => void | - |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| actions | Configure the operation bar | actions | - | 6.4.0 |
| classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | 6.4.0 |
| code | Code style | boolean | false | |
| copyable | Whether to be copyable, customize it via setting an object | boolean | copyable | false | |
| delete | Deleted line style | boolean | false | |
| disabled | Disabled content | boolean | false | |
| editable | If editable. Can control edit state when is object | boolean | editable | false | |
| ellipsis | Display ellipsis when text overflows, can configure rows and expandable by using object | boolean | ellipsis | false | |
| italic | Italic style | boolean | false | 4.16.0 |
| mark | Marked style | boolean | false | |
| strong | Bold style | boolean | false | |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | 6.4.0 |
| type | Content type | secondary | success | warning | danger | - | success: 4.6.0 |
| underline | Underlined style | boolean | false | |
| onClick | Set the handler to handle click event | (event) => void | - |
{placement: 'start' | 'end',}
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| placement | Set the operation bar placement relative to the text | start | end | end | 6.4.0 |
{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 |
| tabIndex | Set tabIndex of the copy button | number | 0 | 5.17.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 | - |
{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 | |
| enterIcon | Custom "enter" icon in the edit field (passing null removes the icon) | ReactNode | <EnterOutlined /> | 4.17.0 |
| icon | Custom editable icon | ReactNode | <EditOutlined /> | 4.6.0 |
| maxLength | maxLength attribute of textarea | number | - | 4.4.0 |
| tabIndex | Set tabIndex of the edit button | number | 0 | 5.17.0 |
| text | Edit text, specify the editing content instead of using the children implicitly | string | - | 4.24.0 |
| tooltip | Custom tooltip text, hide when it is false | ReactNode | Edit | 4.6.0 |
| triggerType | Edit mode trigger - icon, text or both (not specifying icon as trigger hides it) | Array<icon|text> | [icon] | |
| onCancel | Called when type ESC to exit editable state | function | - | |
| onChange | Called when input at textarea | function(value: string) | - | |
| onEnd | Called when type ENTER to exit editable state | function | - | 4.14.0 |
| onStart | Called when enter editable state | function | - |
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 |
|---|---|---|---|---|
| defaultExpanded | Default expand or collapse | boolean | 5.16.0 | |
| expandable | Whether to be expandable | boolean | 'collapsible' | - | collapsible: 5.16.0 |
| expanded | Expand or Collapse | boolean | 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 |
| 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 |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| colorErrorText | The default state of the text in the error color. | string | #ff4d4f |
| colorErrorTextActive | The active state of the text in the error color. | string | #d9363e |
| colorErrorTextHover | The hover state of the text in the error color. | string | #ff7875 |
| colorFillAlter | Control the alternative background color of element. | string | rgba(0,0,0,0.02) |
| colorIcon | Weak action. Such as `allowClear` or Alert close button | string | rgba(0,0,0,0.45) |
| colorLink | Control the color of hyperlink. | string | #1677ff |
| colorLinkActive | Control the color of hyperlink when clicked. | string | #0958d9 |
| colorLinkHover | Control the color of hyperlink when hovering. | string | #69b1ff |
| colorPrimaryBorder | The stroke color under the main color gradient, used on the stroke of components such as Slider. | string | #91caff |
| colorSplit | Used as the color of separator, this color is the same as colorBorderSecondary but with transparency. | string | rgba(5,5,5,0.06) |
| colorSuccess | Used to represent the token sequence of operation success, such as Result, Progress and other components will use these map tokens. | string | #52c41a |
| colorSuccessText | Default state color of success color text | string | #52c41a |
| colorText | Default text color which comply with W3C standards, and this color is also the darkest neutral color. | string | rgba(0,0,0,0.88) |
| colorTextDescription | Control the font color of text description. | string | rgba(0,0,0,0.45) |
| colorTextDisabled | Control the color of text in disabled state. | string | rgba(0,0,0,0.25) |
| colorTextHeading | Control the font color of heading. | string | rgba(0,0,0,0.88) |
| colorWarningText | The default state of the text in the warning color. | string | #faad14 |
| borderRadiusLG | LG size border radius, used in some large border radius components, such as Card, Modal and other components. | number | 8 |
| fontFamilyCode | Code font, used for code, pre and kbd elements in Typography | string | 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace |
| fontSize | The most widely used font size in the design system, from which the text gradient will be derived. | number | 14 |
| fontSizeHeading1 | Font size of h1 tag. | string | number | 38 |
| fontSizeHeading2 | Font size of h2 tag. | string | number | 30 |
| fontSizeHeading3 | Font size of h3 tag. | string | number | 24 |
| fontSizeHeading4 | Font size of h4 tag. | string | number | 20 |
| fontSizeHeading5 | Font size of h5 tag. | string | number | 16 |
| fontWeightStrong | Control the font weight of heading components (such as h1, h2, h3) or selected item. | number | 600 |
| lineHeight | Line height of text. | number | 1.5714285714285714 |
| lineHeightHeading1 | Line height of h1 tag. | number | 1.2105263157894737 |
| lineHeightHeading2 | Line height of h2 tag. | number | 1.2666666666666666 |
| lineHeightHeading3 | Line height of h3 tag. | number | 1.3333333333333333 |
| lineHeightHeading4 | Line height of h4 tag. | number | 1.4 |
| lineHeightHeading5 | Line height of h5 tag. | number | 1.5 |
| lineType | Border style of base components | string | solid |
| lineWidth | Border width of base components | number | 1 |
| lineWidthFocus | Control the width of the line when the component is in focus state. | number | 3 |
| linkDecoration | Control the text decoration style of a link. | TextDecoration<string | number> | undefined | none |
| linkFocusDecoration | Control the text decoration style of a link on focus. | TextDecoration<string | number> | undefined | none |
| linkHoverDecoration | Control the text decoration style of a link on mouse hover. | TextDecoration<string | number> | undefined | none |
| marginXS | Control the margin of an element, with a small size. | number | 8 |
| marginXXS | Control the margin of an element, with the smallest size. | number | 4 |
| motionDurationMid | Motion speed, medium speed. Used for medium element animation interaction. | string | 0.2s |
| motionDurationSlow | Motion speed, slow speed. Used for large element animation interaction. | string | 0.3s |
| padding | Control the padding of the element. | number | 16 |
| paddingSM | Control the small padding of the element. | number | 12 |
Sketch and Axure), to help people create their product prototypes beautifully and efficiently.Sketch 和Axure），来帮助业务快速设计出高质量的产品原型。AntV 是蚂蚁集团全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、不限可能的数据可视化最佳实践。得益于丰富的业务场景和用户需求挑战，AntV 经历多年积累与不断打磨，已支撑整个阿里集团内外 20000+ 业务系统，通过了日均千万级 UV 产品的严苛考验。 我们正在基础图表，图分析，图编辑，地理空间可视化，智能可视化等各个可视化的领域耕耘，欢迎同路人一起前行。
AntV 是蚂蚁集团全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、不限可能的数据可视化最佳实践。得益于丰富的业务场景和用户需求挑战，AntV 经历多年积累与不断打磨，已支撑整个阿里集团内外 20000+ 业务系统，通过了日均千万级 UV 产品的严苛考验。 我们正在基础图表，图分析，图编辑，地理空间可视化，智能可视化等各个可视化的领域耕耘，欢迎同路人一起前行。
Ant Design (code)Ant Design, a design language for background applications, is refined by Ant UED Team.| Plan | Price | Features |
|---|---|---|
| Basic | Free | 1GB Storage, Basic Support |
| Pro | $9.99/month | 100GB Storage, Priority Support |
| Enterprise | Contact us | Unlimited Storage, 24/7 Support |