Fighting DesignLayout 布局
处理常见的一些网页布局，实现快速搭建
基本使用
f-layout外层容器, 可以实现垂直、水平、嵌套布局f-main主体容器f-header头部容器f-aside侧栏容器f-footer底栏容器
基本布局
下面是由 Fighting Design 提供的几种常见的页面布局演示
开启
layout Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
direction | 排列方向 | LayoutDirection | horizontal vertical | —— |
Header Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
height | 高度 | string / number | —— | —— |
padding | 内边距 | string / number | —— | —— |
Main Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
padding | 内边距 | string / number | —— | —— |
Aside Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
width | 宽度 | string / number | —— | —— |
padding | 内边距 | string / number | —— | —— |
Footer Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
height | 高度 | string / number | —— | —— |
padding | 内边距 | string / number | —— | —— |
Interface
组件导出以下类型定义：
ts
import type {
AsideProps,
AsideInstance,
FooterInstance,
FooterProps,
HeaderInstance,
HeaderProps,
LayoutInstance,
LayoutProps,
LayoutDirection,
MainInstance,
MainProps
} from 'fighting-design'LayoutDirection
ts
type LayoutDirection = 'horizontal' | 'vertical'