mirror of
https://github.com/forcedotcom/afv-library.git
synced 2026-07-30 03:09:50 +08:00
82 lines
3.2 KiB
YAML
82 lines
3.2 KiB
YAML
name: Avatar Group
|
|
description: A collection of avatars displayed together, typically used to show multiple users or entities associated with
|
|
a record or activity.
|
|
category: Display
|
|
slds_classes:
|
|
root: slds-avatar-group
|
|
elements: []
|
|
modifiers:
|
|
- class: slds-avatar-group_small
|
|
description: Small avatar group variant
|
|
usage: Use when space is limited
|
|
- class: slds-avatar-group_medium
|
|
description: Medium avatar group variant (default)
|
|
usage: Default size for most use cases
|
|
- class: slds-avatar-group_large
|
|
description: Large avatar group variant
|
|
usage: Use for prominence or when space allows
|
|
states: []
|
|
variants:
|
|
- name: Base
|
|
description: Standard avatar group with overlapping avatars
|
|
classes:
|
|
- slds-avatar-group
|
|
usage_context: Default implementation for multiple user representation
|
|
differences: Overlapping circular avatars with proper spacing
|
|
lightning_component:
|
|
name: No direct component
|
|
url: https://developer.salesforce.com/docs/component-library/overview/components
|
|
mapping_notes: No direct Lightning Base Component equivalent - typically built using multiple lightning-avatar components
|
|
accessibility:
|
|
keyboard_support:
|
|
- Tab navigation through interactive avatars if clickable
|
|
screen_reader:
|
|
- List structure conveyed through proper markup
|
|
- Individual avatar labels announced
|
|
aria_attributes:
|
|
- role='list' for the avatar group container
|
|
- role='listitem' for individual avatar items
|
|
usage_guidelines:
|
|
when_to_use:
|
|
- To show multiple users associated with a record
|
|
- For team or collaboration indicators
|
|
- When displaying attendees or participants
|
|
when_not_to_use:
|
|
- For single users (use individual avatar instead)
|
|
- When space doesn't allow for proper overlap visualization
|
|
best_practices:
|
|
- Limit to 3-5 visible avatars for optimal readability
|
|
- Show additional count for larger groups
|
|
- Maintain consistent avatar sizes within the group
|
|
common_mistakes:
|
|
- Showing too many avatars without grouping or count
|
|
- Inconsistent avatar sizes within the group
|
|
code_examples:
|
|
- title: Basic Avatar Group
|
|
description: Basic avatar group with two users
|
|
code: "<div class=\"slds-avatar-group slds-avatar-group_medium\">\n <ul class=\"\">\n <li class=\"\">\n \
|
|
\ <span class=\"slds-avatar slds-avatar_medium\">\n <img alt=\"John Doe\" src=\"/assets/images/avatar1.jpg\"\
|
|
\ class=\"\" />\n </span>\n </li>\n <li class=\"\">\n <span class=\"slds-avatar slds-avatar_medium\"\
|
|
>\n <img alt=\"Jane Smith\" src=\"/assets/images/avatar2.jpg\" class=\"\" />\n </span>\n </li>\n\
|
|
\ </ul>\n </div>\n"
|
|
styling_hooks: []
|
|
dependencies:
|
|
css_files:
|
|
- avatar-group.css
|
|
- avatar.css
|
|
javascript: []
|
|
icons: []
|
|
other_components:
|
|
- avatar
|
|
related_components:
|
|
- name: Avatar
|
|
relationship: depends-on
|
|
description: Individual avatars that make up the group
|
|
references:
|
|
official_docs: https://v1.lightningdesignsystem.com/components/avatar-group/
|
|
metadata:
|
|
version: 1.0.0
|
|
last_updated: '2025-11-12'
|
|
review_status: complete
|
|
notes: ' Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth.'
|