コンテンツ v1.0.0

アバター

画像、イニシャルのフォールバック、オプションのステータスインジケーターを備えたユーザーまたはエンティティの表現。 アバターグループモードでは、設定可能なオーバーラップと「+N人」のオーバーフロー表示で複数のアバターを 重ねて表示できます。5種類のサイズ、2種類の形状、4種類のステータス状態、 イニシャルからの決定論的な自動背景色生成に対応しています。

プレビュー & コード

オプション

名前 型 デフォルト 説明
src String Image URL for the avatar
alt String Alt text for the avatar image
initials String Fallback initials displayed when no image is provided (e.g. "JD")
size Symbol :md Avatar size: :xs, :sm, :md, :lg, :xl
status Symbol Online status indicator: :online, :offline, :busy, :away
shape Symbol :circle Avatar shape: :circle or :rounded
href String Optional link URL — wraps the avatar in an anchor tag
color String Background color class for initials (auto-generated from initials if nil)
group Boolean false Whether this avatar is part of a group (adds negative margin and ring)
group_items Array Array of avatar config hashes for group mode rendering
max_display Integer 4 Maximum number of avatars to show before the "+N more" overflow pill

変更履歴 v1.0.0

- v1.0.0: Initial release with single avatar and avatar group modes
- Five sizes (xs through xl), two shapes (circle, rounded)
- Status indicators (online, offline, busy, away)
- Deterministic initials color generation
- Stimulus-powered expandable overflow in group mode

フルアクセスを取得

このコンポーネントと他のすべてのソースコードをアンロックしましょう。一回のお支払いで永久アクセス。

今すぐアクセスを取得