Typography

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.

Examples

Title

<template>
  <a-typography-title>h1. Ant Design</a-typography-title>
  <a-typography-title :level="2">h2. Ant Design</a-typography-title>
  <a-typography-title :level="3">h3. Ant Design</a-typography-title>
  <a-typography-title :level="4">h4. Ant Design</a-typography-title>
  <a-typography-title :level="5">h5. Ant Design</a-typography-title>
</template>

Text

<template>
  <a-space direction="vertical">
    <a-typography-text>Ant Design (default)</a-typography-text>
    <a-typography-text type="secondary">Ant Design (secondary)</a-typography-text>
    <a-typography-text type="success">Ant Design (success)</a-typography-text>
    <a-typography-text type="warning">Ant Design (warning)</a-typography-text>
    <a-typography-text type="danger">Ant Design (danger)</a-typography-text>
    <a-typography-text disabled>Ant Design (disabled)</a-typography-text>
    <a-typography-text mark>Ant Design (mark)</a-typography-text>
    <a-typography-text code>Ant Design (code)</a-typography-text>
    <a-typography-text keyboard>Ant Design (keyboard)</a-typography-text>
    <a-typography-text underline>Ant Design (underline)</a-typography-text>
    <a-typography-text delete>Ant Design (delete)</a-typography-text>
    <a-typography-text strong>Ant Design (strong)</a-typography-text>
    <a-typography-text italic>Ant Design (italic)</a-typography-text>
  </a-space>
</template>

Interactive

<template>
  <a-space direction="vertical">
    <a-typography-paragraph editable>
      This is an editable text.
    </a-typography-paragraph>
    <a-typography-paragraph copyable>
      This is a copyable text.
    </a-typography-paragraph>
    <a-typography-paragraph copyable="{ text: 'Hello, Ant Design!' }">
      Replace copy text.
    </a-typography-paragraph>
  </a-space>
</template>

Ellipsis

<template>
  <a-space direction="vertical" style="width: 100%">
    <a-typography-paragraph
      :ellipsis="{ rows: 2, expandable: true, symbol: 'more' }"
    >
      Ant Design, a design language for background applications, is refined by Ant UED Team.
      Ant Design, a design language for background applications, is refined by Ant UED Team.
      Ant Design, a design language for background applications, is refined by Ant UED Team.
      Ant Design, a design language for background applications, is refined by Ant UED Team.
      Ant Design, a design language for background applications, is refined by Ant UED Team.
      Ant Design, a design language for background applications, is refined by Ant UED Team.
    </a-typography-paragraph>
  </a-space>
</template>

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
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	boolean	false
keyboard	Keyboard style	boolean	false
mark	Marked style	boolean	false
strong	Bold style	boolean	false
italic	Italic 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
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
level	Set content importance, same as 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
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
mark	Marked style	boolean	false
strong	Bold style	boolean	false
type	Content type	secondary | success | warning | danger	-
underline	Underlined style	boolean	false