@alifd/layout v2.4.1

自然布局

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

设计理念

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

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

预览

• 预览 Demo
• 阿里低代码搭建 Demo

安装

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

开发

1. 调试和预览 demo

npm run start

2. 启动低代码预览

npm run lowcode:dev

API

Page

页面

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

Page.Header

序章

Page.Footer

终章

Page.Content

内容

Page.Aside

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

Page.Nav

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

Section

章

Block

区块（节）

Row

行

Col

列

Grid

网格

Cell

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

Space

空间间隙

文本

P

段落

Text

文本

CSS 变量

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