调整列表

列表间距主要通过 ListItemButton 编辑器控制，此组件被侧边栏标签页列表使用。

访问路径

1. 打开 VertiTab 设置页面
2. 点击侧边栏的"自定义主题"菜单
3. 选择要编辑的主题，点击"编辑"
4. 点击"🧩 组件自定义"标签页
5. 找到"ListItemButton"配置卡片，点击展开

配置选项

默认属性设置

密集模式 (Dense)

• 开启后减少列表项的垂直间距
• 适用于需要显示更多内容的场景

禁用边距 (Disable Gutters)

• 移除列表项的水平内边距
• 让内容更靠近边缘

分割线 (Divider)

• 在列表项之间添加分割线
• 开启后会显示边框底部设置选项

禁用波纹效果 (Disable Ripple)

• 关闭点击时的波纹动画效果
• 可提供更简洁的交互体验

样式覆盖设置

边框圆角 (Border Radius)

• 调整列表项的圆角程度
• 范围：0-20px

内边距 (Padding)

• 上下内边距：调整列表项内容的垂直间距
• 左右内边距：调整列表项内容的水平间距
• 最大值：20px
• 特殊说明：如果开启了"禁用边距"，左右内边距设置可能不生效

外边距 (Margin)

• 上下外边距：调整列表项之间的垂直间距
• 左右外边距：调整列表项与容器边缘的距离
• 最大值：20px

实际应用场景

侧边栏标签页列表

• 主要用途：控制侧边栏中标签页列表项的间距
• 视觉效果：影响标签页之间的紧密程度
• 用户体验：适当的间距提升导航效率

调整建议

紧凑布局

1. 开启"密集模式"
2. 减少上下内边距和外边距
3. 考虑关闭分割线

宽松布局

1. 关闭"密集模式"
2. 增加内边距和外边距
3. 可添加分割线增强分隔效果

极简风格

1. 开启"禁用边距"
2. 关闭"波纹效果"
3. 设置较小的圆角或无圆角

操作步骤

基础间距调整

1. 根据需要开启或关闭"密集模式"
2. 调整"内边距"的上下值控制项目内容间距
3. 调整"外边距"的上下值控制项目之间间距

水平间距调整

1. 如需内容贴边，开启"禁用边距"
2. 否则通过"内边距"左右值调整内容与边缘距离
3. 通过"外边距"左右值调整整体位置

视觉优化

1. 设置合适的"边框圆角"
2. 根据设计风格选择是否添加"分割线"
3. 考虑关闭"波纹效果"获得更简洁的外观

预览效果

所有设置会实时应用到侧边栏的标签页列表，您可以立即看到间距调整的效果。

使用建议

1. 考虑内容密度：标签页较多时使用紧凑布局
2. 保持视觉平衡：间距过大或过小都会影响美观
3. 测试不同场景：在不同窗口大小下验证效果
4. 考虑用户习惯：避免间距过于特殊影响操作习惯

保存设置

所有调整会实时预览，点击主题编辑器的"保存"按钮保存更改。