ant-design/components/typography/index.en-US.md
陈帅 c673cde7de
merge Feature into master (#29758)
* feat: add onCancel and onEnd option for editable (#29615)

* feature: add onCancel and onEnd option for editable

* doc: editable

* doc: add EN doc

* optimize: code

Co-authored-by: chenliang <chenliang9@xiaomi.com>

* feat: add parent class for different notification types (#29634)

close #29417

* refactor: Upload use origin behavior (#29737)

* refactor: Fallback of events

* test: Fix test case

* fix: Start file update logic

* fix: remove status update

* test: Remove wrapTest

* test: Fix test case

* chore: bump rc-upload

* docs: About desc

* feat: tab support moreIcon (#29744)

* feat: Tabs support moreIcon

* docs: Tabs support moreIcon

* style: lint

* docs: add english document

* Update components/tabs/index.zh-CN.md

Co-authored-by: xrkffgg <xrkffgg@vip.qq.com>

* Update components/tabs/index.en-US.md

Co-authored-by: xrkffgg <xrkffgg@vip.qq.com>

* Update components/tabs/index.zh-CN.md

* Update components/tabs/index.en-US.md

Co-authored-by: zty <zty.dev@outlook.com>
Co-authored-by: zty <zty.dev@icloud.com>
Co-authored-by: xrkffgg <xrkffgg@vip.qq.com>

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: jueinin <1014397160@qq.com>
Co-authored-by: chenliang <chenliang9@xiaomi.com>
Co-authored-by: 不吃猫的鱼 <michael2ib1989@gmail.com>
Co-authored-by: 二货机器人 <smith3816@gmail.com>
Co-authored-by: Tianyuan Zhang <tianyuan233.zhang@gmail.com>
Co-authored-by: zty <zty.dev@outlook.com>
Co-authored-by: zty <zty.dev@icloud.com>
Co-authored-by: xrkffgg <xrkffgg@vip.qq.com>
2021-03-13 23:46:32 +08:00

6.0 KiB

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 overflows boolean false
keyboard Keyboard style boolean false 4.3.0
mark Marked style boolean false
strong Bold style boolean false
type Content type secondary | success | warning | danger - success: 4.6.0
underline Underlined style boolean false
onChange Trigger when user edits the content function(string) -

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
type Content type secondary | success | warning | danger - success: 4.6.0
underline Underlined style boolean false
onChange Trigger when user edits the content function(string) -

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
strong Bold style boolean false
type Content type secondary | success | warning | danger - success: 4.6.0
underline Underlined style boolean false
onChange Trigger when user edits the content function(string) -

copyable

{
  text: string,
  onCopy: function,
  icon: ReactNode,
  tooltips: false | [ReactNode, ReactNode],
}
Property Description Type Default Version
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,
}
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
onChange Called when input at textarea function(event) -
onStart Called when enter editable state function -
onCancel Called when type ESC to exit editable state function -
onEnd Called when type ENTER to exit editable state function -

ellipsis

{
  rows: number,
  expandable: boolean,
  suffix: string,
  symbol: ReactNode,
  tooltip: boolean | ReactNode,
  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 - 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} />