Komponenter
GuidePanel
GuidePanel gir en vennlig velkomst og introduksjon av en løsning eller side.
Egnet til:
- Forklare brukeren hva hen gjør på siden.
- Veilede brukeren.
Uegnet til:
- Vise viktige meldinger eller varsler.
Eksempler
Retningslinjer
- GuidePanel er laget for å ligge øverst på siden.
- Ikke bruk flere guidepanels på samme side.
Innhold
Teksten bør holdes kort, tydelig og informativ. Bruk kun tekstlig innhold. GuidePanel er ikke designet for å vise viktige meldinger, da må du bruke Alert.
Avatar
Avataren skal inneholde en Illustrasjon av en person. For å endre må du bruke Aksels illustrasjonsbibliotek i Figma.
Props
GuidePanel
children
- Type:
ReactNode - Description:
GuidePanel content
illustration?
- Type:
ReactNode - Description:
Custom svg/img element
poster?
- Type:
boolean - Default:
true on mobile (<480px) - Description:
Render illustation above content
className?
- Type:
string
data-color?
- Type:
AkselColor | (string & {})
ref?
- Type:
LegacyRef<HTMLDivElement> - Description:
Allows getting a ref to the component instance. Once the component unmounts, React will set
ref.currenttonull(or call the ref withnullif you passed a callback ref). React Docs
Tokens
Deprecation warning: I det nye systemet for theming og darkmode, er komponent-tokens fjernet. Mer dokumentasjon for dette kommer, midlertidig dokumentasjon finner du her.
| Token | Fallback |
|---|---|
| --ac-guide-panel-bg | --a-surface-default |
| --ac-guide-panel-border | --a-border-alt-3 |
| --ac-guide-panel-illustration-bg | --a-surface-alt-3-subtle |