Container 容器布局
容器布局,采用了 flex
布局,一般用于后台管理项目的一些常用排版,方便快速搭建页面的基本结构:
l-container
:外层容器,一般用于section
标签,基本排版为水平左右排列,可以通过设置l-layout-verticle
调整为垂直上下排列。可以嵌套l-header
:顶栏容器,一般用于header
标签l-aside
: 侧边栏容器,一般用于aside
标签l-main
: 主要区域容器,一般用于main
标签l-footer
: 底栏容器,一般用于footer
标签
通常用于后台管理系统的首页排版
引入
由于使用不是特别频繁,所以没有封装为组件,在需要时手动引入样式表
ts
import "litos-ui/styles/container.css";
1
常见布局
上下两栏排版
左右两栏排版
上下两栏嵌套
左右两栏嵌套
上中下三栏
经典后台系统
在 header
里面放点东西就成了,就成了经典的后台管理系统的模板, 左边是图标,右边是登录用户;Aside
里面放菜单(Menu
),Main
里面放内容就是经典的后台管理系统模板
主题定制
样式变量
名称 | 描述 | 默认值 |
---|---|---|
--l-header-height | header高度 | 50px |
--l-aside-width | 侧边栏宽度 | 240px |
--l-footer-height | 底栏高度 | var(--l-header-height, 50px) |