Typography
6.3.2
Use the Typography component to present your design and content as clearly and efficiently as possible.
| Namn | Typ | Beskrivning |
|---|---|---|
capitalizeFirstLetter | boolean | Capitalize first letter, default false. |
children | Element |
ReactNode | |
color | string | Color of the text. |
component | ElementType | Change the component of the Typography element. Use this to separate styling from semantics, for instance if you need an H2 heading to look like an H3. |
customAttribute | { attribute: string; value: string |
number } | Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]". |
disableHyphens | boolean | Disable default hyphenation for headings. |
disableWordWrap | boolean | Disable word wrapping. |
isLoading | boolean | If true, a loading skeleton will be rendered instead of the component. |
loadingWhitespace | "normal" |
"nowrap" | Whitespace handling for loading skeleton |
skeletonSx | SxProps | Custom styles for Skeleton. |
variant | "link" |
"h1" |
"h2" |
"h3" |
"h4" |
"error" |
"caption" |
"subtitle1" |
"body1" |
"overline" |
"inherit" |
"h1Small" |
"h1Medium" |
"h1Large" |
"button1" |
"button2" |
"srOnly" | Applies the theme typography styles. |
npm install @sj-ab/component-library.ui.typographyTypography är vår överlägset mest använda komponent och har stor betydelse för tillgängligheten
Typography får sin default-semantik av dess variant-prop:
<h1> till <h4><h1><p><p><p><p><span><span><span><p><span>Den inbyggda semantiken ovan går att skriva över med hjälp av propen component. Detta måste man ofta göra för att bibehålla en korrekt rubrikstruktur på alla sidor.
Man vill kanske använda en visuell h3-rubrik, men ska placera den på h2-nivå i strukturen:
Det går också att ändra en <p> till en <span> eller vice versa på samma sätt.
Alla utvecklare ansvarar för att rubrikstrukturen ska bli korrekt på varje enskild sida, utan att hoppa över nivåer.
Alla textstorlekar är definierade med rem istället för px. Detta gör det möjligt för användare med nedsatt syn att ändra textstorleken i sin webbläsare upp till 200% och få de större storlekarna att slå igenom på hela webbplatsen.