@unicom-blockchain/common-layout
v1.5.6
Published
## 项目简介
Downloads
186
Readme
@unicom-blockchain/common-layout
项目简介
@unicom-blockchain/common-layout
封装了普通系统的左侧菜单视图与顶部的菜单
功能
- 管理系统主界面布局
安装
使用 pnpm 安装:
pnpm i @unicom-blockchain/common-layout
配置布局
import { registerLayout } from '@unicom-blockchain/common-layout';
import { ElDropdownItem } from 'element-plus';
import ProjectIcon from 'assets/logo.png';
const Menu = <ElDropdownItem>123123</ElDropdownItem>;
registerLayout({
logo: ProjectIcon,
iconClass: 'iconfront',
extraHeaderMenu: Menu,
});
使用布局
import { Layout as LayoutComponent } from '@unicom-blockchain/common-layout';
import { Layout, Page } from '@unicom-blockchain/app-base';
@Page()
@Layout(LayoutComponent)
class Page3 {
component = () => import('./Page2.vue');
}
CSS变量
| 名称 | 描述 | | -------------------------------------- | -------------- | | --commonlayout-header-height | 头部高度 | | --commonlayout-header-background-color | 头部背景颜色 | | --commonlayout-header-main-padding | 头部与主体间距 | | --commonlayout-main-bottom-padding | 主体与底部间距 | | --commonlayout-menu-width | 菜单栏宽度 | | --commonlayout-menu-border-radius | 菜单栏边框圆角 | | --commonlayout-menu-background-color | 菜单栏背景颜色 | | --commonlayout-main-padding-left | 主体左侧间距 | | --commonlayout-main-padding-right | 主体右侧边距 | | --commonlayout-main-border-radius | 主体边框圆角 | | --commonlayout-main-background-color | 主体背景颜色 |