Spacing

Vi tilbyr CSS- og Sass-variabler, en Sass-mixin, og nytteklasser for verdiene i spacing-skalaene til Jøkul. Disse støtter også dynamisk spacing.

Eksempler Kode

Variabler

Sass-variablene kan importeres fra ~@fremtind/jkl-core/jkl. Husk å bruke riktig importsyntaks for byggverktøyet ditt når du importerer. De kan da brukes slik:

@use "~@fremtind/jkl-core/jkl";

.jkl-your-component {
    padding-left: jkl.$spacing-12;
}

CSS-variablene kan brukes direkte uten noen import, så lenge core-stilene fra Jøkul er i bruk i løsningen din.

.jkl-your-component {
    margin-top: var(--jkl-spacing-32);
}

Nytteklasser

Nytteklassene setter en verdi fra spacingskalaene som margin på elementet som har klassen. Det finnes varianter for å sette margin på top, right, bottom og left, samt for alle sider. Klassene kan brukes slik:

<div class="jkl-spacing-40--all">
    <span class="jkl-spacing-12--right">Hallo</span>
    verden
</div>

Sass-mixin

Sass-mixinen jkl.spacing() fungerer på samme måte som nytteklassene, ved at den setter marginer på elementet som har klassen den brukes i. Du kan sette samme margin på alle sider, eller spesifisere en av sidene top, right, bottom eller left:

@use "~@fremtind/jkl-core/jkl";

.jkl-your-component {
    @include jkl.spacing("12"); // tilsvarer margin: jkl.$spacing-12;
}

.jkl-your-component {
    @include jkl.spacing("40", "top"); // tilsvarer margin-top: jkl.$spacing-40;
}

React API

Her finner du en oversikt over props på komponentene i pakken.