@pisell/layout/demo/O10_p.md

基于 Fusion 设计系统的自然布局体系

---
title: 段落
order: 9
---

通过段落组织文本及各类 inline 模式的元素，自动元素间左右和上下间隙。

```jsx
import React, { Component, useState } from 'react';
import ReactDOM from 'react-dom';
import { Button, Breadcrumb, Radio, Icon, Tag, Switch } from '@alifd/next';
import { Page, Section, Block, Row, Col, Grid, Cell, Space, P, Text } from '@pisell/layout';

import '@alifd/theme-3/variables.css';
import '@alifd/theme-3/index.scss';

const { Header } = Page;

const App = () => {
  const [align, setAlign] = useState('left');
  const [spacing, setSpacing] = useState('medium');
  const [hasVerSpacing, setHasVerSpacing] = useState(true);

  return (
    <Page breakPoints={[{ width: Infinity, maxContentWidth: 1000, numberOfColumns: 12 }]}>
      <Header>
        <P>
          <Breadcrumb>
            <Breadcrumb.Item>自然布局</Breadcrumb.Item>
            <Breadcrumb.Item>区块</Breadcrumb.Item>
          </Breadcrumb>
        </P>
        <br />
        <P type="h4">段落布局</P>
      </Header>
      <Section title="段落">
        <Block>
          <P type="h4">Fusion 简介</P>
          <Space size="small" />
          <P>
            Fusion
            是一套企业级中后台UI的解决方案，致力于解决设计师与前端在产品体验一致性、工作协同、开发效率方面的问题。通过协助业务线构建设计系统，提供系统化工具协助设计师前端使用设计系统，下游提供一站式设计项目协作平台；打通互联网产品从设计到开发的工作流。
          </P>
          <Space size="large" />
          <P>
            <Text>
              Fusion Design
              产品创建于2015年底，阿里巴巴集团中台战略背景下，由国际UED（现国际用户体验事业部）与B2B技术部成立中台DPL项目。从国际UED，天猫，商家等各类业务形态中抽象解构，通过一套设计系统协议提升
              <Text mark>设计与开发效率</Text>
              ，以统一的物料分发工具提升团队协同能力，借助灵活的在线样式配置支撑业务的设计创新。
            </Text>
          </P>
        </Block>
        <Block>
          <Col>
            <Cell autoFit gap={12} verAlign="middle">
              <P>
                水平对齐方式：
                <br />
                <Radio.Group
                  value={align}
                  onChange={setAlign}
                  dataSource={[
                    { label: '左(left)', value: 'left' },
                    {
                      label: '中(center)',
                      value: 'center',
                    },
                    {
                      label: '右(right)',
                      value: 'right',
                    },
                    {
                      label: '两端对齐(space-between)',
                      value: 'space-between',
                    },
                    {
                      label: '均分(space-around)',
                      value: 'space-around',
                    },
                    {
                      label: '均分(space-evenly)',
                      value: 'space-evenly',
                    },
                  ]}
                />
              </P>
              <P>
                内容间隙(spacing)：
                <Radio.Group
                  value={spacing}
                  onChange={setSpacing}
                  dataSource={[
                    { label: '小(small)', value: 'small' },
                    {
                      label: '中(medium)',
                      value: 'medium',
                    },
                    {
                      label: '大(large)',
                      value: 'large',
                    },
                    {
                      label: '无',
                      value: false,
                    },
                  ]}
                />
              </P>
              <P>
                启用元素垂直间距：
                <Switch size="small" checked={hasVerSpacing} onChange={setHasVerSpacing} />
              </P>
            </Cell>
            <Cell gap={12} style={{ height: 300, background: '#f3f3f3', padding: 20 }}>
              <P align={align} spacing={spacing}>
                <Text type="h1" strong>
                  Alibaba
                </Text>
                <Text type="h1" strong>
                  Fusion
                </Text>
                <Text type="h1" strong>
                  Design
                </Text>
              </P>
              <P align={align} spacing={spacing}>
                <Text type="h4">企业级的中后台设计系统解决方案</Text>
              </P>
              <P verAlign="middle" align={align} spacing={spacing} hasVerSpacing={hasVerSpacing}>
                <Button size="large" type="primary">
                  研发文档
                </Button>
                <Button size="large" type="normal">
                  设计模式
                </Button>
                <Button type="normal" text>
                  观看视频
                </Button>
                <Tag size="small" type="normal">
                  <Icon type="favorites-filling" size="xs" />
                  Star
                </Tag>
              </P>
            </Cell>
          </Col>
        </Block>

        <Block title="自定义间隙">
          <P spacing={0} verAlign="middle">
            <Text>实付订单</Text>
            <Space size="large" direction="ver" />
            <Text>实付款: </Text>
            <Text type="h5" color="#ff5000">
              ￥35.00
            </Text>
            <Space size={50} direction="ver" />
            <Text type="body2">订单编号：39876619</Text>
          </P>
        </Block>
      </Section>
    </Page>
  );
};

ReactDOM.render(
  <div className="mock-iframe">
    <App />
  </div>,
  mountNode,
);
```

```css
.mock-iframe {
  border: 3px solid black;
  border-radius: 12px;
  overflow: hidden;
}
```