Komponenter

AvatarStack

AvatarStack stabler en samling Avatar elementer

Oversikt Kode Tilgjengelighet

AvatarStack er under utvikling. Har du tilbakemelding eller innspill, meld fra på Github eller i Slack.

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.

Bruk

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>;

Eksempel

Tilpassbarhet

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

React

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.

Indikere avatarer som ikke vises

AvatarStack 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 tekst-størrelsen på denne avataren med --dsc-avatar-font-size dersom det skal være plass til to-sifret eller høyere tall.

Størrelser

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

React

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

AvatarStack bruker css mask for å lage det synlige mellomrommet mellom avatarene. Standard er 2px men kan tilpasses med gap

Avatarer i AvatarStack kan ha tooltip og være lenker, men vær obs på tilgjengelighetshensyn. Bruk asChild for å gjøre en Avatar til en lenke.

React

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 />)

HTML

For å lage en AvatarStack i ren html brukes klassen ds-avatar-stack på en <figure>. 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 tekst-indikator for skjulte avatarer.

<figure  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></figure>

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 atributter

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

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

AvatarStack

Bruk

Eksempel

Tilpassbarhet

Expandable

Indikere avatarer som ikke vises

Størrelser

Gap

Link og Tooltip

HTML

CSS variabler og data atributter