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.

HTML

HTMLReact

Trykk Enter for å redigere

Unable to parse html

const Preview = () => (
  <EXPERIMENTAL_AvatarStack>
    <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=''>md</Avatar>
    <Avatar aria-label='' initials='on' />
  </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.

<span  class="ds-avatar-stack"  data-expandable="fixed"  style="--dsc-avatar-count: 3;"  tabindex="0"  aria-label="contributors"  data-suffix="+4">  <span class="ds-avatar" data-variant="circle" role="img" aria-label="">    <img alt="" aria-hidden="true" src="..." />  </span>  <span    class="ds-avatar"    data-variant="circle"    data-initials="ON"    role="img"    aria-label=""  ></span>  <span class="ds-avatar" data-variant="circle" role="img" aria-label="">    <span>ON</span>  </span></span>

Dersom du vil overstyre standard gap/size/overlap gjøres det via disse CSS-variablene:

.ds-avatar-stack {  --dsc-avatar-stack-gap: 4px; /* standard er 2px */  --dsc-avatar-stack-avatar-size: 3rem; /* standard er var(--ds-size-12) */  --dsc-avatar-stack-overlap: 30; /* standard er 50 */}

CSS variabler og data-attributter

Avatar stack bruker egne CSS-variabler for å styre gap, størrelse og overlapp.

CSS-variabler
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)

Data-attributter
Navn	Verdi
data-expandable	fixed
data-suffix
data-variant	square

Eksempel

Tilpassbarhet

Avatar stack er laget for å være fleksibel nok til å dekke mange ulike behov og brukstilfeller.

HTML

HTMLReact

Trykk Enter for å redigere

Unable to parse html

const Playground = () => {
  const [expandable, setExpandable] = useState<undefined | true>(undefined);
  const [square, setSquare] = useState(false);
  const [size, setSize] = useState(64);
  const [overlap, setOverlap] = useState(50);
  const [gap, setGap] = useState(2);
  const labelStyle = {
    display: 'flex',
    flexDirection: 'column',
    gap: 'var(--ds-size-2)',
    accentColor: 'var(--ds-color-base-default)',
  } as const;

  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: 'var(--ds-size-8)',
        minHeight: '370px',
      }}
    >
      <fieldset
        style={{
          display: 'grid',
          gridTemplateColumns:
            'repeat(auto-fit, minmax(min(100%, 320px), 1fr))',
          gap: 'var(--ds-size-4)',
        }}
      >
        <div
          style={{
            display: 'flex',
            gap: 'var(--ds-size-3)',
            alignItems: 'center',
          }}
        >
          <Checkbox
            label='Expandable'
            checked={expandable !== undefined}
            onChange={() => setExpandable((prev) => (prev ? undefined : true))}
          />
          <Checkbox
            label='square'
            checked={square}
            onChange={() => setSquare((prev) => !prev)}
          />
        </div>
        <Label style={labelStyle}>
          avatarSize {`${size}px`}
          <input
            min='24'
            max='150'
            step='0.1'
            type='range'
            value={size}
            onChange={(e) =>
              setSize(Number((e.target as HTMLInputElement).value))
            }
          />
        </Label>
        <Label style={labelStyle}>
          Overlap {`${overlap}`}
          <input
            min='-10'
            max='100'
            step='1'
            type='range'
            value={overlap}
            onChange={(e) =>
              setOverlap(Number((e.target as HTMLInputElement).value))
            }
          />
        </Label>
        <Label style={labelStyle}>
          Gap {`${gap}px`}
          <input
            min='0'
            max='15'
            step='1'
            type='range'
            value={gap}
            onChange={(e) =>
              setGap(Number((e.target as HTMLInputElement).value))
            }
          />
        </Label>
      </fieldset>

      <EXPERIMENTAL_AvatarStack
        overlap={overlap}
        data-suffix={`+10`}
        gap={`${gap}px`}
        avatarSize={`${size}px`}
        expandable={expandable}
      >
        <Avatar aria-label='' variant={square ? 'square' : 'circle'}>
          <img src='/img/component-docs/cats/cat1.webp' alt='' />
        </Avatar>
        <Avatar aria-label='' variant={square ? 'square' : 'circle'}>
          <img src='/img/component-docs/cats/cat6.webp' alt='' />
        </Avatar>
        <Avatar aria-label='' variant={square ? 'square' : 'circle'}>
          md
        </Avatar>
        <Avatar aria-label='' variant={square ? 'square' : 'circle'}>
          <img src='/img/component-docs/cats/cat1.webp' alt='' />
        </Avatar>
        <Avatar aria-label='' variant={square ? 'square' : 'circle'}>
          <img src='/img/component-docs/cats/cat6.webp' alt='' />
        </Avatar>
      </EXPERIMENTAL_AvatarStack>
    </div>
  );
};

render(<Playground />)

Expandable

expandable animerer overlap til 0 ved hover eller fokus. Bruk expandable="fixed" for å utvide med overflow uten å endre den fysiske bredden. tabindex="0" blir automatisk lagt med expandable, men dette kan overstyres.

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.

Størrelser

Du kan ikke bruke data-size for å endre størrelsen på avatarer i en avatar stack. I stedet styres størrelsen via avatarSize prop på AvatarStack. Denne må oppgis i en gyldig CSS-lengdeenhet (px, em, rem, var(--ds-size-6) osv.).

HTML

HTMLReact

Trykk Enter for å redigere

Unable to parse html

const DataSize = () => (
  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--ds-size-8)' }}>
    <fieldset>
      <legend>avatarSize='var(--ds-size-8)'</legend>
      <EXPERIMENTAL_AvatarStack avatarSize={'var(--ds-size-8)'}>
        <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>
    </fieldset>
    <fieldset>
      <legend>avatarSize='3em'</legend>
      <EXPERIMENTAL_AvatarStack avatarSize='3em'>
        <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>
    </fieldset>
    <fieldset>
      <legend>avatarSize='clamp(2rem, 1.5rem + 2vw, 4rem)'</legend>
      <EXPERIMENTAL_AvatarStack avatarSize='clamp(2rem, 1.5rem + 2vw, 4rem)'>
        <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>
    </fieldset>
  </div>
);

render(<DataSize />)

Gap

Avatar stack bruker CSS mask for å lage det synlige mellomrommet mellom avatarene. Standard er 2px, men kan tilpasses med gap.

React

import {  EXPERIMENTAL_AvatarStack as AvatarStack,  Avatar,} from "@digdir/designsystemet-react";
<AvatarStack aria-label="contributors" avatarSize="2rem" overlap={40}>  <Avatar aria-label="Ola Nordmann">ON</Avatar>  <Avatar aria-label="Ola Nordmann" data-initials="ON" />  <Avatar aria-label="Ola Nordmann">    <img src="..." />  </Avatar></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.)
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.

HTML

HTMLReact

Trykk Enter for å redigere

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 Nordmann'>
          <Avatar aria-label='' asChild>
            <a href='#'>
              <img src='/img/component-docs/cats/cat1.webp' alt='' />
            </a>
          </Avatar>
        </Tooltip>
        <Tooltip content='Kari Nordmann'>
          <Avatar aria-label='' asChild>
            <a href='#'>
              <img src='/img/component-docs/cats/cat6.webp' alt='' />
            </a>
          </Avatar>
        </Tooltip>
        <Tooltip content='Person 2'>
          <Avatar aria-label='' asChild>
            <a href='#'>
              <img src='/img/component-docs/cats/cat1.webp' alt='' />
            </a>
          </Avatar>
        </Tooltip>
        <Tooltip content='Person 3'>
          <Avatar aria-label='' asChild>
            <a href='#'>BR</a>
          </Avatar>
        </Tooltip>
      </EXPERIMENTAL_AvatarStack>
    </fieldset>
    <fieldset>
      <legend>Link + Tooltip expandable</legend>
      <EXPERIMENTAL_AvatarStack
        overlap={50}
        expandable='fixed'
        aria-label='contributors'
      >
        <Tooltip content='Ola Nordmann'>
          <Avatar aria-label='' asChild>
            <a href='#'>
              <img src='/img/component-docs/cats/cat6.webp' alt='' />
            </a>
          </Avatar>
        </Tooltip>
        <Tooltip content='Kari Nordmann'>
          <Avatar aria-label='' asChild>
            <a href='#'>
              <img src='/img/component-docs/cats/cat1.webp' alt='' />
            </a>
          </Avatar>
        </Tooltip>
        <Tooltip content='Person 2'>
          <Avatar aria-label='' asChild>
            <a href='#'>
              <img src='/img/component-docs/cats/cat6.webp' alt='' />
            </a>
          </Avatar>
        </Tooltip>
        <Tooltip content='Person 3'>
          <Avatar aria-label='' asChild>
            <a href='#'>BR</a>
          </Avatar>
        </Tooltip>
      </EXPERIMENTAL_AvatarStack>
    </fieldset>
  </div>
);

render(<WithTooltipAndLink />)

Rediger denne siden på github.com (åpnes i ny fane)