Komponenter
Avatar stack
Avatar stack stabler en samling avatar-elementer
Avatar stack er under utvikling. Har du tilbakemelding eller innspill, meld fra på Github eller i Slack.
Unable to parse html
const Preview = () => ( <EXPERIMENTAL_AvatarStack> <Avatar aria-label='cat'> <img src='/img/component-docs/cats/cat1.webp' alt='' /> </Avatar> <Avatar aria-label='briefcase'> <BriefcaseIcon /> </Avatar> <Avatar aria-label='Søren Magnussen'>sm</Avatar> <Avatar aria-label='Mark Downright'>md</Avatar> <Avatar aria-label='Ola Nordman'>on</Avatar> </EXPERIMENTAL_AvatarStack> ); render(<Preview />)
Bruk
For å lage en avatar stack i ren HTML brukes klassen ds-avatar-stack på en <span>. Inne i denne plasseres elementer med klassen ds-avatar. Merk at dersom du vil bruke data-expandable="fixed" må antallet avatarer være oppgitt via --dsc-avatar-count: <number> for å korrekt kalkulere den faste bredden. Bruk data-suffix for å legge til en tekstindikator for skjulte avatarer.
aria-label eller aria-description kan brukes på avatar stack for å gi kontekst til skjermlesere om hva stabelen representerer.
CSS variabler og data-attributter
Avatar stack bruker egne CSS-variabler for å styre gap, størrelse og overlapp.
| Navn | Verdi |
|---|---|
| --dsc-avatar-stack-size | var(--ds-size-12) |
| --dsc-avatar-stack-gap | 2px |
| --dsc-avatar-stack-overlap | 50 |
| --dsc-avatar-count | initial |
| --dsc-avatar-size | var(--dsc-avatar-stack-size) |
| --dsc-avatar-font-size | var(--_font-size) |
| Navn | Verdi |
|---|---|
| data-expandable | fixed |
| data-suffix | |
| data-variant | square |
Eksempel
Expandable
data-expandable animerer overlap til 0 ved hover eller fokus. Bruk data-expandable="fixed" for å utvide med overflow uten å endre den fysiske bredden. tabindex="0" blir automatisk lagt til med data-expandable, men dette kan overstyres.
Unable to parse html
const Expandable = () => ( <div style={{ display: 'flex', flexDirection: 'row', gap: 'var(--ds-size-4)', flexWrap: 'wrap', }} > <fieldset> <legend>expandable</legend> <EXPERIMENTAL_AvatarStack expandable> <Avatar aria-label=''> <img src='/img/component-docs/cats/cat1.webp' alt='' /> </Avatar> <Avatar aria-label=''> <img src='/img/component-docs/cats/cat6.webp' alt='' /> </Avatar> <Avatar aria-label=''> <img src='/img/component-docs/cats/cat1.webp' alt='' /> </Avatar> <Avatar aria-label=''> <img src='/img/component-docs/cats/cat6.webp' alt='' /> </Avatar> </EXPERIMENTAL_AvatarStack> </fieldset> <fieldset> <legend>expandable="fixed"</legend> <EXPERIMENTAL_AvatarStack expandable='fixed'> <Avatar aria-label=''> <img src='/img/component-docs/cats/cat1.webp' alt='' /> </Avatar> <Avatar aria-label=''> <img src='/img/component-docs/cats/cat6.webp' alt='' /> </Avatar> <Avatar aria-label=''> <img src='/img/component-docs/cats/cat1.webp' alt='' /> </Avatar> <Avatar aria-label=''> <img src='/img/component-docs/cats/cat6.webp' alt='' /> </Avatar> </EXPERIMENTAL_AvatarStack> </fieldset> </div> ); render(<Expandable />)
Indikere avatarer som ikke vises
Avatar stack støtter ikke "wrapping" over flere linjer. Dersom det er flere avatarer enn det er plass til i stacken, kan man bruke suffix for å indikere dette i form av tekst til høyre for stabelen. Denne skalerer seg automatisk med avatar-størrelsen.
Det er også mulig å bruke en avatar med +xx som initials eller child, men da bør du overstyre tekststørrelsen på denne avataren med --dsc-avatar-font-size dersom det skal være plass til tosifret eller høyere tall.
Unable to parse html
const AdditionalAvatars = () => ( <> <EXPERIMENTAL_AvatarStack overlap={30}> <Avatar aria-label=''> <img src='/img/component-docs/cats/cat1.webp' alt='' /> </Avatar> <Avatar aria-label=''> <BriefcaseIcon /> </Avatar> <Avatar aria-label='' initials='sm' /> <Avatar data-color='neutral' aria-label='' style={{ '--dsc-avatar-font-size': '1.1rem' } as React.CSSProperties} > +14 </Avatar> </EXPERIMENTAL_AvatarStack> <EXPERIMENTAL_AvatarStack suffix={'+14'}> <Avatar aria-label=''> <img src='/img/component-docs/cats/cat1.webp' alt='' /> </Avatar> <Avatar aria-label=''> <BriefcaseIcon /> </Avatar> <Avatar aria-label='' initials='sm' /> <Avatar aria-label='' initials='on' /> </EXPERIMENTAL_AvatarStack> </> ); render(<AdditionalAvatars />)
Størrelser
Du kan ikke bruke data-size for å endre størrelsen på avatarer i en avatar stack. I stedet styres størrelsen med å sette størrelsen på variabelen --dsc-avatar-stack-size.
Unable to parse html
const DataSize = () => ( <EXPERIMENTAL_AvatarStack avatarSize='clamp(5rem, 1.5rem + 2vw, 10rem)'> <Avatar aria-label=''> <img src='/img/component-docs/cats/cat6.webp' alt='' /> </Avatar> <Avatar aria-label=''> <img src='/img/component-docs/cats/cat1.webp' alt='' /> </Avatar> <Avatar aria-label=''> <img src='/img/component-docs/cats/cat6.webp' alt='' /> </Avatar> <Avatar aria-label=''> <img src='/img/component-docs/cats/cat1.webp' alt='' /> </Avatar> </EXPERIMENTAL_AvatarStack> ); render(<DataSize />)
Gap
Avatar stack bruker CSS mask for å lage det synlige mellomrommet mellom avatarene, denne kan justeres ved sette størrelsen på variabelen --dsc-avatar-stack-gap.
Unable to parse html
const Gap = () => ( <EXPERIMENTAL_AvatarStack avatarSize='3rem' gap='6px'> <Avatar aria-label='' initials='AA' /> <Avatar aria-label='' initials='BB' /> <Avatar aria-label='' initials='CC' /> <Avatar aria-label='' initials='DD' /> </EXPERIMENTAL_AvatarStack> ); render(<Gap />)
React
- gap
- Description
Adjusts gap-mask between avatars in the stack. Must be a valid css length value (px, em, rem, var(--ds-size-1) etc.)
- Type
string- Default
2px
- avatarSize
- Description
Control the size of the avatars. Must be a valid css length value (px, em, rem, var(--ds-size-12) etc.)
- Type
string- Default
'var(--ds-size-12)'
- overlap
- Description
A number which represents the percentage value of how much avatars should overlap.
- Type
number- Default
50
- suffix
- Description
Text to the right of the avatars to show a number representing additional avatars not shown such as '+5'".
- Type
string
- expandable
- Description
Expand on hover to show full avatars. 'fixed': AvatarStack physical width does not change when avatars are expanded.
- Type
true | "fixed"- Default
undefined
| Name | Type | Default | Description |
|---|---|---|---|
| gap | string | 2px | Adjusts gap-mask between avatars in the stack. Must be a valid css length value (px, em, rem, var(--ds-size-1) etc.) |
| avatarSize | string | 'var(--ds-size-12)' | Control the size of the avatars. Must be a valid css length value (px, em, rem, var(--ds-size-12) etc.) |
| overlap | number | 50 | A number which represents the percentage value of how much avatars should overlap. |
| suffix | string | - | Text to the right of the avatars to show a number representing additional avatars not shown such as '+5'". |
| expandable | true | "fixed" | undefined | Expand on hover to show full avatars. 'fixed': AvatarStack physical width does not change when avatars are expanded. |
Ekstra logikk for link
Bruk asChild for å gjøre en avatar til en lenke.
Unable to parse html
const WithTooltipAndLink = () => ( <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--ds-size-4)' }}> <fieldset> <legend>Link + Tooltip</legend> <EXPERIMENTAL_AvatarStack overlap={20} aria-label='contributors'> <Tooltip content='Ola Katt'> <Avatar aria-label='' asChild> <a href='#'> <img src='/img/component-docs/cats/cat1.webp' alt='' /> </a> </Avatar> </Tooltip> <Tooltip content='Kari Katt'> <Avatar aria-label='' asChild> <a href='#'> <img src='/img/component-docs/cats/cat6.webp' alt='' /> </a> </Avatar> </Tooltip> <Tooltip content='Katt 2'> <Avatar aria-label='' asChild> <a href='#'> <img src='/img/component-docs/cats/cat1.webp' alt='' /> </a> </Avatar> </Tooltip> <Tooltip content='Børge Katt'> <Avatar aria-label='' asChild> <a href='#'>BK</a> </Avatar> </Tooltip> </EXPERIMENTAL_AvatarStack> </fieldset> <fieldset> <legend>Link + Tooltip expandable</legend> <EXPERIMENTAL_AvatarStack overlap={50} expandable='fixed' aria-label='contributors' > <Tooltip content='Ola Katt'> <Avatar aria-label='' asChild> <a href='#'> <img src='/img/component-docs/cats/cat6.webp' alt='' /> </a> </Avatar> </Tooltip> <Tooltip content='Kari Katt'> <Avatar aria-label='' asChild> <a href='#'> <img src='/img/component-docs/cats/cat1.webp' alt='' /> </a> </Avatar> </Tooltip> <Tooltip content='Katt 2'> <Avatar aria-label='' asChild> <a href='#'> <img src='/img/component-docs/cats/cat6.webp' alt='' /> </a> </Avatar> </Tooltip> <Tooltip content='Børge Katt'> <Avatar aria-label='' asChild> <a href='#'>BK</a> </Avatar> </Tooltip> </EXPERIMENTAL_AvatarStack> </fieldset> </div> ); render(<WithTooltipAndLink />)