Avatar Size Settings
Avatar Size Settings
Section titled “Avatar Size Settings”Use the MuiAvatar editor to precisely control the appearance and size of avatar components.
Access Path
Section titled “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
Section titled “Avatar Configuration Options”Basic Property Settings
Section titled “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
Section titled “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
Section titled “Operation Steps”Adjusting Avatar Size
Section titled “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
Section titled “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
Section titled “Modifying Appearance Style”- Select appropriate variant type
- Adjust border radius as needed
- Set appropriate margin
Actual Effects
Section titled “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
Section titled “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
Section titled “Saving Settings”All adjustments are previewed in real-time. Click the “Save” button in the theme editor to save changes.