-
Notifications
You must be signed in to change notification settings - Fork 59
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(styles): added interactivity to vertical components [ci visual]
- Loading branch information
Showing
2 changed files
with
401 additions
and
77 deletions.
There are no files selected for viewing
151 changes: 123 additions & 28 deletions
151
packages/styles/stories/Components/avatar-group/group-type-vertical.example.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,30 +1,125 @@ | ||
| <div style="min-height: 400px;"> | ||
| <div class="fd-popover"> | ||
| <div class="fd-popover__control fd-avatar-group__popover-control" | ||
| role="button" | ||
| tabindex="0" | ||
| aria-label="Has popup type dialog Conjoined avatars, 6 avatars displayed, 8 avatars hidden, activate for complete list" | ||
| aria-haspopup="true" | ||
| aria-expanded="false"> | ||
| <div class="fd-avatar-group fd-avatar-group--group-type fd-avatar-group--m fd-avatar-group--vertical"> | ||
| <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border" role="img" aria-label="Wendy Wallace" title="Wendy Wallace">WW</span> | ||
|
|
||
| <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border" role="img" aria-label="Simon Doe" title="Simon Doe"> | ||
| <i class="fd-avatar__icon sap-icon--money-bills" role="presentation"></i> | ||
| </span> | ||
|
|
||
| <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/portraits/L_80x80_M1.png')" role="img" alt="John Doe" title="John Doe"></span> | ||
|
|
||
| <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border" role="img" aria-label="Endy Wallace" title="Endy Wallace">EW</span> | ||
|
|
||
| <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border" role="img" aria-label="Whitney Copper" title="Whitney Copper"> | ||
| <i class="fd-avatar__icon sap-icon--washing-machine" role="presentation"></i> | ||
| </span> | ||
|
|
||
| <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/portraits/L_80x80_M2.png')" role="img" alt="John Doe" title="John Doe"></span> | ||
|
|
||
| <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border fd-avatar--overflow" role="button" aria-label="John Doe" title="John Doe" tabindex="-1">+8</span> | ||
| <div class="is-cozy"> | ||
|
|
||
| <div dir="ltr"> | ||
| <div style="min-height: 400px;"> | ||
| <div class="fd-popover"> | ||
| <div class="fd-popover__control fd-avatar-group__popover-control" | ||
| role="button" | ||
| tabindex="0" | ||
| aria-label="Has popup type dialog Conjoined avatars, 6 avatars displayed, 8 avatars hidden, activate for complete list" | ||
| aria-haspopup="true" | ||
| aria-expanded="false" | ||
| onclick="onPopoverClick('popover_avatar-group_tztuj-v');"> | ||
| <div class="fd-avatar-group fd-avatar-group--group-type fd-avatar-group--m fd-avatar-group--vertical "> | ||
| <span | ||
| class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border" | ||
| role="img" | ||
| aria-label="Wendy Wallace" | ||
| title="Wendy Wallace">WW | ||
| </span> | ||
|
|
||
| <span | ||
| class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border" | ||
| role="img" | ||
| aria-label="Simon Doe" | ||
| title="Simon Doe"> | ||
| <i class="fd-avatar__icon sap-icon--money-bills" role="presentation" aria-hidden="true"></i> | ||
| </span> | ||
|
|
||
| <span | ||
| class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/portraits/L_80x80_M1.png')" | ||
| role="img" | ||
| alt="John Doe" | ||
| title="John Doe"> | ||
| </span> | ||
|
|
||
| <span | ||
| class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border" | ||
| role="img" | ||
| aria-label="Endy Wallace" | ||
| title="Endy Wallace">EW | ||
| </span> | ||
|
|
||
| <span | ||
| class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border" | ||
| role="img" | ||
| aria-label="Whitney Copper" | ||
| title="Whitney Copper"> | ||
| <i class="fd-avatar__icon sap-icon--washing-machine" role="presentation" aria-hidden="true"></i> | ||
| </span> | ||
|
|
||
| <span | ||
| class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" | ||
| style="background-image: url('/assets/images/portraits/L_80x80_M2.png')" | ||
| role="img" | ||
| alt="John Doe" | ||
| title="John Doe"> | ||
| </span> | ||
|
|
||
| <span | ||
| class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--overflow" | ||
| role="button" | ||
| tabindex="-1">+8 | ||
| </span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="fd-popover__body fd-popover__body--after fd-popover__body--arrow-left" aria-hidden="true" id="popover_avatar-group_tztuj-v" style="width: 332px;"> | ||
| <div class="fd-popover__wrapper" style="max-height: 200px; overflow-x: hidden"> | ||
| <div class="fd-popover__body-header"> | ||
| <div class="fd-bar fd-bar--header"> | ||
| <div class="fd-bar__middle"> | ||
| <div class="fd-bar__element">Team Members (14)</div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="fd-avatar-group__overflow-body"> | ||
| <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border" role="img" aria-label="Wendy Wallace" title="Wendy Wallace">WW</span> | ||
|
|
||
| <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border" role="img" aria-label="Sarah Smith" title="Sarah Smith"> | ||
| <i class="fd-avatar__icon sap-icon--money-bills" role="presentation"></i> | ||
| </span> | ||
|
|
||
| <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/portraits/L_80x80_M1.png')" role="img" alt="John Doe" title="John Doe"></span> | ||
|
|
||
| <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border" role="img" aria-label="Endy Wallace" title="Endy Wallace">EW</span> | ||
|
|
||
| <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border" role="img" aria-label="Whitney Bow" title="Whitney Bow"> | ||
| <i class="fd-avatar__icon sap-icon--washing-machine" role="presentation"></i> | ||
| </span> | ||
|
|
||
| <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/portraits/L_80x80_M2.png')" role="img" alt="John Doe" title="John Doe"></span> | ||
|
|
||
|
|
||
| <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border" role="img" aria-label="Andy Wallace" title="Andy Wallace">AW</span> | ||
|
|
||
|
|
||
| <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border" role="img" aria-label="John Carter" title="John Carter"> | ||
| <i class="fd-avatar__icon sap-icon--account" role="presentation"></i> | ||
| </span> | ||
|
|
||
| <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/portraits/L_80x80_F3.png')" role="img" alt="John Doe" title="John Doe"></span> | ||
|
|
||
| <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border" role="img" aria-label="John Moe" title="John Moe">JM</span> | ||
|
|
||
| <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border" role="img" aria-label="Joe Bloggs" title="Joe Bloggs">JB</span> | ||
|
|
||
| <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border" role="img" aria-label="Simon Swan" title="Simon Swan"> | ||
| <i class="fd-avatar__icon sap-icon--visits" role="presentation"></i> | ||
| </span> | ||
|
|
||
| <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/portraits/L_80x80_F4.png')" role="img" alt="John Doe" title="John Doe"></span> | ||
|
|
||
|
|
||
| <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border" role="img" aria-label="Fred Bloggs" title="Fred Bloggs">FB</span> | ||
|
|
||
|
|
||
| <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border" role="img" aria-label="Jan Alleman" title="Jan Alleman">JA</span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| </div> | ||
| </div> | ||
| </div> |
Oops, something went wrong.