AvatarGroup
Avatars are used to show a thumbnail representation of an individual or business in the interface.
Usage
import { AvatarGroup } from 'stwui';
import AvatarGroup from 'stwui/avatar-group';
<script lang="ts">
import { AvatarGroup } from 'stwui';
</script>
<AvatarGroup size="xs">
<AvatarGroup.Avatar src={avatars[0]} />
<AvatarGroup.Avatar src={avatars[1]} />
<AvatarGroup.Avatar src={avatars[2]} />
<AvatarGroup.Avatar src={avatars[3]} />
</AvatarGroup>
<AvatarGroup size="sm">
<AvatarGroup.Avatar src={avatars[0]} />
<AvatarGroup.Avatar src={avatars[1]} />
<AvatarGroup.Avatar src={avatars[2]} />
<AvatarGroup.Avatar src={avatars[3]} />
</AvatarGroup>
<AvatarGroup>
<AvatarGroup.Avatar src={avatars[0]} />
<AvatarGroup.Avatar src={avatars[1]} />
<AvatarGroup.Avatar src={avatars[2]} />
<AvatarGroup.Avatar src={avatars[3]} />
</AvatarGroup>
<AvatarGroup size="lg">
<AvatarGroup.Avatar src={avatars[0]} />
<AvatarGroup.Avatar src={avatars[1]} />
<AvatarGroup.Avatar src={avatars[2]} />
<AvatarGroup.Avatar src={avatars[3]} />
</AvatarGroup>
<AvatarGroup size="xl">
<AvatarGroup.Avatar src={avatars[0]} />
<AvatarGroup.Avatar src={avatars[1]} />
<AvatarGroup.Avatar src={avatars[2]} />
<AvatarGroup.Avatar src={avatars[3]} />
</AvatarGroup>
<script lang="ts">
import { AvatarGroup } from 'stwui';
</script>
<AvatarGroup shape="rounded">
<AvatarGroup.Avatar src={avatars[0]} />
<AvatarGroup.Avatar src={avatars[1]} />
<AvatarGroup.Avatar src={avatars[2]} />
<AvatarGroup.Avatar src={avatars[3]} />
</AvatarGroup>
<AvatarGroup shape="square">
<AvatarGroup.Avatar src={avatars[0]} />
<AvatarGroup.Avatar src={avatars[1]} />
<AvatarGroup.Avatar src={avatars[2]} />
<AvatarGroup.Avatar src={avatars[3]} />
</AvatarGroup>
With Indicator
<script lang="ts">
import { AvatarGroup } from 'stwui';
</script>
<AvatarGroup size="lg">
<AvatarGroup.Avatar src={avatars[0]}>
<AvatarGroup.Avatar.Indicator slot="indicator" placement="top-left" />
</AvatarGroup.Avatar>
<AvatarGroup.Avatar src={avatars[1]}>
<AvatarGroup.Avatar.Indicator slot="indicator" placement="top-left" />
</AvatarGroup.Avatar>
<AvatarGroup.Avatar src={avatars[2]}>
<AvatarGroup.Avatar.Indicator slot="indicator" placement="top-left" />
</AvatarGroup.Avatar>
<AvatarGroup.Avatar src={avatars[3]}>
<AvatarGroup.Avatar.Indicator slot="indicator" placement="top-left" />
</AvatarGroup.Avatar>
</AvatarGroup>
<AvatarGroup size="lg">
<AvatarGroup.Avatar src={avatars[0]}>
<AvatarGroup.Avatar.Indicator slot="indicator" placement="top-right" />
</AvatarGroup.Avatar>
<AvatarGroup.Avatar src={avatars[1]}>
<AvatarGroup.Avatar.Indicator slot="indicator" placement="top-right" />
</AvatarGroup.Avatar>
<AvatarGroup.Avatar src={avatars[2]}>
<AvatarGroup.Avatar.Indicator slot="indicator" placement="top-right" />
</AvatarGroup.Avatar>
<AvatarGroup.Avatar src={avatars[3]}>
<AvatarGroup.Avatar.Indicator slot="indicator" placement="top-right" />
</AvatarGroup.Avatar>
</AvatarGroup>
<AvatarGroup size="lg">
<AvatarGroup.Avatar src={avatars[0]}>
<AvatarGroup.Avatar.Indicator slot="indicator" placement="bottom-left" />
</AvatarGroup.Avatar>
<AvatarGroup.Avatar src={avatars[1]}>
<AvatarGroup.Avatar.Indicator slot="indicator" placement="bottom-left" />
</AvatarGroup.Avatar>
<AvatarGroup.Avatar src={avatars[2]}>
<AvatarGroup.Avatar.Indicator slot="indicator" placement="bottom-left" />
</AvatarGroup.Avatar>
<AvatarGroup.Avatar src={avatars[3]}>
<AvatarGroup.Avatar.Indicator slot="indicator" placement="bottom-left" />
</AvatarGroup.Avatar>
</AvatarGroup>
<AvatarGroup size="lg">
<AvatarGroup.Avatar src={avatars[0]}>
<AvatarGroup.Avatar.Indicator slot="indicator" placement="bottom-right" />
</AvatarGroup.Avatar>
<AvatarGroup.Avatar src={avatars[1]}>
<AvatarGroup.Avatar.Indicator slot="indicator" placement="bottom-right" />
</AvatarGroup.Avatar>
<AvatarGroup.Avatar src={avatars[2]}>
<AvatarGroup.Avatar.Indicator slot="indicator" placement="bottom-right" />
</AvatarGroup.Avatar>
<AvatarGroup.Avatar src={avatars[3]}>
<AvatarGroup.Avatar.Indicator slot="indicator" placement="bottom-right" />
</AvatarGroup.Avatar>
</AvatarGroup>
<script lang="ts">
import { AvatarGroup } from 'stwui';
</script>
<AvatarGroup>
<AvatarGroup.Avatar initials="ND" />
<AvatarGroup.Avatar initials="ND" />
<AvatarGroup.Avatar initials="ND" />
<AvatarGroup.Avatar initials="ND" />
</AvatarGroup>
AvatarGroup Props
| shape | 'circle' | 'rounded' | 'square' | circle |
| size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | md |
| placeholder | boolean | true |
AvatarGroup Slots
| default | <AvatarGroup.Avatar /> |
AvatarGroup.Avatar Props
| src | string | |
| alt | string | avatar |
| initials | string | |
AvatarGroup.Avatar Slots
| placeholder | <Avatar.Placeholder slot="placeholder" /> |
| indicator | <Avatar.Indicator slot="indicator" /> |
AvatarGroup.Avatar.Placeholder Slots
AvatarGroup.Avatar.Indicator Props
| placement | 'top-right' | 'bottom-right' | 'top-left' | 'bottom-left' | top-right |
AvatarGroup Class Identifiers
| stwui-avatar-group |
| stwui-avatar-group-avatar |
| stwui-avatar-group-avatar-container |
| stwui-avatar-group-avatar-indicator |
| stwui-avatar-group-avatar-placeholder |
| stwui-avatar-group-avatar-placeholder-icon |
