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

ReactHTML

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

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

ReactHTML

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

ReactHTML

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 <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 tekst-indikator 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 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)

Hva leter du etter?

AvatarStack

Bruk

Eksempel

Tilpassbarhet

Expandable

Indikere avatarer som ikke vises

Størrelser

Gap

Link og Tooltip

HTML

CSS variabler og data atributter