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