Skip to content

alibaba-fusion/layout

Folders and files

NameName
Last commit message
Last commit date

Latest commit

author
光弘
Oct 12, 2023
ca9ef06 · Oct 12, 2023
Jun 15, 2023
Jun 15, 2023
Apr 14, 2023
Oct 12, 2023
Oct 12, 2023
Sep 22, 2022
Sep 22, 2022
Jun 15, 2023
Jul 27, 2023
Sep 22, 2022
Sep 22, 2022
Sep 22, 2022
Sep 22, 2022
Sep 22, 2022
Oct 12, 2023
Sep 22, 2022
Jul 25, 2023
Sep 22, 2022
Nov 28, 2022
Mar 2, 2023
Sep 22, 2022
Sep 22, 2022
Feb 20, 2023
Sep 22, 2022
Oct 12, 2023
Jul 25, 2023

Repository files navigation

自然布局

Fusion

用于快速完成页面布局体系 (低代码搭建或源码开发),目标是不写任何布局 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>
  );
}

开发

  1. 调试和预览 demo
npm run start
  1. 启动低代码预览
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)