Avatar Size Settings
Use the MuiAvatar editor to precisely control the appearance and size of avatar components.
Access Path
- Open VertiTab settings page
- Click "Custom Themes" in the sidebar menu
- Select the theme to edit and click "Edit"
- Click the "🧩 Component Customization" tab
- 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
- Drag the adjustment point on the "Size" slider
- Observe real-time preview effects
- Release mouse when you find the appropriate size
Adjusting Text Size
- Adjust on the "Font Size" slider
- Primarily affects initials displayed within the avatar
- Ensure text coordinates well with avatar size
Modifying Appearance Style
- Select appropriate variant type
- Adjust border radius as needed
- 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
- Maintain Coordination: Avatar size should coordinate with other interface elements
- Consider Readability: Ensure text within avatars is clearly visible
- Test Different Scenarios: Verify effects across various interface positions
- 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.