Komponent-API

asChild-propen

Noen komponenter (blant annet de fleste primitives) støtter asChild-propen. Den kan brukes til å slå sammen DOM-noder. Klasser, stiler og event-handlers slås da sammen. Dette kan være nyttig for å forenkle DOM-en, men gjør det også mulig å løse noe layout enklere. For at dette skal fungere må child kunne ta inn className og style som props.

// React
<Box asChild background="...">
  <HStack gap="space-16">
    <div />
    <div />
  </HStack>
</Box>

// HTML output
<div class="box hstack">
  <div />
  <div />
</div>

as-propen (OverridableComponent)

Mange av komponentene i Aksel er implementert med OverridableComponent. Dette API-et gjør det enkelt å overstyre hvilken komponent eller tag den rendres med.

Et vanlig eksempel på dette er når routeren din har sin egen Link-komponent, men du ønsker stylingen til Aksel sin Link-komponent. Da kan du bruke as-propen som vist under. Prop-typene slås sammen, og ved overlapp er det Aksel som tar presedens.

<Link as={Router.Link} to="/about">About</Link>

Extende komponenter

For å få riktige props ved extension av komponenter med OverridableComponent-API, må man bruke typeof <komponentnavn>

const CustomButton = (props: React.ComponentPropsWithRef<typeof Button>) => {
  ... custom code
  <Button {...props} />
}

Styled-components

Flere CSS-in-JS-biblioteker bruker også et as-attributt for å overstyre tag eller komponent, noe som kan komplisere ting når man for eksempel bruker styled-components for å style en komponent fra Aksel.

For styled-components kan man bruke forwardedAs i stedet for as på komponentene.

Layout primitives

Primitives er komponenter som hjelper deg med å lage layout, uten å måtte skrive egen CSS. Komponentene bruker våre design tokens i props der det er relevant.

ResponsiveProp

En av grunnpilarene til våre layout primitives er typen ResponsiveProp. Typen gjør det mulig å sette prop-verdien basert på brekkpunkt. Dette lar deg eksempelvis endre gap basert på skjermbredde:

type ResponsiveProp<T> = T | {
  [Breakpoint in "xs" | "sm" | "md" | "lg" | "xl" | "2xl"]?: T;
};

// Statisk gap
<HStack gap="space-16">
   ...
</HStack>

// Dynamisk gap
<HStack gap={{xs: "space-8", md: "space-16"}}>
   ...
</HStack>

BasePrimitive

Komponentene HGrid, Box, HStack, VStack og Stack arver fra en base-type som har de mest brukte størrelses- og posisjons-attributtene i CSS. I props som har med avstander å gjøre, må du bruke verdier basert på tokens fra Aksel. F.eks. padding="space-16" gir --ax-space-16 som tilsvarer 1rem.

Lenke til typen