🌈 An enterprise-class UI components based on Ant Design and Vue. 🐜
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

6.9 KiB

category type title cols cover coverDark
Components General Typography 1 https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*MLt3R6m9huoAAAAAAAAAAAAADrJ8AQ/original https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAAAAAAAAAAAADrJ8AQ/original

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) -