78 lines
1.8 KiB
Markdown
78 lines
1.8 KiB
Markdown
# Nex Design - 抽屉(Drawer)宽度标准
|
||
|
||
## 📐 抽屉宽度定义
|
||
|
||
为了保持设计一致性，我们定义了三种标准抽屉宽度模式：
|
||
|
||
### 1. 小型抽屉 (Small) - 480px
|
||
**适用场景：**
|
||
- 简单的信息展示
|
||
- 少量字段的表单（1-3个字段）
|
||
- 快速操作面板
|
||
- 通知详情
|
||
|
||
**示例：**
|
||
```jsx
|
||
<Drawer width={480} ... />
|
||
```
|
||
|
||
### 2. 中型抽屉 (Medium) - 720px ⭐️ 推荐
|
||
**适用场景：**
|
||
- 详细信息展示（如主机详情）
|
||
- 中等复杂度的表单（4-10个字段）
|
||
- 数据编辑面板
|
||
- 配置设置
|
||
|
||
**示例：**
|
||
```jsx
|
||
<Drawer width={720} ... />
|
||
```
|
||
**当前主机列表页面使用此宽度模式**
|
||
|
||
### 3. 大型抽屉 (Large) - 1080px
|
||
**适用场景：**
|
||
- 复杂的多步骤表单
|
||
- 需要并排展示多列信息
|
||
- 包含图表或复杂可视化内容
|
||
- 嵌套子表格或列表
|
||
|
||
**示例：**
|
||
```jsx
|
||
<Drawer width={1080} ... />
|
||
```
|
||
|
||
## 📱 响应式建议
|
||
|
||
```css
|
||
/* 移动端自适应 */
|
||
@media (max-width: 768px) {
|
||
.ant-drawer {
|
||
width: 100% !important;
|
||
}
|
||
}
|
||
|
||
/* 平板端 */
|
||
@media (max-width: 1024px) {
|
||
.ant-drawer-large {
|
||
width: 90% !important;
|
||
}
|
||
}
|
||
```
|
||
|
||
## 💡 使用建议
|
||
|
||
1. **优先选择中型抽屉(720px)**：适合大多数场景，既不会太窄导致内容拥挤，也不会太宽浪费空间。
|
||
|
||
2. **避免自定义宽度**：保持使用标准宽度，确保整个系统的一致性。
|
||
|
||
3. **移动端优先**：在响应式设计中，小屏幕设备应使用全宽抽屉。
|
||
|
||
4. **内容决定宽度**：根据内容复杂度选择合适的宽度，而不是随意设置。
|
||
|
||
## 🎨 设计原则
|
||
|
||
- **一致性**：相同类型的页面使用相同宽度的抽屉
|
||
- **可读性**：确保内容在抽屉中有足够的呼吸空间
|
||
- **响应式**：考虑不同设备的显示效果
|
||
- **用户体验**：抽屉不应遮挡主要内容过多
|