---
category: Components
cols: 1
type: 布局
title: Layout
subtitle: 布局
---

协助进行页面级整体布局。

## 设计规范

- 点击展开各个子产品入口的浮窗，可以切换至其他子产品，每个子产品以及 UIC 的这个位置常显该图标
- 绘制画布 64px X 64px 应用显示尺寸 40px X 40px
- 各个子产品的名称 字体使用【Poppins-中粗体】字号 20，最后轮廓化并且创建控件，宽度不固定，整体布局根据文字长度固定间距左右自动调整
- 选择项目下拉框宽度固定 208px，项目名称超出宽度“...”显示
- tab 标题每一项固定 112px 的宽度，标题最多 6 个字，tab 项最多 6 个
- 用户名称固定宽度 112px，超出“...”展示
- 点击用户名唤起下拉框  内容需要产品重新规划
- 导航布局是在 1440px 宽度的设计稿上面正常展开，如果遇到左边 tab 项达到最多数量 6 个，并且屏幕比较小的情况，需要根据屏幕宽度折叠 tab 项


## API

|类名      |说明  |使用示例
|---------|---------|
|.dt-layout-header     | 顶部导航样式        | 基本用法、带项目选择、侧边导航 |
|.dt-layout-sider     | 侧边导航栏样式设置        | 侧边导航 |
|.dt-container     | 主要内容模块样式        | 基本用法、带项目选择 |
|.dt-slider-top-icon     | 侧边栏收缩按钮        | 侧边导航 |
|.dt-header-project-select-menu     | 顶部导航栏 项目选择菜单        | 带项目选择、侧边导航 |
|.dt-header-log-wrapper     | logo 以及标题样式设置        | 基本用法、带项目选择、侧边导航 |