test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-05 05:28:20 +08:00
Code Issues Actions 115 Packages Projects Releases Wiki Activity
3e3d1eedcf
ant-design/components/typography/index.en-US.md
偏右 3e3d1eedcf
feat: customize Typography.Paragraph copyable (#25274) 
* ✨ customize copyable with tooltip and icon

* 💄 fix copyable icon margin

* 📝 custom icon and tooltips demos

* 📸 updating sanpshots

* 📝 updating copyable api

* fix snapshot

* fix tooltips type

* fix tooltips type again

* update documentation

Co-authored-by: Israel kusayev <israel.kusayev@gmail.com>
2020-06-29 12:25:48 +08:00

4.1 KiB
Raw Blame History

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 | { text: string, onCopy: Function, icon: ReactNode, tooltips: [ReactNode, ReactNode] } false icon and tooltips: 4.4.0
delete Deleted line style boolean false
disabled Disabled content boolean false
editable Editable. Can control edit state when is object boolean | { editing: boolean, onStart: Function, onChange: Function(string) } false
ellipsis Display ellipsis when text overflows. Should set width when ellipsis needed boolean false
mark Marked style boolean false
keyboard Keyboard style boolean false 4.3.0
underline Underlined style boolean false
onChange Trigger when user edits the content Function(string) -
strong Bold style boolean false
type Content type secondary | warning | danger -

Typography.Title

Property Description Type Default Version
code Code style boolean false
copyable whether to be copyable, customize it via setting an object boolean | { text: string, onCopy: Function, icon: ReactNode, tooltips: [ReactNode, ReactNode] } false icon and tooltips: 4.4.0
delete Deleted line style boolean false
disabled Disabled content boolean false
editable Editable. Can control edit state when is object boolean | { editing: boolean, onStart: Function, onChange: Function(string) } false
ellipsis Display ellipsis when text overflows. Can configure rows and expandable by using object boolean | { rows: number, expandable: boolean, onExpand: Function(event), onEllipsis: Function(ellipsis) } false onEllipsis: 4.2.0
level Set content importance. Match with h1, h2, h3, h4 number: 1, 2, 3, 4 1
mark Marked style boolean false
underline Underlined style boolean false
onChange Trigger when user edits the content Function(string) -
type Content type secondary | warning | danger -

Typography.Paragraph

Property Description Type Default Version
code Code style boolean false
copyable whether to be copyable, customize it via setting an object boolean | { text: string, onCopy: Function, icon: ReactNode, tooltips: [ReactNode, ReactNode] } false icon and tooltips: 4.4.0
delete Deleted line style boolean false
disabled Disabled content boolean false
editable Editable. Can control edit state when is object boolean | { editing: boolean, onStart: Function, onChange: Function(string) } false
ellipsis Display ellipsis when text overflows. Can configure rows expandable and suffix by using object boolean | { rows: number, expandable: boolean, suffix: string, symbol: React.ReactNode, onExpand: Function(event), onEllipsis: Function(ellipsis) } false onEllipsis: 4.2.0
mark Marked style boolean false
underline Underlined style boolean false
onChange Trigger when user edits the content Function(string) -
strong Bold style boolean false
type Content type secondary | warning | danger -

FAQ

How to use Typography.Link in react-router?

react-router support customize render component:

<Link to="/" component={Typography.Link} />