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> <li> <Avatar aria-label='cat'> <img src='/img/component-docs/cats/cat1.webp' alt='' /> </Avatar> </li> <li> <Avatar aria-label='briefcase'> <BriefcaseIcon /> </Avatar> </li> <li> <Avatar aria-label='Søren Magnussen'>sm</Avatar> </li> <li> <Avatar aria-label='Mark Downright'>md</Avatar> </li> <li> <Avatar aria-label='Ola Nordman'>on</Avatar> </li> </EXPERIMENTAL_AvatarStack> ); render(<Preview />)
Bruk
For å lage en avatar stack i ren HTML brukes klassen ds-avatar-stack på en <ul>. Inne i denne plasseres <li> elementer rundt elementer med klassen ds-avatar. Bruk <li> med tekst for å legge til en indikator 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-radius | var(--dsc-avatar-stack-radius) |
| --dsc-avatar-size | var(--dsc-avatar-stack-size) |
| --dsc-avatar-stack-gap | 2px |
| --dsc-avatar-stack-overlap | var(--ds-size-3) |
| --dsc-avatar-stack-radius | var(--ds-border-radius-full) |
| --dsc-avatar-stack-size | var(--ds-size-12) |
| --dsc-avatar-stack-suffix-gap | var(--ds-size-3) |
| Navn | Verdi |
|---|---|
| data-expandable | fixed |
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.
Merk: I nettlesere som ikke støtter sibling-index() vil data-expandable="fixed" ikke tegne riktig hvis den innheholder mer enn 12 avatarer.
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> <li> <Avatar aria-label=''> <img src='/img/component-docs/cats/cat1.webp' alt='' /> </Avatar> </li> <li> <Avatar aria-label=''> <img src='/img/component-docs/cats/cat6.webp' alt='' /> </Avatar> </li> <li> <Avatar aria-label=''> <img src='/img/component-docs/cats/cat1.webp' alt='' /> </Avatar> </li> <li> <Avatar aria-label=''> <img src='/img/component-docs/cats/cat6.webp' alt='' /> </Avatar> </li> </EXPERIMENTAL_AvatarStack> </fieldset> <fieldset> <legend>expandable="fixed"</legend> <EXPERIMENTAL_AvatarStack expandable='fixed'> <li> <Avatar aria-label=''> <img src='/img/component-docs/cats/cat1.webp' alt='' /> </Avatar> </li> <li> <Avatar aria-label=''> <img src='/img/component-docs/cats/cat6.webp' alt='' /> </Avatar> </li> <li> <Avatar aria-label=''> <img src='/img/component-docs/cats/cat1.webp' alt='' /> </Avatar> </li> <li> <Avatar aria-label=''> <img src='/img/component-docs/cats/cat6.webp' alt='' /> </Avatar> </li> </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 en avluttende <li> med tekst for å indikere f.eks. +5.
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> <li> <Avatar aria-label=''> <img src='/img/component-docs/cats/cat1.webp' alt='' /> </Avatar> </li> <li> <Avatar aria-label=''> <BriefcaseIcon /> </Avatar> </li> <li> <Avatar aria-label='' initials='sm' /> </li> <li> <Avatar data-color='neutral' aria-label='' style={{ '--dsc-avatar-font-size': '1.1rem' } as React.CSSProperties} > +14 </Avatar> </li> </EXPERIMENTAL_AvatarStack> <EXPERIMENTAL_AvatarStack> <li> <Avatar aria-label=''> <img src='/img/component-docs/cats/cat1.webp' alt='' /> </Avatar> </li> <li> <Avatar aria-label=''> <BriefcaseIcon /> </Avatar> </li> <li> <Avatar aria-label='' initials='sm' /> </li> <li> <Avatar aria-label='' initials='on' /> </li> <li>+14</li> </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 style={ { '--dsc-avatar-stack-size': 'clamp(5rem, 1.5rem + 2vw, 10rem)', } as React.CSSProperties } > <li> <Avatar aria-label=''> <img src='/img/component-docs/cats/cat6.webp' alt='' /> </Avatar> </li> <li> <Avatar aria-label=''> <img src='/img/component-docs/cats/cat1.webp' alt='' /> </Avatar> </li> <li> <Avatar aria-label=''> <img src='/img/component-docs/cats/cat6.webp' alt='' /> </Avatar> </li> <li> <Avatar aria-label=''> <img src='/img/component-docs/cats/cat1.webp' alt='' /> </Avatar> </li> </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 style={ { '--dsc-avatar-stack-gap': '6px', } as React.CSSProperties } > <li> <Avatar aria-label='' initials='AA' /> </li> <li> <Avatar aria-label='' initials='BB' /> </li> <li> <Avatar aria-label='' initials='CC' /> </li> <li> <Avatar aria-label='' initials='DD' /> </li> </EXPERIMENTAL_AvatarStack> ); render(<Gap />)
React
EXPERIMENTAL_AvatarStack
- 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.) @deprecated Please use `style={{ '--dsc-avatar-stack-gap': VALUE }}` instead
- 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.) @deprecated Please use `style={{ '--dsc-avatar-stack-size': VALUE }}` instead
- Type
string- Default
'var(--ds-size-12)'
- overlap
- Description
A number which represents the percentage value of how much avatars should overlap. @deprecated Please use `style={{ '--dsc-avatar-stack-overlap': VALUE }}` instead
- Type
string | number- Default
50
- suffix
- Description
Text to the right of the avatars to show a number representing additional avatars not shown such as '+5'". @deprecated Please use a trailing `<li>` with text instead
- Type
string
- expandable
- Description
Expand on hover to show full avatars. 'fixed': AvatarStack physical width does not change when avatars are expanded.
- Type
boolean | "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.) @deprecated Please use `style={{ '--dsc-avatar-stack-gap': VALUE }}` instead |
| 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.) @deprecated Please use `style={{ '--dsc-avatar-stack-size': VALUE }}` instead |
| overlap | string | number | 50 | A number which represents the percentage value of how much avatars should overlap. @deprecated Please use `style={{ '--dsc-avatar-stack-overlap': VALUE }}` instead |
| suffix | string | - | Text to the right of the avatars to show a number representing additional avatars not shown such as '+5'". @deprecated Please use a trailing `<li>` with text instead |
| expandable | boolean | "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 aria-label='contributors'> <li> <Tooltip content='Ola Katt'> <Avatar aria-label='' asChild> <a href='#'> <img src='/img/component-docs/cats/cat1.webp' alt='' /> </a> </Avatar> </Tooltip> </li> <li> <Tooltip content='Kari Katt'> <Avatar aria-label='' asChild> <a href='#'> <img src='/img/component-docs/cats/cat6.webp' alt='' /> </a> </Avatar> </Tooltip> </li> <li> <Tooltip content='Katt 2'> <Avatar aria-label='' asChild> <a href='#'> <img src='/img/component-docs/cats/cat1.webp' alt='' /> </a> </Avatar> </Tooltip> </li> <li> <Tooltip content='Børge Katt'> <Avatar aria-label='' asChild> <a href='#'>BK</a> </Avatar> </Tooltip> </li> </EXPERIMENTAL_AvatarStack> </fieldset> <fieldset> <legend>Link + Tooltip expandable</legend> <EXPERIMENTAL_AvatarStack expandable='fixed' aria-label='contributors'> <li> <Tooltip content='Ola Katt'> <Avatar aria-label='' asChild> <a href='#'> <img src='/img/component-docs/cats/cat6.webp' alt='' /> </a> </Avatar> </Tooltip> </li> <li> <Tooltip content='Kari Katt'> <Avatar aria-label='' asChild> <a href='#'> <img src='/img/component-docs/cats/cat1.webp' alt='' /> </a> </Avatar> </Tooltip> </li> <li> <Tooltip content='Katt 2'> <Avatar aria-label='' asChild> <a href='#'> <img src='/img/component-docs/cats/cat6.webp' alt='' /> </a> </Avatar> </Tooltip> </li> <li> <Tooltip content='Børge Katt'> <Avatar aria-label='' asChild> <a href='#'>BK</a> </Avatar> </Tooltip> </li> </EXPERIMENTAL_AvatarStack> </fieldset> </div> ); render(<WithTooltipAndLink />)