Paragraph 段落

如果项目中使用的是 0.x 版本的基础组件（@icedesign/base, @ali/ice, @alife/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @alifd/next@latest -S

Guide

段落用于控制页面整体的文本视觉，主要由行间距及文本大小体现。

何时使用

• 页面文本展示需要一致体验。

• 一般短文本和长文本的行间距是有差别的，短文本的行间距会更小(一般为三行以内)

API

Paragraph

代码示例

基本

最简单的用法。

查看源码在线预览

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 { 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);

相关区块

暂无相关区块