Paragraph
Example
基本
长短文本
API
已废弃，请使用Typography
，段落用于控制页面整体的文本视觉，主要由行间距及文本大小体现。
何时使用
#
页面文本展示需要一致体验。
一般短文本和长文本的行间距是有差别的，短文本的行间距会更小(一般为三行以内)
代码演示
#
基本
#
最简单的用法。
import ReactDOM from 'react-dom'; import { Paragraph } from '@alifd/next'; const content = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'; ReactDOM.render( <div> <Paragraph>{content}</Paragraph> <br /> <Paragraph size="small">{content}</Paragraph> </div>, mountNode );
长短文本
#
用于短文本和长文本的区分，短文本的行间距会更小 (一般为三行以内)
import ReactDOM from 'react-dom'; import { Paragraph } from '@alifd/next'; const content = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'; ReactDOM.render( <div> <Paragraph>{content}</Paragraph> <br /> <Paragraph type="short">{content}</Paragraph> </div>, mountNode );
API
#
Paragraph
#
参数
说明
类型
默认值
是否必填
className
额外的样式名 会附加到 root dom 上
string
-
type
什么方式展示段落
'long' | 'short'
'long'
size
组件大小。
'medium' | 'small'
'medium'