Størrelsar i kode

HTML data-attributt og css custom properties (variablar) vert brukt for å definere størrelsesmodus for ein komponent. Dette fungerar for alle komponentar og HTML-element, med nokon få unntak som er nemnt lenger ned.

Størrelsesmodusen påverkar våre størrelsesvariablar (--ds-size-*) og fontstørrelsesvariablar (--ds-font-size-* og --ds-*-font-size-*).

Sette størrelsesmodus med data-size

Dette data-attributtet blir brukt for å endre størrelsesmodus, som påverkar elementet og alle etterkommar-element. Vi støttar tre størrelsesmodusar ut av boksen: sm, md eller lg. Som standard vil md bli brukt.

Sette størrelsesmodus med css custom properties

Du kan sette css-variabelen --ds-size i staden for å sette ein spesifikk størrelsesmodus i markupen. Fordelen med dette er at du då kan endre størrelsesmodus basert på ein media query eller container query.

Du gjer dette ved å definere --ds-size: var(--ds-size--<mode>), der <mode> er anten sm, md eller lg. Merk at du også må sette attributtet data-size på elementet der modusen skal inntreffe, men det kan vere blankt eller kva som helst anna enn "sm", "md" eller "lg".

Eksempel: Legge til ein "auto"-størrelsesmodus

Unntak

Enkelte komponentar bruker ikkje data-size for å sette størrelsesmodus. I staden vil attributtet sette komponentstørrelsen. Dette gjeld

• Avatar
• Heading
• Paragraph
• Spinner

Desse komponentane støttar andre størrelsar, som xs og xl. Sjekk komponentdokumentasjonen for å sjå kva størrelsar dei støttar.

Dei vil likevel bli påverka av størrelsesmodus på forfedrar. Til dømes vil det første avsnittet i dette eksempelet vere mindre enn det andre:

Det er forvirrande at data-size betyr størrelsesmodus i nokre samanhengar, og komponentstørrelse i andre. Dette vil sannsynlegvis bli endra i neste major-versjon som ein breaking change.

Eigendefinerte størrelsesmodusar

Under panseret endrar variablane våre seg basert på den lokale verdien av --ds-size-mode-font-size, og bruker rem for å skalere med nettlesarinnstillingane til brukaren. data-size="<mode>" og --ds-size: var(--ds-size--<mode>) fungerar ved å sette --ds-size-mode-font-size til verdiar som samsvarar med dei samme størrelsesmodusane i Figma, men du kan òg sette denne variabelen direkte for eigendefinerte størrelsar.

Merk at du også må sette attributtet data-size på elementet der modusen skal inntreffe, men det kan vere blankt eller kva som helst anna enn "sm", "md" eller "lg".

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