ant-design/components/typography/index.zh-CN.md

74 lines
3.7 KiB
Markdown
Raw Normal View History

New Component: Typography (#14250) * text with prefix * add edit style * support editable * enhance accessibility & type experience * optimize IME case * support copy * add locale * add secondary & disabled * add ellipsis shadow text * split to 3 components * update snapshot * update desc * change lines also need update ellipsis * skip aria when is in ellipsis * add ResizeObserver in _util * update snapshot * move TestBase into test file * update test case * update doc * fix typo * important => level * use rows * update demo cols to 1 * fix cssText not work in firefox * update doc * add miss point * support extendable * update snapshot * fix doc * copyable support string * update snapshot * update doc * update doc desc * adjust style * full test * reset after test * rename * update snapshot * fix compile * adjust style * update desc * update prefixCls * update margin * adjust * nest wrap of tag content * adjust style * update comment * rm % * one more thing * tmp of measure * merge string as children * update snapshot * update testcase * remove comment * use internal variable for configProvider passing * update snapshot * use expandable instead of extendable * less variable it * update demo * update less * adjust code & mark style * remove mark padding * update measure logic * support nest element style * use childNode.textContent to fix react 15 error * update css * popout Typography * add link style * adjust doc * use ellipsis instead of rows & expandable * update doc * update doc * update doc & style * fix typo * add css ellipsis support * client render * update snapshot * enhance copyable * support onExpand * update test case * add test of css ellipsis * fix logic in react 15 * rename onChange -> onSave * use tagName of article * fix lint
2019-02-19 11:42:05 +08:00
---
category: Components
subtitle: 排版
type: 通用
title: Typography
cols: 1
cover: https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg
New Component: Typography (#14250) * text with prefix * add edit style * support editable * enhance accessibility & type experience * optimize IME case * support copy * add locale * add secondary & disabled * add ellipsis shadow text * split to 3 components * update snapshot * update desc * change lines also need update ellipsis * skip aria when is in ellipsis * add ResizeObserver in _util * update snapshot * move TestBase into test file * update test case * update doc * fix typo * important => level * use rows * update demo cols to 1 * fix cssText not work in firefox * update doc * add miss point * support extendable * update snapshot * fix doc * copyable support string * update snapshot * update doc * update doc desc * adjust style * full test * reset after test * rename * update snapshot * fix compile * adjust style * update desc * update prefixCls * update margin * adjust * nest wrap of tag content * adjust style * update comment * rm % * one more thing * tmp of measure * merge string as children * update snapshot * update testcase * remove comment * use internal variable for configProvider passing * update snapshot * use expandable instead of extendable * less variable it * update demo * update less * adjust code & mark style * remove mark padding * update measure logic * support nest element style * use childNode.textContent to fix react 15 error * update css * popout Typography * add link style * adjust doc * use ellipsis instead of rows & expandable * update doc * update doc * update doc & style * fix typo * add css ellipsis support * client render * update snapshot * enhance copyable * support onExpand * update test case * add test of css ellipsis * fix logic in react 15 * rename onChange -> onSave * use tagName of article * fix lint
2019-02-19 11:42:05 +08:00
---
2019-03-19 11:40:36 +08:00
文本的基本格式。
New Component: Typography (#14250) * text with prefix * add edit style * support editable * enhance accessibility & type experience * optimize IME case * support copy * add locale * add secondary & disabled * add ellipsis shadow text * split to 3 components * update snapshot * update desc * change lines also need update ellipsis * skip aria when is in ellipsis * add ResizeObserver in _util * update snapshot * move TestBase into test file * update test case * update doc * fix typo * important => level * use rows * update demo cols to 1 * fix cssText not work in firefox * update doc * add miss point * support extendable * update snapshot * fix doc * copyable support string * update snapshot * update doc * update doc desc * adjust style * full test * reset after test * rename * update snapshot * fix compile * adjust style * update desc * update prefixCls * update margin * adjust * nest wrap of tag content * adjust style * update comment * rm % * one more thing * tmp of measure * merge string as children * update snapshot * update testcase * remove comment * use internal variable for configProvider passing * update snapshot * use expandable instead of extendable * less variable it * update demo * update less * adjust code & mark style * remove mark padding * update measure logic * support nest element style * use childNode.textContent to fix react 15 error * update css * popout Typography * add link style * adjust doc * use ellipsis instead of rows & expandable * update doc * update doc * update doc & style * fix typo * add css ellipsis support * client render * update snapshot * enhance copyable * support onExpand * update test case * add test of css ellipsis * fix logic in react 15 * rename onChange -> onSave * use tagName of article * fix lint
2019-02-19 11:42:05 +08:00
## 何时使用
2019-03-19 11:40:36 +08:00
- 当需要展示标题、段落、列表内容时使用,如文章/博客/日志的文本样式。
- 当需要一列基于文本的基础操作时,如拷贝/省略/可编辑。
New Component: Typography (#14250) * text with prefix * add edit style * support editable * enhance accessibility & type experience * optimize IME case * support copy * add locale * add secondary & disabled * add ellipsis shadow text * split to 3 components * update snapshot * update desc * change lines also need update ellipsis * skip aria when is in ellipsis * add ResizeObserver in _util * update snapshot * move TestBase into test file * update test case * update doc * fix typo * important => level * use rows * update demo cols to 1 * fix cssText not work in firefox * update doc * add miss point * support extendable * update snapshot * fix doc * copyable support string * update snapshot * update doc * update doc desc * adjust style * full test * reset after test * rename * update snapshot * fix compile * adjust style * update desc * update prefixCls * update margin * adjust * nest wrap of tag content * adjust style * update comment * rm % * one more thing * tmp of measure * merge string as children * update snapshot * update testcase * remove comment * use internal variable for configProvider passing * update snapshot * use expandable instead of extendable * less variable it * update demo * update less * adjust code & mark style * remove mark padding * update measure logic * support nest element style * use childNode.textContent to fix react 15 error * update css * popout Typography * add link style * adjust doc * use ellipsis instead of rows & expandable * update doc * update doc * update doc & style * fix typo * add css ellipsis support * client render * update snapshot * enhance copyable * support onExpand * update test case * add test of css ellipsis * fix logic in react 15 * rename onChange -> onSave * use tagName of article * fix lint
2019-02-19 11:42:05 +08:00
## API
### Typography.Text
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
2020-05-16 14:43:29 +08:00
| code | 添加代码样式 | boolean | false | |
2019-11-22 10:33:34 +08:00
| copyable | 是否可拷贝,为对象时可设置复制文本以回调函数 | boolean \| { text: string, onCopy: Function } | false | |
| delete | 添加删除线样式 | boolean | false | |
| disabled | 禁用文本 | boolean | false | |
| editable | 是否可编辑,为对象时可对编辑进行控制 | boolean \| { editing: boolean, onStart: Function, onChange: Function(string) } | false | |
2020-05-30 22:33:24 +08:00
| ellipsis | 设置自动溢出省略,需要设置元素宽度 | boolean | false | |
2019-11-22 10:33:34 +08:00
| mark | 添加标记样式 | boolean | false | |
2020-05-16 14:43:29 +08:00
| keyboard | 添加键盘样式 | boolean | false | 4.3.0 |
2019-11-22 10:33:34 +08:00
| underline | 添加下划线样式 | boolean | false | |
| strong | 是否加粗 | boolean | false | |
| type | 文本类型 | `secondary` \| `warning` \| `danger` | - | |
New Component: Typography (#14250) * text with prefix * add edit style * support editable * enhance accessibility & type experience * optimize IME case * support copy * add locale * add secondary & disabled * add ellipsis shadow text * split to 3 components * update snapshot * update desc * change lines also need update ellipsis * skip aria when is in ellipsis * add ResizeObserver in _util * update snapshot * move TestBase into test file * update test case * update doc * fix typo * important => level * use rows * update demo cols to 1 * fix cssText not work in firefox * update doc * add miss point * support extendable * update snapshot * fix doc * copyable support string * update snapshot * update doc * update doc desc * adjust style * full test * reset after test * rename * update snapshot * fix compile * adjust style * update desc * update prefixCls * update margin * adjust * nest wrap of tag content * adjust style * update comment * rm % * one more thing * tmp of measure * merge string as children * update snapshot * update testcase * remove comment * use internal variable for configProvider passing * update snapshot * use expandable instead of extendable * less variable it * update demo * update less * adjust code & mark style * remove mark padding * update measure logic * support nest element style * use childNode.textContent to fix react 15 error * update css * popout Typography * add link style * adjust doc * use ellipsis instead of rows & expandable * update doc * update doc * update doc & style * fix typo * add css ellipsis support * client render * update snapshot * enhance copyable * support onExpand * update test case * add test of css ellipsis * fix logic in react 15 * rename onChange -> onSave * use tagName of article * fix lint
2019-02-19 11:42:05 +08:00
### Typography.Title
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
2019-11-22 10:33:34 +08:00
| copyable | 是否可拷贝,为对象时可设置复制文本以回调函数 | boolean \| { text: string, onCopy: Function } | false | |
| delete | 添加删除线样式 | boolean | false | |
| disabled | 禁用文本 | boolean | false | |
| editable | 是否可编辑,为对象时可对编辑进行控制 | boolean \| { editing: boolean, onStart: Function, onChange: Function(string) } | false | |
| ellipsis | 自动溢出省略,为对象时可设置省略行数与是否可展开等 | boolean \| { rows: number, expandable: boolean, onExpand: Function(event), onEllipsis: Function(ellipsis) } | false | onEllipsis: 4.2.0 |
| level | 重要程度,相当于 `h1`、`h2`、`h3`、`h4` | number: 1, 2, 3, 4 | 1 | |
2019-11-22 10:33:34 +08:00
| mark | 添加标记样式 | boolean | false | |
| underline | 添加下划线样式 | boolean | false | |
| onChange | 当用户提交编辑内容时触发 | Function(string) | - | |
| type | 文本类型 | `secondary` \| `warning` \| `danger` | - | |
New Component: Typography (#14250) * text with prefix * add edit style * support editable * enhance accessibility & type experience * optimize IME case * support copy * add locale * add secondary & disabled * add ellipsis shadow text * split to 3 components * update snapshot * update desc * change lines also need update ellipsis * skip aria when is in ellipsis * add ResizeObserver in _util * update snapshot * move TestBase into test file * update test case * update doc * fix typo * important => level * use rows * update demo cols to 1 * fix cssText not work in firefox * update doc * add miss point * support extendable * update snapshot * fix doc * copyable support string * update snapshot * update doc * update doc desc * adjust style * full test * reset after test * rename * update snapshot * fix compile * adjust style * update desc * update prefixCls * update margin * adjust * nest wrap of tag content * adjust style * update comment * rm % * one more thing * tmp of measure * merge string as children * update snapshot * update testcase * remove comment * use internal variable for configProvider passing * update snapshot * use expandable instead of extendable * less variable it * update demo * update less * adjust code & mark style * remove mark padding * update measure logic * support nest element style * use childNode.textContent to fix react 15 error * update css * popout Typography * add link style * adjust doc * use ellipsis instead of rows & expandable * update doc * update doc * update doc & style * fix typo * add css ellipsis support * client render * update snapshot * enhance copyable * support onExpand * update test case * add test of css ellipsis * fix logic in react 15 * rename onChange -> onSave * use tagName of article * fix lint
2019-02-19 11:42:05 +08:00
### Typography.Paragraph
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
2019-11-22 10:33:34 +08:00
| copyable | 是否可拷贝,为对象时可设置复制文本以回调函数 | boolean \| { text: string, onCopy: Function } | false | |
| delete | 添加删除线样式 | boolean | false | |
| disabled | 禁用文本 | boolean | false | |
| editable | 是否可编辑,为对象时可对编辑进行控制 | boolean \| { editing: boolean, onStart: Function, onChange: Function(string) } | false | |
| ellipsis | 自动溢出省略,为对象时可设置省略行数、是否可展开、添加后缀等 | boolean \| { rows: number, expandable: boolean, suffix: string, symbol: React.ReactNode, onExpand: Function(event), onEllipsis: Function(ellipsis) } | false | onEllipsis: 4.2.0 |
2019-11-22 10:33:34 +08:00
| mark | 添加标记样式 | boolean | false | |
| underline | 添加下划线样式 | boolean | false | |
| onChange | 当用户提交编辑内容时触发 | Function(string) | - | |
| strong | 是否加粗 | boolean | false | |
| type | 文本类型 | `secondary` \| `warning` \| `danger` | - | |
## FAQ
### Typography.Link 如何与 react-router 库集成?
`react-router` 支持[自定义](https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/Link.md#component-reactcomponent)渲染组件:
```tsx
<Link to="/" component={Typography.Link} />
```