Typography
6.1.1
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 | ReactNode |
Element | |
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" |
"h2" |
"h3" |
"h4" |
"h1" |
"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
Semantik
Typography får sin default-semantik av dess variant-prop:
"h1" till "h4" blir
<h1>till<h4>"h1Small", "h1Medium" och "h1Large" blir
<h1>"error" blir
<p>"caption" blir
<p>"subtitle1" blir
<p>"body1" blir
<p>"overline" blir
<span>"button1" blir
<span>"button2" blir
<span>"srOnly" blir
<p>"link" blir
<span>
Anpassa rubriknivåer
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:
<Typography variant="h3" component="h2">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.
Skalbar text
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.
Importer av Typography
Repos med Typography
Senaste installerade version av Typography
Äldsta installerade version av Typography