Skip to content

Avatar Size Settings

Use the MuiAvatar editor to precisely control the appearance and size of avatar components.

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 "Avatar" configuration card and expand it

Avatar Configuration Options

Basic Property Settings

Variant

  • Circular: Standard circular avatar
  • Rounded: Square avatar with rounded corners
  • Square: Square avatar

Size

  • Adjustment Range: 9-32px
  • Slider Control: Drag slider to adjust avatar size in real-time
  • Synchronized Effect: Width and height adjust together

Font Size

  • Adjustment Range: 9-24px
  • Effect: Controls the size of text displayed within the avatar (such as user initials)
  • Independent Control: Does not affect the avatar's overall dimensions

Advanced Style Settings

Border Radius

  • Customize corner roundness
  • Only effective for rounded or square variants

Margin

  • Adjust spacing between avatar and surrounding elements
  • Maximum value: 20px

Operation Steps

Adjusting Avatar Size

  1. Drag the adjustment point on the "Size" slider
  2. Observe real-time preview effects
  3. Release mouse when you find the appropriate size

Adjusting Text Size

  1. Adjust on the "Font Size" slider
  2. Primarily affects initials displayed within the avatar
  3. Ensure text coordinates well with avatar size

Modifying Appearance Style

  1. Select appropriate variant type
  2. Adjust border radius as needed
  3. Set appropriate margin

Actual Effects

  • User Avatars: Displayed in profiles, comments, and other locations
  • Placeholder Avatars: Style when displaying user initials
  • Interface Consistency: All avatar components uniformly use these settings

Usage Recommendations

  1. Maintain Coordination: Avatar size should coordinate with other interface elements
  2. Consider Readability: Ensure text within avatars is clearly visible
  3. Test Different Scenarios: Verify effects across various interface positions
  4. Moderate Adjustments: Avoid sizes that are too large or small, affecting interface aesthetics

Saving Settings

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