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 |  | 
| content(v-model) | When using ellipsis or editable, use content instead of children | string | - |  | 
| 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 | boolean | false |  | 
| keyboard | Keyboard style | boolean | false |  | 
| mark | Marked style | boolean | false |  | 
| strong | Bold style | boolean | false |  | 
| type | Content type | secondary|success|warning|danger | - |  | 
| underline | Underlined style | boolean | false |  | 
Typography.Title
| Property | Description | Type | Default | Version | 
| code | Code style | boolean | false |  | 
| content(v-model) | When using ellipsis or editable, use content instead of children | string | - |  | 
| 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 |  | 
| mark | Marked style | boolean | false |  | 
| type | Content type | secondary|success|warning|danger | - |  | 
| underline | Underlined style | boolean | false |  | 
Typography.Paragraph
| Property | Description | Type | Default | Version | 
| code | Code style | boolean | false |  | 
| content(v-model) | When using ellipsis or editable, use content instead of children | string | - |  | 
| 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 |  | 
| strong | Bold style | boolean | false |  | 
| type | Content type | secondary|success|warning|danger | - |  | 
| underline | Underlined style | boolean | false |  | 
slots
| Name | Description | Property | Default | Version | 
| copyableIcon | Custom copy icon | { copied: boolean } | copied ? <CheckOutlined /> : <CopyOutlined /> |  | 
| copyableTooltip | Custom tooltip text, hide when copyable.tooltip = false | { copied: boolean } | copied ? 'Copied' : 'Copy' |  | 
| editableEnterIcon | Custom "enter" icon in the edit field | {className: string} | <EnterOutlined /> | 3.0 | 
| editableIcon | Custom editable icon | - | <EditOutlined /> |  | 
| editableTooltip | Custom tooltip text, hide when editable.tooltip = false | - | Edit |  | 
| ellipsisSymbol | Custom description of ellipsis | - | - |  | 
| ellipsisTooltip | Show tooltip when ellipsis | - | - |  | 
copyable
  {
    text: string,
    onCopy: function(event),
    tooltip: false,
  }
| Property | Description | Type | Default | Version | 
| text | The text to copy | string | - |  | 
| tooltip | Whether to show tooltip | boolean | true |  | 
| onCopy | Called when copied text | function | - |  | 
editable
  {
    tooltip: boolean,
    editing: boolean,
    maxlength: number,
    autoSize: boolean | { minRows: number, maxRows: number },
    onStart: function,
    onChange: function(string),
    onCancel: function,
    onEnd: function,
    triggerType: ('icon' | 'text')[],
  }
| Property | Description | Type | Default | Version | 
| autoSize | autoSizeattribute of textarea | boolean | { minRows: number, maxRows: number } | - |  | 
| editing | Whether to be editable | boolean | false |  | 
| maxlength | maxlengthattribute of textarea | number | - |  | 
| tooltip | Whether to show tooltip | boolean | true |  | 
| 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(event) | - |  | 
| onEnd | Called when type ENTER to exit editable state | function | - |  | 
| onStart | Called when enter editable state | function | - |  | 
ellipsis
  {
    rows: number,
    expandable: boolean,
    suffix: string,
    symbol: string,
    tooltip: boolean | string,
    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 | string | Expand |  | 
| tooltip | Show tooltip when ellipsis | boolean | string | - |  | 
| onEllipsis | Called when enter or leave ellipsis state | function(ellipsis) | - |  | 
| onExpand | Called when expand content | function(event) | - |  |