jdh-layout
v2.5.0
Published
基于 Fusion 设计系统的自然布局体系
Downloads
1
Maintainers
Readme
自然布局
用于快速完成页面布局体系 (低代码搭建或源码开发),目标是不写任何布局 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)
|