ant-design/components/typography/index.en-US.md
2022-09-28 12:01:20 +08:00

7.2 KiB
Raw Blame History

category type title cols cover
Components General Typography 1 https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg

Basic text writing, including headings, body text, lists, and more.

When To Use

  • When need to display a title or paragraph contents in Articles/Blogs/Notes.
  • When you need copyable/editable/ellipsis texts.

API

Typography.Text

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 overflowscan'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

Typography.Title

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

Typography.Paragraph

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

copyable

{
  text: string,
  onCopy: function(event),
  icon: ReactNode,
  tooltips: false | [ReactNode, ReactNode],
  format: 'text/plain' | 'text/html',
}
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 -

editable

{
  icon: ReactNode,
  tooltip: boolean | ReactNode,
  editing: boolean,
  maxLength: number,
  autoSize: boolean | { minRows: number, maxRows: number },
  onStart: function,
  onChange: function(string),
  onCancel: function,
  onEnd: function,
  triggerType: ('icon' | 'text')[],
  enterIcon: ReactNode,
}
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 boolean | ReactNode Edit 4.6.0
onStart Called when enter editable state function -
onChange Called when input at textarea function(value: string) -
onCancel Called when type ESC to exit 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

ellipsis

{
  rows: number,
  expandable: boolean,
  suffix: string,
  symbol: ReactNode,
  tooltip: boolean | ReactNode | TooltipProps,
  onExpand: function(event),
  onEllipsis: function(ellipsis),
}
Property Description Type Default Version
expandable Whether to be expandable boolean -
rows Max rows of content number -
suffix Suffix of ellipsis content string -
symbol Custom description of ellipsis ReactNode Expand
tooltip Show tooltip when ellipsis boolean | 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) -

FAQ

react-router support customize render component:

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

Note This is not equivalent to the execution logic of react-router's Link reference