List Settings

List Settings

List spacing is primarily controlled through the ListItemButton editor, which is used by the sidebar tab list.

Access Path

1. Open VertiTab settings page
2. Click “Custom Themes” in the sidebar menu
3. Select the theme to edit and click “Edit”
4. Click the ”🧩 Component Customization” tab
5. Find the “ListItemButton” configuration card and expand it

Configuration Options

Default Property Settings

Dense

• Reduces vertical spacing of list items when enabled
• Suitable for scenarios requiring more content display

Disable Gutters

• Removes horizontal padding of list items
• Makes content closer to edges

Divider

• Adds divider lines between list items
• When enabled, border bottom settings options become available

Disable Ripple

• Turns off ripple animation effect on click
• Provides a cleaner interaction experience

Style Override Settings

Border Radius

• Adjusts corner roundness of list items
• Range: 0-20px

Padding

• Top/Bottom Padding: Adjusts vertical spacing of list item content
• Left/Right Padding: Adjusts horizontal spacing of list item content
• Maximum Value: 20px
• Special Note: If “Disable Gutters” is enabled, left/right padding settings may not take effect

Margin

• Top/Bottom Margin: Adjusts vertical spacing between list items
• Left/Right Margin: Adjusts distance between list items and container edges
• Maximum Value: 20px

Practical Application Scenarios

Sidebar Tab List

• Primary Use: Controls spacing of tab list items in the sidebar
• Visual Effect: Affects the closeness between tabs
• User Experience: Appropriate spacing improves navigation efficiency

Adjustment Recommendations

Compact Layout

1. Enable “Dense” mode
2. Reduce top/bottom padding and margin
3. Consider disabling divider lines

Loose Layout

1. Disable “Dense” mode
2. Increase padding and margin
3. Can add divider lines to enhance separation effect

Minimalist Style

1. Enable “Disable Gutters”
2. Disable “Ripple Effect”
3. Set smaller or no border radius

Operation Steps

Basic Spacing Adjustment

1. Enable or disable “Dense” mode as needed
2. Adjust “Padding” top/bottom values to control item content spacing
3. Adjust “Margin” top/bottom values to control spacing between items

Horizontal Spacing Adjustment

1. If content needs to be edge-aligned, enable “Disable Gutters”
2. Otherwise, adjust content-to-edge distance via “Padding” left/right values
3. Adjust overall position via “Margin” left/right values

Visual Optimization

1. Set appropriate “Border Radius”
2. Choose whether to add “Divider” based on design style
3. Consider disabling “Ripple Effect” for a cleaner appearance

Preview Effects

All settings are applied in real-time to the sidebar tab list, allowing you to immediately see the effects of spacing adjustments.

Usage Recommendations

1. Consider Content Density: Use compact layout when there are many tabs
2. Maintain Visual Balance: Spacing that’s too large or small affects aesthetics
3. Test Different Scenarios: Verify effects under different window sizes
4. Consider User Habits: Avoid unusual spacing that affects operation habits

Saving Settings

All adjustments are previewed in real-time. Click the “Save” button in the theme editor to save changes.