自然布局

用于快速完成页面布局体系 (低代码搭建或源码开发)，目标是不写任何布局 CSS 代码。

设计理念

初衷：愿布局不需写 css 样式
定位：页面内容区的布局解决方案

详细介绍：https://www.yuque.com/fusion-design/layout/yzx8g4 （需先加入 Fusion Design 语雀知识库）

预览

安装

 npm install @alifd/layout --save

使用

在项目中，引入一套 Fusion Design 主题的 Design Token, 如：

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

注：此处是为了引入布局组件所必须得 CSS Variables, 只需要保证上述的 CSS 代码生效即可，引入方式不限。

布局示例：

import { Page, Section, Block, Row, Col, Cell, P, Text, Space } from '@alifd/layout';

export default function App() {
  return (
    <Page>
      <Page.Header>Header</Page.Header>
      <Page.Content>
        <Section>
          <Block>
            <Row>
              <Cell>
                <P>
                  <Text>文本</Text>
                  <Text>文本</Text>
                </P>
              </Cell>
              <Cell>
                <P>
                  <Text>文本</Text>
                  <Text>文本</Text>
                </P>
              </Cell>
            </Row>
            <Space />
            <Col>
              <Cell>
                <P>
                  <Text>文本</Text>
                  <Text>文本</Text>
                </P>
              </Cell>
              <Cell>
                <P>
                  <Text>文本</Text>
                  <Text>文本</Text>
                </P>
              </Cell>
            </Col>
          </Block>
        </Section>
      </Page.Content>
      <Page.Footer>Footer</Page.Footer>
    </Page>
  );
}

进一步封装 Block 和 Text。

由于 Section > Block 具有强关联性（依赖 Block 对子元素宽度做计算并调整）。如果业务上需要进一步封装 Block，需要对 Block 增加类型标记，一遍 Section 能识别其 span 等属性。

同理 P > Text 也具有类似强相关性，对于 Text 的组件封装，如果希望在 P 中表现和 Text 近似，也需要标记 typeMark.

示例：

import { Page, Section, Block } from '@alifd/layout';

function NewBlock(props) {
  const { children, ...others } = props;
  // 加入新业组件逻辑
  return <Block {...others}>{children}</Block>;
}

// 标记 NewBlock 可以视为 Block 作为 Section 的子元素
NewBlock.typeMark = 'Block';

// 页面渲染可以使用 NewBlock
function App() {
  return (
    <Page>
      <Section>
        <Block span={2}>block</Block>
        <NewBlock span={10}>new block</NewBlock>
      </Section>
    </Page>
  );
}

开发

调试和预览 demo

npm run start

启动低代码预览

npm run lowcode:dev

API

Page

页面

参数	含义	类型	默认值
prefix	CSS 类名前缀	string	`fd-layout-`
minHeight	页面的最小高度，例如 `calc(100vh - 52px)`	Number/String	-
noPadding	禁用页面内边距,包含 Header, Content, Footer	Boolean	`false`
sectionGap	Header、Footer、Nav、Aside 和章节之间间隙	Number	-
blockGap	Section 中栅格布局间隙	Number	-
gridGap	小布局间隙（包含行、列、网格布局）	Number	-
breakPoints	断点信息	`BreakPoint[]`	-
children	子元素	ReactNode	-
onBreakPointChange	断点变更回调	(curBreakPoint, oldBreakPoint, breakPoints)=>void

interface BreakPoint {
  /**
   *  断点宽度(包含)
   */
  width: number;
  /**
   * 最大展示宽, 默认为断点宽度
   */
  maxContentWidth: number | string;
  /**
   * 列数
   */
  numberOfColumns: 1 | 2 | 4 | 8 | 12 | 16 | 24;
}

Page.Header

序章

参数	含义	类型	默认值
mode	背景色 'lining' / 'surface' / 'transparent'	Enum	-
noPadding	移除内边距	Boolean	false
noBottomPadding	隐藏默认底部内边距	Boolean	false
noBottomMargin	隐藏与内容部分的间隙(外边距)	Boolean	false
divider	展示分割线	Boolean	-
fullWidth	保持全屏宽（不受断点 `maxContentWidth` 限制）	Boolean	false
children	子元素	ReactNode	-

Page.Footer

终章

参数	含义	类型	默认值
mode	背景色 'lining' / 'surface' / 'transparent'	Enum	-
noTopPadding	隐藏默认顶部内边距	Boolean	-
divider	展示分割线	Boolean	-
fullWidth	保持全屏宽（不受断点 `maxContentWidth` 限制）	Boolean	false
children	子元素	ReactNode	-

Page.Content

内容

参数	含义	类型	默认值
minHeight	页面的最小高度，例如 calc(100vh - 52px)	Number/String	-
children	子元素	ReactNode	-

Page.Aside

右侧边栏，如有 Content，需为 Content 的子元素

参数	含义	类型	默认值
width	宽度	Number/String	-
children	子元素	ReactNode	-

Page.Nav

左侧导航，如有 Content，需为 Content 的子元素

参数	含义	类型	默认值
width	宽度	Number/String	-
children	子元素	ReactNode	-

Section

章

参数	含义	类型	默认值
title	标题	ReactNode	-
titleAlign	标题位置，可选值 left/center	Enum	-
extra	附加区域（标题右侧）	ReactNode	-
gap	自定义内部区块（Block）的间隙	Number	-
children	子元素	ReactNode	-

Block

区块（节）

参数	含义	类型	默认值
mode	背景模式，可选值 transparent(自动移除内边距和标题)/surface/lining	Enum	-
title	标题	ReactNode	-
titleAlign	标题位置，可选值 left/center	Enum	-
extra	附加区域（标题右侧）	ReactNode	-
divider	展示标题与内容之间的分割线	Boolean	-
bordered	展示边框	Boolean	-
noPadding	移除内边距	Boolean	false
span	列宽	Number	-
width	指定宽度	Number	-
contentClassName	有标题时，内容区域的样式名	string	-
contentStyle	有标题时，内容区域的自定义样式	CSSProperties	-
children	子元素	ReactNode	-

Row

行

参数	含义	类型	默认值
width	指定宽度	Number/String	-
height	指定高度	Number/String	-
autoFit	根据内容自适应宽度（当作为行列布局的子元素时生效）	Boolean	-
gap	自定义元素间间距	Number	-
verAlign	垂直对齐方式，可选值：top/middle/bottom/stretch/baseline	Enum	-
children	子元素	ReactNode	-

Col

列

参数	含义	类型	默认值
autoFit	根据内容自适应宽度（当作为行列布局的子元素时生效）	Boolean	-
width	指定宽度	Number/String	-
height	指定高度	Number/String	-
gap	自定义元素间间距	Number	-
align	水平对齐方式，可选值：left/center/right/stretch	Enum	-
children	子元素	ReactNode	-

Grid

网格

参数	含义	类型	默认值
cols	指定列数	number
rows	指定行数	number
minWidth	单元格最小宽度	number
maxWidth	单元格最大宽度	number
rowGap	单元格行间距, 可选值: small/medium/large/数值	Enum
colGap	单元格列间距, 可选值: small/medium/large/数值	Enum
renderItem	手动渲染单个单元格内容	(rowIndex,colIndex)=>RaxNode
children	子元素，默认应为 `Cell`	RaxNode	-

Cell

单元格，其内容默认为 flex 纵向布局

参数	含义	类型	默认值
width	指定宽度	Number/String	-
height	指定高度	Number/String	-
autoFit	根据内容自适应宽度（当作为行列布局的子元素时生效）	Boolean	-
gap	自定义内部元素的行解析	Number	0
align	内容水平对齐方式，可选值: left/center/right	Enum	-
verAlign	内容垂直对齐方式，可选值: top/middle/bottom/space-between/space-around/space-evenly	Enum	-
block	使用 `block` 布局	Boolean	-
children	子元素	ReactNode	-

Space

空间间隙

参数	说明	类型	默认值
direction	组件自身布局模式，可选： `hoz/ver`	Enum	hoz
size	尺寸，可选: `small/medium/large/Number`	Enum	medium
children	子元素	ReactNode

文本

参数	说明	类型	默认值
direction	组件自身布局模式，可选： `hoz/ver`	Enum	hoz
size	尺寸，可选: `small/medium/large/Number`	Enum	medium
children	子元素	RaxNode

P

段落

参数	说明	类型	默认值
align	水平方向对齐模式 left/center/right/space-between/space-around/space-evenly	Enum	'left'
verAlign	垂直方向对齐模式 top/middle/bottom/baseline	Enum	'baseline'
spacing	子元素间保持水平间距, 可选： small/medium/large/false	Enum	medium
hasVerSpacing	除 `文本` 节点外子元素间保持垂直间距	Boolean	true
beforeMargin	段前外边距（作为第一个子元素时无效）	Number	0
afterMargin	段后外边距（作为最后一个子元素时无效）	Number	0
children	子元素	ReactNode	-

Text

文本

参数	说明	类型	默认值
type	约束字体大小 overline/caption/body1/body2/title/h1/h2/h3/h4/h5/h6	Enum	body2
delete	添加删除线样式	Boolean	false
mark	添加标记样式	Boolean	false
underline	添加下划线样式	Boolean	false
strong	是否加粗	Boolean	false
code	添加代码样式	Boolean	false
component	设置标签类型	custom	'span'
color	颜色	String	-

CSS 变量

自然布局默认引入了 Fusion 设计系统的 Design Tokens。布局可自定义 CSS Variables 如下，可基于实际情况修改：

变量名	说明	默认值
`--color-transparent`	前景色	`transparent`
`--color-surface`	前景色	`#fff`
`--color-lining`	衬色	`#f0f0f0`
`--page-padding-lr`	页面左右内边距	`var(--s-5)`
`--page-padding-tb`	页面上下内边距	`var(--s-5)`
`--page-header-divider-color`	header 分割线颜色	`var(--color-line1-1)`
`--page-block-corner`	区块圆角尺寸	`var(--corner-0)`
`--page-block-padding-lr`	区块左右内边距	`var(--s-3)`
`--page-block-padding-tb`	区块上下内边距	`var(--s-3)`
`--page-section-title-font-color`	章节标题颜色	`var(--color-text1-4)`
`--page-section-extra-font-color`	章节附加内容文本颜色	`var(--color-text1-2)`
`--page-block-title-font-color`	区块标题颜色	`var(--color-text1-4)`
`--page-block-extra-font-color`	区块附加内容文本颜色	`var(--color-text1-2)`
`--page-section-gap`	章间隙	`var(--s-3)`
`--page-block-gap`	区块间隙	`var(--s-2)`
`--page-block-border-width`	区块边框宽度	`var(--line-1)`
`--page-block-border-color`	区块边框颜色	`var(--color-line1-1)`
`--page-grid-gap`	小布局间隙	`var(--s-1)`
`--page-p-small-spacing`	段落子元素的水平小间距	`var(--s-1)`
`--page-p-medium-spacing`	段落子元素的水平中间距	`var(--s-2)`
`--page-p-large-spacing`	段落子元素的水平大间距	`var(--s-4)`
`--page-p-el-margin`	段落子元素的上下间距	`var(--s-1)`
`--page-p-font-color`	段落默认字体色	`var(--color-text1-4)`

基本结构

自然布局主要解决页面内容区(main 区域)的布局，不解决 Shell 层级，一般每个业务线都会有自己现成的吊顶和布局。

Section 1

Section extra

Block 1

Block

Block 2

Block

Block Full

Block

Section 2

Block

Section 1

Block

Section 2

Block

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Icon } from '@alifd/next';
import { Page, Section, Block, Row, Col, Cell, P, Text } from '@alifd/layout';

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

const { Header, Content, Footer, Nav, Aside } = Page;

const App = () => {
  return (
    <>
      <Page style={{ border: '3px solid black', borderRadius: 12, overflow: 'hidden' }}>
        <Header>
          <Cell align="center">
            <Text type="h5">Header</Text>
          </Cell>
        </Header>
        <Section title="Section 1" extra="Section extra">
          <Block title="Block 1" span={9} divider extra={<Icon type="prompt" size="small" />}>
            <Cell>
              <Text>Block</Text>
            </Cell>
          </Block>
          <Block title="Block 2" span={3} divider>
            <Cell>
              <Text>Block</Text>
            </Cell>
          </Block>
          <Block title="Block Full" divider>
            <Cell>
              <Text>Block</Text>
            </Cell>
          </Block>
        </Section>
        <Section title="Section 2">
          <Block>
            <Cell>
              <Text>Block</Text>
            </Cell>
          </Block>
        </Section>
        <Footer>
          <Cell align="center">
            <Text type="h5">Footer</Text>
          </Cell>
        </Footer>
      </Page>
      <br />
      <Page style={{ border: '3px solid black', borderRadius: 12, overflow: 'hidden' }}>
        <Header>
          <Cell align="center">
            <Text type="h5">Header</Text>
          </Cell>
        </Header>
        <Content>
          <Nav>
            <Block>
              <Cell align="center" verAlign="middle" style={{ height: '80vh' }}>
                <Text type="h5">Nav</Text>
              </Cell>
            </Block>
          </Nav>
          <Aside>
            <Block>
              <Cell align="center" verAlign="middle" style={{ height: '80vh' }}>
                <Text type="h5">Aside</Text>
              </Cell>
            </Block>
          </Aside>
          <Section title="Section 1">
            <Block title="Block">
              <Cell style={{ height: '40vh' }}></Cell>
            </Block>
          </Section>
          <Section title="Section 2">
            <Block title="Block">
              <Cell>
                <Text>Block</Text>
              </Cell>
            </Block>
          </Section>
        </Content>
        <Footer>
          <Cell align="center">
            <Text type="h5">Footer</Text>
          </Cell>
        </Footer>
      </Page>
    </>
  );
};

ReactDOM.render(<App />, mountNode);

案例1 - 控制面板

页面布局示例

总销售额

¥ 126,560

日销售额￥12,423

访问量

88,356

日访问量 1,234

门店量

6,356

转化率 60%

门店活动效果

78%

周同比 12% ▲

日同比11% ▼

活动实时情况

今日交易总额

124,543,233元

销售目标完成率

92%

活动剩余时间

47:05:07:495

每秒交易总额

234 元

销售额类别占比

占位图

销售额类别占比

占位图

销售额类别占比

占位图

消费数据

占位图

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Breadcrumb, Button, Divider, Balloon, Icon, Progress, Slider } from '@alifd/next';
import { Page, Section, Block, Row, Col, Cell, P, Text } from '@alifd/layout';

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

const { Header, Content, Footer, Nav, Aside } = Page;

const slides = [
  {
    url: 'https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png',
    text: 'Tape Player Skin Design Competition',
  },
  {
    url: 'https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg',
    text: 'Mobile Phone Taobao Skin Call',
  },
  {
    url: 'https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg',
    text: 'Design Enabling Public Welfare',
  },
  {
    url: 'https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg',
    text: 'Amoy Doll Design Competition',
  },
];

const App = () => {
  return (
    <Page sectionGap={16} blockGap={12} gridGap={8}>
      <Header fullWidth>
        <Breadcrumb>
          <Breadcrumb.Item>Dashboard</Breadcrumb.Item>
          <Breadcrumb.Item>自动布局</Breadcrumb.Item>
        </Breadcrumb>
        <P>
          <Text type="title">自动布局</Text>
          <Text type="body-1">页面自动布局能力</Text>
        </P>
        <P type="body-1">这是一个自动布局的描述信息</P>
      </Header>
      <Section>
        <Block span={3}>
          <Row>
            <Cell>
              <Text>总销售额</Text>
            </Cell>
            <Cell align="right" autoFit>
              <Balloon closable={false} trigger={<Icon type="prompt" size="small" />}>
                指标说明
              </Balloon>
            </Cell>
          </Row>
          <P type="headline">¥ 126,560</P>
          <P>
            <img
              src="https://img.alicdn.com/tfs/TB1eWP1O4D1gK0jSZFsXXbldVXa-468-78.png"
              width="100%"
              height="32"
            />
          </P>
          <Divider />
          <P type="body-1">日销售额 ￥12,423</P>
        </Block>
        <Block span={3}>
          <Row>
            <Cell>
              <Text>访问量</Text>
            </Cell>
            <Cell align="right">
              <Balloon closable={false} trigger={<Icon type="prompt" size="small" />}>
                指标说明
              </Balloon>
            </Cell>
          </Row>
          <P type="headline">88,356</P>
          <P>
            <img
              src="https://img.alicdn.com/tfs/TB1FJbkdCR26e4jSZFEXXbwuXXa-468-68.png"
              width="100%"
              height="32"
            />
          </P>
          <Divider />
          <P type="body-1">日访问量 1,234</P>
        </Block>
        <Block span={3}>
          <Row align="space-between">
            <Cell>
              <Text>门店量</Text>
            </Cell>
            <Cell align="right">
              <Balloon closable={false} trigger={<Icon type="prompt" size="small" />}>
                指标说明
              </Balloon>
            </Cell>
          </Row>
          <P type="headline">6,356</P>
          <P>
            <img
              src="https://img.alicdn.com/tfs/TB1eWP1O4D1gK0jSZFsXXbldVXa-468-78.png"
              width="100%"
              height="32"
            />
          </P>
          <Divider />
          <P type="body-1">转化率 60%</P>
        </Block>
        <Block span={3}>
          <Row align="space-between">
            <Cell>
              <Text>门店活动效果</Text>
            </Cell>
            <Cell align="right">
              <Balloon closable={false} trigger={<Icon type="prompt" size="small" />}>
                指标说明
              </Balloon>
            </Cell>
          </Row>
          <P type="headline">78%</P>
          <P>
            <Progress percent={78} textRender={() => ''} style={{ height: 32 }} />
          </P>
          <Divider />
          <Row>
            <Cell align="center">
              <P>
                周同比 12% <Text style={{ color: 'red' }}>▲</Text>
              </P>
            </Cell>
            <Cell align="center">
              <P>
                日同比11% <Text style={{ color: 'green' }}>▼</Text>
              </P>
            </Cell>
          </Row>
        </Block>
        <Block title="活动实时情况" span={9} rowSpan={2}>
          <Row>
            <Cell>
              <P style={{ width: '100%' }}>今日交易总额</P>
              <P style={{ width: '100%' }} verAlign="baseline">
                <Text type="headline">124,543,233</Text>
                <Text type="body-1">元</Text>
              </P>
            </Cell>
            <Cell>
              <P style={{ width: '100%' }}>销售目标完成率</P>
              <P style={{ width: '100%' }} type="headline">
                92%
              </P>
            </Cell>
            <Cell>
              <P style={{ width: '100%' }}>活动剩余时间</P>
              <P style={{ width: '100%' }} type="headline">
                47:05:07:495
              </P>
            </Cell>
            <Cell>
              <P style={{ width: '100%' }}>每秒交易总额</P>
              <P style={{ width: '100%' }} type="headline" verAlign="baseline">
                234 <Text type="body-1">元</Text>
              </P>
            </Cell>
          </Row>
          <P>
            <img src="https://s2.ax1x.com/2020/02/17/3iKU5q.png" width="100%" />
          </P>
        </Block>
        <Block span={3} title="销售额类别占比">
          <div> 占位图 </div>
        </Block>
        <Block span={3} title="销售额类别占比">
          <div> 占位图 </div>
        </Block>
        <Block span={4} title="销售额类别占比">
          <div style={{ height: 200 }}> 占位图 </div>
        </Block>
        <Block span={8} title="消费数据">
          {' '}
          <div style={{ height: 200 }}> 占位图 </div>{' '}
        </Block>
      </Section>
      <Footer mode="transparent" noTopPadding>
        <Col>
          <Cell>
            <P type="headline" align="center">
              相关链接
            </P>
          </Cell>
          <Row>
            <Cell>
              <P type="h6" align="center">
                官方物料
              </P>
              <P align="center">PC 组件库地址</P>
              <P align="center">Mobile 组件库地址</P>
              <P align="center">官方区块</P>
              <P align="center">官方模板</P>
            </Cell>
            <Cell>
              <P align="center" type="subhead">
                帮助中心
              </P>
              <P align="center">Fusion 帮助中心</P>
              <P align="center">
                <Text style={{ textAlign: 'center' }}>
                  您可以通过扫描二维码的方式加入 Fusion钉钉的问题反馈群
                </Text>
              </P>
              <P align="center">
                <img
                  src="https://img.alicdn.com/tfs/TB102cEdLb2gK0jSZK9XXaEgFXa-660-666.png"
                  width="170"
                />
              </P>
            </Cell>
            <Cell>
              <P align="center" type="subhead">
                开发者社区
              </P>
              <P align="center">
                <a href="https://github.com/alibaba-fusion/next">进入 Github</a>
              </P>
            </Cell>
            <Cell>
              <P align="center" type="subhead">
                相关资源
              </P>
              <P align="center">
                <a href="https://fusion.design/tool">FusionCool</a>
              </P>
              <P align="center">
                <a href="https://fusion.design/tool">Iceworks</a>
              </P>
            </Cell>
          </Row>
          <Cell>
            <Divider />
            <P align="center" type="caption">
              Alibaba Fusion Design
            </P>
            <P align="center" type="caption">
              Copyright © 2022 Fusion Team
            </P>
          </Cell>
        </Col>
      </Footer>
    </Page>
  );
};

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

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

案例2 - 门户

居中对齐 demo

Alibaba Fusion Design

企业级的中后台设计系统解决方案

精选设计系统站点

Fusion Design Pro

Deep Design Pro

InTiger Design

Fusion 的能力

企业级的中后台设计系统解决方案

基于对阿里集团中后台业务的总结和抽象，提供了一套开箱即用的核心模式

企业级的中后台设计系统解决方案

基于对阿里集团中后台业务的总结和抽象，提供了一套开箱即用的核心模式

企业级的中后台设计系统解决方案

基于对阿里集团中后台业务的总结和抽象，提供了一套开箱即用的核心模式

企业级的中后台设计系统解决方案

基于对阿里集团中后台业务的总结和抽象，提供了一套开箱即用的核心模式

优秀的团队都在使用 Fusion 助力产品研发

“通过对 Fusion 组件库进行封装 ICE，淘宝实现了组件库的全面中台化。极大提高了 B2C 平台的设计协同效率。”

Alibaba Fusion

更聪明的工作，让效率突飞猛进

Work smarter, as easy as blowing off dust

Fusion 官方物料（200px height 没生效)

Fusion Next PC 组件库

Fusion Mobile 组件库

Fusion 官方推荐组件

开发者社区

Fusion Github

在 Fusion Github 开发者社群您可以提 Issue 或贡献组件

案例3 - 门户2

居中对齐 demo

平台服务能力介绍

Fusion Design Pro

Deep Design Pro

InTiger Design

营销创意服务

春节营销主题活动
精选案例

内容标签

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Box, Button, Tab } from '@alifd/next';
import { Page, Block, Row, Col, Cell, Section, P, Text } from '@alifd/layout';

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

class App extends Component {
  render() {
    return (
      <div className="mock-body-portal">
        <Page minHeight="100vh" contentProps={{ noPadding: true }} style={{ background: '#000' }}>
          <Section
            style={{
              height: 460,
              background:
                "url('https://img.alicdn.com/imgextra/i4/O1CN01TPc6BR1jXbzrurETr_!!6000000004558-2-tps-3840-920.png') 50% 50% / cover no-repeat",
            }}
          >
            <Block mode="transparent" />
          </Section>
          <Section>
            <Block mode="transparent">
              <Cell verAlign="center" style={{ height: 160 }}>
                <P type="h2">
                  <Text color="white">平台服务能力介绍</Text>
                </P>
              </Cell>
              <Row>
                <Cell>
                  <P>
                    <img
                      src="https://img.alicdn.com/tfs/TB1MjfHAbr1gK0jSZFDXXb9yVXa-770-480.png"
                      style={{ maxWidth: 300 }}
                    />
                  </P>
                  <P align="left" verAlign="center">
                    <img
                      src="https://img.alicdn.com/tfs/TB1awiGBAT2gK0jSZFkXXcIQFXa-44-41.svg"
                      style={{ width: 32, height: 32 }}
                    />
                    <Text color="white">Fusion Design Pro</Text>
                  </P>
                </Cell>
                <Cell>
                  <P>
                    <img
                      src="https://img.alicdn.com/tfs/TB1lCHFAoz1gK0jSZLeXXb9kVXa-770-480.png"
                      style={{ maxWidth: 300 }}
                    />
                  </P>
                  <P align="left" verAlign="center">
                    <img
                      src="https://img.alicdn.com/tfs/TB1TOkPua61gK0jSZFlXXXDKFXa-53-53.png"
                      style={{ width: 32, height: 32 }}
                    />
                    <Text color="white">Deep Design Pro</Text>
                  </P>
                </Cell>
                <Cell>
                  <P>
                    <img
                      src="https://img.alicdn.com/tfs/TB180fGAeL2gK0jSZPhXXahvXXa-770-480.png"
                      style={{ maxWidth: 300 }}
                    />
                  </P>
                  <P align="left" verAlign="center">
                    <img
                      src="https://gw.alicdn.com/tfs/TB1MbBSvKH2gK0jSZFEXXcqMpXa-60-56.png"
                      style={{ width: 32, height: 32 }}
                    />
                    <Text color="white">InTiger Design</Text>
                  </P>
                </Cell>
              </Row>
            </Block>
            <Block mode="transparent">
              <Cell verAlign="center" style={{ height: 160 }}>
                <P type="h2">
                  <Text color="white">营销创意服务</Text>
                </P>
              </Cell>
              <Box spacing={20}>
                <Tab>
                  <Tab.Item title="春节营销主题活动">
                    <Box style={{ height: 400 }}>
                      <Text color="white">内容标签</Text>
                    </Box>
                  </Tab.Item>
                  <Tab.Item title="精选案例">
                    <Box style={{ height: 400 }}>
                      <Text color="white">内容标签</Text>
                    </Box>
                  </Tab.Item>
                </Tab>
              </Box>
            </Block>
          </Section>
        </Page>
      </div>
    );
  }
}

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

.mock-body-portal {
  border: 3px solid black;
  border-radius: 12px;
  overflow: hidden;
  --page-max-content-width: 1000px;
}

案例4 - 表单

表单

标签在上

单据号

选择业务类型

收款方

收票状态

单据状态

单据备注

提交时间:

标签在左侧

单据号

选择业务类型

收款方(对齐)

收票状态

单据状态

单据备注

提交时间

分步表单

1
填写转账信息
2
确认转账信息
3
完成

付款账户:frankqian

收款账户:

收款人姓名:

转账金额:￥

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {
  Button,
  Table,
  Pagination,
  Icon,
  Breadcrumb,
  Select,
  Input,
  DatePicker,
  Step,
} from '@alifd/next';
import { Page, Section, Block, Grid, Row, Col, Cell, P, Text } from '@alifd/layout';

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

const { Header } = Page;

class App extends Component {
  render() {
    return (
      <Page breakPoints={[{ width: Infinity, maxContentWidth: 1000, numberOfColumns: 12 }]}>
        <Header>
          <Breadcrumb>
            <Breadcrumb.Item>表单页</Breadcrumb.Item>
            <Breadcrumb.Item>表单布局</Breadcrumb.Item>
          </Breadcrumb>
          <P>
            <Text type="h4">表单布局</Text>
            <Text type="body1">Form Layout</Text>
          </P>
          <P>描述组件之间的间距关系</P>
        </Header>

        <Section>
          <Block title="标签在上">
            <Col>
              <Grid cols={4}>
                <Cell>
                  <P>单据号</P>
                  <Select showSearch placeholder="输入内容进行搜索" />
                </Cell>
                <Cell>
                  <P>选择业务类型</P>
                  <Select placeholder="选择业务类型" />
                </Cell>
                <Cell>
                  <P>收款方</P>
                  <Input state="error" style={{ width: '100%' }} />
                </Cell>
                <Cell>
                  <P>收票状态</P>
                  <Input placeholder="输入内容" style={{ width: '100%' }} />
                </Cell>
                <Cell colSpan={4}>
                  <P>单据状态</P>
                  <Select placeholder="选择业务类型" />
                </Cell>
                <Cell colSpan={4}>
                  <P>单据备注</P>
                  <Input placeholder="输入内容" style={{ width: '100%' }} />
                </Cell>
                <Cell colSpan={4}>
                  <P>提交时间:</P>
                  <DatePicker style={{ width: '100%' }} />
                </Cell>
              </Grid>
              <Row verAlign="middle">
                <P hasVerSpacing={false}>
                  <Button type="primary">查询</Button>
                  <Button>导出</Button>
                </P>
                <Cell autoFit>
                  <Button text>
                    展开 <Icon type="arrow-down" />
                  </Button>
                </Cell>
              </Row>
            </Col>
          </Block>

          <Block title="标签在左侧">
            <Col>
              <Grid cols={3}>
                <Cell>
                  <Row verAlign="middle">
                    <Cell autoFit>
                      <Text align="right" style={{ width: 100 }}>
                        单据号
                      </Text>
                    </Cell>
                    <Select showSearch placeholder="输入内容进行搜索" />
                  </Row>
                </Cell>
                <Cell>
                  <Row verAlign="middle">
                    <Cell autoFit>
                      <Text align="right" style={{ width: 100 }}>
                        选择业务类型
                      </Text>
                    </Cell>
                    <Select showSearch placeholder="选择业务类型" />
                  </Row>
                </Cell>
                <Cell>
                  <Row>
                    <Cell autoFit>
                      <Text align="right" style={{ width: 100 }}>
                        收款方(对齐)
                      </Text>
                    </Cell>
                    <Input state="error" />
                  </Row>
                </Cell>
                <Cell>
                  <Row verAlign="middle">
                    <Cell autoFit>
                      <Text align="right" style={{ width: 100 }}>
                        收票状态
                      </Text>
                    </Cell>
                    <Input placeholder="输入内容" />
                  </Row>
                </Cell>
                <Cell colSpan={4}>
                  <Row verAlign="middle">
                    <Cell autoFit>
                      <Text align="right" style={{ width: 100 }}>
                        单据状态
                      </Text>
                    </Cell>
                    <Select placeholder="选择业务类型" />
                  </Row>
                </Cell>
                <Cell colSpan={4}>
                  <Row verAlign="middle">
                    <Cell autoFit>
                      <Text align="right" style={{ width: 100 }}>
                        单据备注
                      </Text>
                    </Cell>
                    <Input placeholder="输入内容" />
                  </Row>
                </Cell>
                <Cell colSpan={4}>
                  <Row verAlign="middle">
                    <Cell autoFit>
                      <Text align="right" style={{ width: 100 }}>
                        提交时间
                      </Text>
                    </Cell>
                    <DatePicker.RangePicker />
                  </Row>
                </Cell>
              </Grid>
              <P align="right" hasVerSpacing={false}>
                <Button type="primary">查询</Button>
                <Button>导出</Button>
                <Button text>
                  展开 <Icon type="arrow-down" />
                </Button>
              </P>
            </Col>
          </Block>

          <Block title="分步表单">
            <Col>
              <Cell>
                <Step shape="circle" labelPlacement="hoz">
                  <Step.Item title="填写转账信息"></Step.Item>
                  <Step.Item title="确认转账信息"></Step.Item>
                  <Step.Item title="完成"></Step.Item>
                </Step>
              </Cell>
              <Cell gap={12} style={{ width: 500, margin: '0 auto' }}>
                <P verAlign="middle">
                  <Text style={{ width: 100, textAlign: 'right' }}>付款账户:</Text>
                  <Select placeholder="选择付款账户" defaultValue="frankqian" />
                </P>

                <P verAlign="middle">
                  <Text style={{ width: 100, textAlign: 'right' }}>收款账户:</Text>
                  <Input placeholder="选择付款账户" />
                </P>
                <P verAlign="middle">
                  <Text style={{ width: 100, textAlign: 'right' }}>收款人姓名:</Text>
                  <Input placeholder="收款人姓名" defaultValue="frankqian" />
                </P>
                <P verAlign="middle">
                  <Text style={{ width: 100, textAlign: 'right' }}>转账金额:</Text>
                  <Input placeholder="转账金额" innerBefore="￥" defaultValue="500" />
                </P>
                <P>
                  <Text align="right" style={{ width: 100 }} />
                  <Button type="primary">下一步</Button>
                </P>
              </Cell>
            </Col>
          </Block>
        </Section>
      </Page>
    );
  }
}

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

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

案例5 - 表格

表格相关的布局

帮助信息

Id	Title	Time
100306660940	Quotation for 1PCS Nano 3.0 controller compatible	2000
100306660941	Quotation for 1PCS Nano 4.0 controller compatible	2001
100306660942	Quotation for 1PCS Nano 5.0 controller compatible	2002
100306660943	Quotation for 1PCS Nano 6.0 controller compatible	2003
100306660944	Quotation for 1PCS Nano 7.0 controller compatible	2004

1/10到第页

锁列 Table 问题处理

Id	Data	Data	Data	Data	State	Action

30000	$13.02	$13.02	$13.02	$13.02	normal
30000	$16.02	$16.02	$16.02	$16.02	normal
30002	$63.0002	$63.0002	$63.0002	$63.0002	error

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Button, Table, Pagination, Icon, Breadcrumb } from '@alifd/next';
import { Page, Section, Block, Row, Col, P, Cell, Text } from '@alifd/layout';

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

const { Header } = Page;

const dataSourceGen = () => {
  const result = [];
  for (let i = 0; i < 5; i++) {
    result.push({
      title: { name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible` },
      id: 100306660940 + i,
      time: 2000 + i,
    });
  }
  return result;
};
const cellRender = (value, index, record) => {
  return (
    <P type="caption">
      <Button type="primary" text>
        删除
      </Button>
      <Button type="primary" text>
        编辑
      </Button>
    </P>
  );
};

const columns = new Array(4).fill({
  dataIndex: 'data',
  title: 'Data',
  width: 200,
});
columns.unshift({
  dataIndex: 'id',
  title: 'Id',
  width: 100,
  lock: 'left',
});
columns.push({
  dataIndex: 'state',
  title: 'State',
  width: 200,
});
columns.push({
  title: 'Action',
  width: 100,
  align: 'center',
  cell: () => <Button>delete</Button>,
  lock: 'right',
});

const dataSource = [
  {
    id: 30000,
    data: '$13.02',
    state: 'normal',
  },
  {
    id: 30001,
    data: '$16.02',
    state: 'normal',
  },
  {
    id: 30002,
    data: '$63.0002',
    state: 'error',
  },
];

const orderList = [
  {
    id: 1,
    name: '蓝瓶咖啡线下体验店室内设计1',
    state: '进行中',
    level: 'high',
  },
  {
    id: 2,
    name: '双12投放 Banner',
    state: '进行中',
    level: 'high',
  },
  {
    id: 3,
    name: 'Global 大促活动',
    state: '进行中',
    level: 'high',
  },
  {
    id: 4,
    name: 'Banner 拓展',
    state: '进行中',
    level: 'middle',
  },
  {
    id: 5,
    name: '类目市场宣传设计',
    state: '待处理',
    level: 'low',
  },
  {
    id: 6,
    name: '类目市场宣传设计',
    state: '待处理',
    level: 'low',
  },
  {
    id: 7,
    name: '类目市场宣传设计',
    state: '待处理',
    level: 'low',
  },
];
const timeLineList = [
  {
    planName: '财经周会',
    planAddress: '深圳 T4-4-1；杭州 7-4-9-N',
    planTime: '09:00',
    planDuaring: '2小时',
  },
  {
    planName: '财经周会',
    planAddress: '深圳 T4-4-1；杭州 7-4-9-N',
    planTime: '11:00',
    planDuaring: '2小时',
  },
];
const colorMap = {
  high: 'red',
  middle: 'yellow',
  low: 'green',
};
const renderLevel = (text, index) => (
  <span key={text + index.toString()}>
    <Tag size="small" color={colorMap[text]}>
      {text}
    </Tag>
  </span>
);

class App extends Component {
  render() {
    return (
      <Page breakPoints={[{ width: Infinity, maxContentWidth: 1000, numberOfColumns: 12 }]}>
        <Header>
          <Breadcrumb>
            <Breadcrumb.Item>列表页</Breadcrumb.Item>
            <Breadcrumb.Item>查询表格</Breadcrumb.Item>
          </Breadcrumb>
          <P align="baseline">
            <Text type="title">组件间距</Text>
            <Text type="body-1">Component Spacing</Text>
          </P>
          <P>描述组件之间的间距关系</P>
        </Header>
        <Section>
          <Block>
            <Col>
              <Row verAlign="middle">
                <Cell>
                  <P>
                    <Button type="primary">批量提交</Button>
                    <Button>批量删除</Button>
                    <Button>批量下载</Button>
                    <Icon type="help" size="small" />
                    <Text>帮助信息</Text>
                  </P>
                </Cell>
                <Cell autoFit>
                  <P align="right">
                    <Icon size="small" type="set" />
                    <Icon size="small" type="filter" />
                    <Icon size="small" type="arrow-down" />
                  </P>
                </Cell>
              </Row>
              <Cell>
                <Table dataSource={dataSourceGen()} rowSelection={{}} style={{ width: '100%' }}>
                  <Table.Column title="Id" htmlTitle="Unique Id" dataIndex="id" />
                  <Table.Column title="Title" dataIndex="title.name" />
                  <Table.Column title="Time" dataIndex="time" />
                  <Table.Column title="Operation" cell={cellRender} />
                </Table>
              </Cell>
              <Cell align="right">
                <Pagination />
              </Cell>
            </Col>
          </Block>
          <Block title="锁列 Table 问题处理">
            <Table
              type="primary"
              dataSource={dataSource}
              cellProps={(rowIndex, colIndex) => {
                if (colIndex === 0) {
                  return {
                    colSpan: 1,
                    rowSpan: 2,
                  };
                }
                if (colIndex === columns.length - 1) {
                  return {
                    colSpan: 1,
                    rowSpan: 3,
                  };
                }
              }}
            >
              {columns.map((col, i) => {
                return <Table.Column key={i} {...col} />;
              })}
            </Table>
          </Block>
        </Section>
      </Page>
    );
  }
}

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

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

案例6 - 工作台

页面布局示例

动态

阮小五在设计中台新建项目 Fusion Design（「在」的间距丢了）

4小时前

阮小五将新版本迭代更新为已发布（lastchild 间距问题）

4小时前

我的日程

Sun	Mon	Tue	Wed	Thu	Fri	Sat
30	31	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	1	2	3
4	5	6	7	8	9	10

共 2 个日程

09:00
2小时
财经周会
深圳 T4-4-1；杭州 7-4-9-N
11:00
2小时
财经周会
深圳 T4-4-1；杭州 7-4-9-N

进行中的项目

任务名称	所属阶段	优先级
蓝瓶咖啡线下体验店室内设计1	进行中	high
双12投放 Banner	进行中	high
Global 大促活动	进行中	high
Banner 拓展	进行中	middle
类目市场宣传设计	待处理	low
类目市场宣传设计	待处理	low
类目市场宣传设计	待处理	low

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {
  Breadcrumb,
  Avatar,
  Button,
  Divider,
  Balloon,
  Icon,
  Progress,
  Slider,
  Table,
  Tag,
  Calendar,
  Timeline,
} from '@alifd/next';
import { Page, Section, Block, Row, Col, Cell, P, Text } from '@alifd/layout';

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

const { Header, Content, Footer, Nav, Aside } = Page;

const orderList = [
  {
    id: 1,
    name: '蓝瓶咖啡线下体验店室内设计1',
    state: '进行中',
    level: 'high',
  },
  {
    id: 2,
    name: '双12投放 Banner',
    state: '进行中',
    level: 'high',
  },
  {
    id: 3,
    name: 'Global 大促活动',
    state: '进行中',
    level: 'high',
  },
  {
    id: 4,
    name: 'Banner 拓展',
    state: '进行中',
    level: 'middle',
  },
  {
    id: 5,
    name: '类目市场宣传设计',
    state: '待处理',
    level: 'low',
  },
  {
    id: 6,
    name: '类目市场宣传设计',
    state: '待处理',
    level: 'low',
  },
  {
    id: 7,
    name: '类目市场宣传设计',
    state: '待处理',
    level: 'low',
  },
];
const timeLineList = [
  {
    planName: '财经周会',
    planAddress: '深圳 T4-4-1；杭州 7-4-9-N',
    planTime: '09:00',
    planDuaring: '2小时',
  },
  {
    planName: '财经周会',
    planAddress: '深圳 T4-4-1；杭州 7-4-9-N',
    planTime: '11:00',
    planDuaring: '2小时',
  },
];
const colorMap = {
  high: 'red',
  middle: 'yellow',
  low: 'green',
};
const renderLevel = (text, index) => (
  <span key={text + index.toString()}>
    <Tag size="small" color={colorMap[text]}>
      {text}
    </Tag>
  </span>
);

const App = () => {
  return (
    <Page
      breakPoints={[
        {
          width: 960,
          maxContentWidth: 960,
          numberOfColumns: 8,
        },
        {
          width: Infinity,
          maxContentWidth: 1400,
          numberOfColumns: 12,
        },
      ]}
    >
      <Header fullWidth>
        <Cell gap={8}>
          <Breadcrumb>
            <Breadcrumb.Item>Dashboard</Breadcrumb.Item>
            <Breadcrumb.Item>工作台</Breadcrumb.Item>
          </Breadcrumb>
          <Row>
            <Cell style={{ width: 80 }}>
              <Avatar
                size="large"
                src="https://img.alicdn.com/tfs/TB1XdnvvUY1gK0jSZFCXXcwqXXa-500-500.png"
              />
            </Cell>
            <Cell>
              <P type="title">早上好, 潕量 !</P>
              <P type="body-1">
                美好的一天，从智能、创意、无缝的协作开始。我们将专注处理你专注的事情!
              </P>
            </Cell>
            <Row style={{ width: 300 }}>
              <Cell>
                <P>项目数</P>
                <P type="headline">56</P>
              </Cell>
              <Cell>
                <P>团队内排名</P>
                <P type="headline" verAlign="baseline">
                  8/24
                </P>
              </Cell>
              <Cell>
                <P>项目数</P>
                <P type="headline">56</P>
              </Cell>
            </Row>
          </Row>
        </Cell>
      </Header>

      <Section>
        <Block title="动态" span={8} style={{ minHeight: 400 }} divider>
          <P>
            <Row>
              <Cell width={80}>
                <Avatar
                  size="large"
                  src="https://img.alicdn.com/tfs/TB1XdnvvUY1gK0jSZFCXXcwqXXa-500-500.png"
                />
              </Cell>
              <Cell>
                <P>
                  阮小五 在 <a href="">设计中台</a> 新建项目 <a href="">Fusion Design</a>
                  （「在」的间距丢了）
                </P>
                <P>4小时前</P>
              </Cell>
            </Row>
          </P>
          <Divider />
          <P>
            <Row>
              <Cell width={80}>
                <Avatar
                  size="large"
                  src="https://img.alicdn.com/tfs/TB1XdnvvUY1gK0jSZFCXXcwqXXa-500-500.png"
                />
              </Cell>
              <Cell>
                <P>
                  阮小五 将 <a href="">新版本迭代</a> 更新为已发布（lastchild 间距问题）
                </P>
                <P>4小时前</P>
              </Cell>
            </Row>
          </P>
        </Block>

        <Block title="我的日程" span={4} divider>
          <Calendar shape="panel" />
          <P>
            共 <a href=""> 2 </a> 个日程
          </P>
          <Timeline>
            {timeLineList.map((item) => (
              <Timeline.Item
                key={item.planTime}
                title={item.planName}
                content={item.planAddress}
                timeLeft={
                  <>
                    <div>{item.planTime}</div>
                    <div>{item.planDuaring}</div>
                  </>
                }
              />
            ))}
          </Timeline>
        </Block>
        <Block title="进行中的项目" divider>
          <Table
            dataSource={orderList}
            hasBorder={false}
            rowSelection={{
              getProps: (record, index) => ({
                children: (
                  <span key={index} className="next-table-cell-wrapper">
                    {record.name}
                  </span>
                ),
              }),
              columnProps: () => ({
                width: 330,
              }),
              titleAddons: () => <span className="next-table-cell-wrapper">任务名称</span>,
            }}
          >
            <Table.Column title="所属阶段" dataIndex="state" width={230} />
            <Table.Column title="优先级" dataIndex="level" cell={renderLevel} width={150} />
          </Table>
        </Block>
      </Section>

      <Footer mode="lining" divider>
        <P type="caption" align="center">
          Alibaba Fusion Design
          <br />
          Copyright © 2022 Fusion Team
        </P>
      </Footer>
    </Page>
  );
};

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

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

响应式和断点

通过断点，可以实现区块的响应式布局

断点：

调整窗口尺寸，查看不同断点下的显示效果。窗口宽度:

1264px

最大宽度	最大内容宽度	列数
750	750	4
960	960	8
1200	1200	12
Infinity	1200	12

响应布局(1w x 12)

span=1

响应布局(2,4,6)

span=2

span=4

span=6

动态布局演示(4w x 6)

span=4

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Page, Section, Block, Cell, P, Text, BreakPoints } from '@alifd/layout';
import { Table, Tag } from '@alifd/next';
import { throttle } from 'lodash-es';

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

const cellProps = {
  align: 'center',
  verAlign: 'middle',
  style: { background: '#f2f2f2', height: 60 },
};

const breakPoints = [
  {
    width: 750,
    maxContentWidth: 750,
    numberOfColumns: 4,
  },
  {
    width: 960,
    maxContentWidth: 960,
    numberOfColumns: 8,
  },
  {
    width: 1200,
    maxContentWidth: 1200,
    numberOfColumns: 12,
  },
  {
    width: Infinity,
    maxContentWidth: 1200,
    numberOfColumns: 12,
  },
];

const App = () => {
  const [availWidth, setAvailWidth] = useState(document.body.clientWidth);
  const [curBreakPoint, setBreakPoint] = useState(undefined);

  const resize = throttle(() => {
    setAvailWidth(document.body.clientWidth);
  }, 200);

  useEffect(() => {
    window.addEventListener('resize', resize, false);

    return () => {
      window.removeEventListener('resize', resize);
    };
  }, []);

  return (
    <Page
      breakPoints={breakPoints}
      onBreakPointChange={(bp) => {
        setBreakPoint(bp);
      }}
    >
      <Section>
        <Block>
          <P type="h6">断点：</P>
          <P>
            调整窗口尺寸，查看不同断点下的显示效果。 窗口宽度:
            <Tag size="small" type="primary" color="green">
              {availWidth}px
            </Tag>
          </P>
          <Cell style={{ textIndent: '1em' }}>
            <Table
              dataSource={breakPoints}
              cellProps={(rowIndex, colIndex, dataIndex, record) => {
                if (curBreakPoint?.width === record?.width) {
                  return {
                    style: {
                      background: '#BBDEFB',
                    },
                  };
                }
                return {};
              }}
            >
              <Table.Column title="最大宽度" dataIndex="width" />
              <Table.Column title="最大内容宽度" dataIndex="maxContentWidth" />
              <Table.Column title="列数" dataIndex="numberOfColumns" />
            </Table>
          </Cell>
        </Block>
      </Section>

      <Section title="响应布局(1w x 12)">
        {Array.from(new Array(12)).map((_, key) => (
          <Block key={'span12-' + key} span={1}>
            <Cell {...cellProps}>
              <Text>span=1</Text>
            </Cell>
          </Block>
        ))}
      </Section>

      <Section title="响应布局(2,4,6)">
        <Block span={2}>
          <Cell {...cellProps}>
            <Text>span=2</Text>
          </Cell>
        </Block>
        <Block span={4}>
          <Cell {...cellProps}>
            <Text>span=4</Text>
          </Cell>
        </Block>
        <Block span={6}>
          <Cell {...cellProps}>
            <Text>span=6</Text>
          </Cell>
        </Block>
      </Section>
      <Section title="动态布局演示(4w x 6)">
        {Array.from(new Array(6)).map((_, index) => (
          <Block key={`block-${index}`} span={4}>
            <Cell {...cellProps}>
              <Text>span=4</Text>
            </Cell>
          </Block>
        ))}
      </Section>
    </Page>
  );
};

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

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

区块

区块的样子

Simple Card

SubTitle

link

Lorem ipsum dolor sit amet, est viderer iuvaret perfecto et. Ne petentium quaerendum nec, eos ex recteque mediocritatem, ex usu assum legendos temporibus. Ius feugiat pertinacia an, cu verterem praesent quo.

Simple Card

SubTitle

link

Simple Card

SubTitle

link

常见的区块

标题

基础

标题

100% x 60

标题

说明文案

100% x 60

无标题

标题

分割线&标题居中

标题

100% x 60

透明模式

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {
  Avatar,
  Breadcrumb,
  Badge,
  Button,
  Balloon,
  Icon,
  Progress,
  ResponsiveGrid as RGrid,
} from '@alifd/next';
import { Page, Section, Block, Row, Col, P, Cell, Text } from '@alifd/layout';

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

const { Header } = Page;

const MockBlock = (props) => {
  return (
    <Cell align="center" verAlign="middle" className="mock-block-fullx60" {...props}>
      <P> {props.children || '100% x 60'}</P>
    </Cell>
  );
};

class App extends Component {
  render() {
    return (
      <Page breakPoints={[{ width: Infinity, maxContentWidth: 1000, numberOfColumns: 12 }]}>
        <Header>
          <P>
            <Breadcrumb>
              <Breadcrumb.Item>自然布局</Breadcrumb.Item>
              <Breadcrumb.Item>区块</Breadcrumb.Item>
            </Breadcrumb>
          </P>
          <P type="headline">区块</P>
        </Header>
        <Section>
          <Block
            span={3}
            title={
              <>
                <P type="h6">Simple Card</P>
                <P type="caption">SubTitle</P>
              </>
            }
            extra={<a href="#">link</a>}
          >
            <P>
              Lorem ipsum dolor sit amet, est viderer iuvaret perfecto et. Ne petentium quaerendum
              nec, eos ex recteque mediocritatem, ex usu assum legendos temporibus. Ius feugiat
              pertinacia an, cu verterem praesent quo.
            </P>
          </Block>

          <Block
            span={3}
            title={
              <>
                <P type="h6">Simple Card</P>
                <P type="caption">SubTitle</P>
              </>
            }
            extra={<a href="#">link</a>}
            divider
          >
            <P>
              Lorem ipsum dolor sit amet, est viderer iuvaret perfecto et. Ne petentium quaerendum
              nec, eos ex recteque mediocritatem, ex usu assum legendos temporibus. Ius feugiat
              pertinacia an, cu verterem praesent quo.
            </P>
          </Block>
          <Block span={3} noPadding>
            <Col gap={0}>
              <img
                src="https://img.alicdn.com/tfs/TB1FNIOSFXXXXaWXXXXXXXXXXXX-260-188.png"
                style={{ width: '100%' }}
              />
              <Cell style={{ padding: 20 }}>
                <Row verAlign="top">
                  <Cell>
                    <P type="h6">Simple Card</P>
                    <P type="caption">SubTitle</P>
                  </Cell>
                  <Cell autoFit>
                    <a href="#">link</a>
                  </Cell>
                </Row>
                <P>
                  Lorem ipsum dolor sit amet, est viderer iuvaret perfecto et. Ne petentium
                  quaerendum nec, eos ex recteque mediocritatem, ex usu assum legendos temporibus.
                  Ius feugiat pertinacia an, cu verterem praesent quo.
                </P>
              </Cell>
            </Col>
          </Block>
        </Section>
        <Section title="常见的区块">
          <Block span={3} title="标题">
            <MockBlock>基础</MockBlock>
          </Block>
          <Block span={3} title="标题" extra={<Icon type="arrow-right" size="xs" />}>
            <MockBlock />
          </Block>
          <Block span={3} title="标题" extra="说明文案">
            <MockBlock />
          </Block>
          <Block span={3}>
            <MockBlock>无标题</MockBlock>
          </Block>
          <Block span={3} title="标题" titleAlign="center" divider>
            <MockBlock>分割线&标题居中</MockBlock>
          </Block>
          <Block
            span={3}
            title={
              <P>
                <img
                  src="https://img.alicdn.com/tfs/TB1QS.4l4z1gK0jSZSgXXavwpXa-1024-1024.png"
                  style={{ width: 24, borderRadius: '50%' }}
                />
                <Text type="h6">标题</Text>
              </P>
            }
            extra={<Badge dot />}
          >
            <MockBlock />
          </Block>

          <Block span={3} mode="transparnet">
            <MockBlock>透明模式</MockBlock>
          </Block>
          <Block span={3} mode="transparnet" />
        </Section>
      </Page>
    );
  }
}

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

.mock-block-fullx60 {
  width: 100%;
  min-height: 60px;
  height: 100%;
  background: #f2f2f2;
  border: 1px dashed #ccc;
}
.mock-iframe {
  border: 3px solid black;
  border-radius: 12px;
  overflow: hidden;
}

段落

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

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 '@alifd/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,
);

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

字体

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

段落中的简写

段落中的纯文本

样式

默认标记代码加粗下划线~~删除线~~

颜色

赤橙黄绿蓝靛紫

尺寸

标题 1 标题 2标题 3标题 4标题 5标题 6正文 1正文 2水印超小字体

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

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

const { Header } = Page;

const App = () => {
  const [align, setAlign] = useState('left');

  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>
        <Block title="段落中的简写" span={3}>
          <P type="body2">段落中的纯文本</P>
        </Block>
        <Block span={3} title="样式">
          <Cell>
            <P>
              <Text>默认</Text>
              <Text mark>标记</Text>
              <Text code>代码</Text>
              <Text strong>加粗</Text>
              <Text underline>下划线</Text>
              <Text delete>删除线</Text>
            </P>
          </Cell>
        </Block>
        <Block span={3} title="颜色">
          <P>
            <Text color="red">赤</Text>
            <Text color="orange">橙</Text>
            <Text color="yellow">黄</Text>
            <Text color="green">绿</Text>
            <Text color="cyan">蓝</Text>
            <Text color="red">靛</Text>
            <Text color="purple">紫</Text>
          </P>
          <P>
            <Text backgroundColor="red">赤</Text>
            <Text backgroundColor="orange">橙</Text>
            <Text backgroundColor="yellow">黄</Text>
            <Text backgroundColor="green">绿</Text>
            <Text backgroundColor="cyan">蓝</Text>
            <Text backgroundColor="red">靛</Text>
            <Text backgroundColor="purple">紫</Text>
          </P>
        </Block>

        <Block span={3} title="尺寸">
          <Cell>
            <Text type="h1">标题 1 </Text>
            <Text type="h2">标题 2</Text>
            <Text type="h3">标题 3</Text>
            <Text type="h4">标题 4</Text>
            <Text type="h5">标题 5</Text>
            <Text type="h6">标题 6</Text>
            <Text type="body1">正文 1</Text>
            <Text type="body2">正文 2</Text>
            <Text type="caption">水印</Text>
            <Text type="overline">超小字体</Text>
          </Cell>
        </Block>
      </Section>
    </Page>
  );
};

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

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

Readme
基本结构
案例1 - 控制面板
案例2 - 门户
案例3 - 门户2
案例4 - 表单
案例5 - 表格
案例6 - 工作台
响应式和断点
区块
段落
字体