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 |
autoSize attribute of textarea |
boolean | { minRows: number, maxRows: number } |
- |
|
editing |
Whether to be editable |
boolean |
false |
|
maxlength |
maxlength attribute 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) |
- |
|