@alifd/layout
TypeScript icon, indicating that this package has built-in type declarations

2.4.1 • Public • Published

自然布局

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 -

终章

参数 含义 类型 默认值
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)

Package Sidebar

Install

npm i @alifd/layout

Weekly Downloads

87

Version

2.4.1

License

MIT

Unpacked Size

6.38 MB

Total Files

327

Last publish

Collaborators

  • jiaqiu_chen
  • soberz
  • whatever_lll
  • john-watson
  • eternalsky
  • mark-ck
  • lakerswgq
  • no-repeat
  • wwsun
  • aboutblank
  • bindoon
  • tao1991123
  • vicerwang
  • myronliu347
  • jdkahn
  • fusion-bot
  • sobear
  • lianmin
  • clarkxia
  • quanyin
  • jerryyxu
  • yellow2dong
  • alvinhui
  • andevery
  • luhengchang228
  • yuysmile
  • fd.xy
  • rax-publisher