Käyttötarkoitus
Spacing-komponenttia käytetään tyhjän tilan luomiseen elementtien välille välistysarvojen mukaisesti.
Komponentti itsessään ei tee mitään näkyvää, vaan sitä käytetään muiden komponenttien kanssa.
Esimerkit
Välistyksen asettaminen
Välistys voidaan antaa joko CSS:n margin (oletus) tai padding-arvoina.
<>
<Spacing base={2} side="bottom">
<Box variant="primary" m={0} className="kds-text-center kds-text-brand-primary">
2
</Box>
</Spacing>
<Spacing base={4} side="bottom">
<Box variant="primary" m={0} className="kds-text-center kds-text-brand-primary">
4
</Box>
</Spacing>
<Spacing base={6} side="bottom">
<Box variant="primary" m={0} className="kds-text-center kds-text-brand-primary">
6
</Box>
</Spacing>
<Spacing base={8} side="bottom">
<Box variant="primary" m={0} className="kds-text-center kds-text-brand-primary">
8
</Box>
</Spacing>
</>
Välistyksen asettaminen responsiivisesti
Tukee toistaiseksi vain sm ja md -breakpointteja ja arvoja 0, 2, 4 ja 6.
<>
<Spacing base={4} sm={6} side="bottom">
<Box variant="primary" m={0} className="kds-text-center kds-text-brand-primary">
< {BREAKPOINT_SM} px = 1 rem
<br />
≥ {BREAKPOINT_SM} px = 1.5 rem
</Box>
</Spacing>
<Spacing base={4} sm={6} side="bottom">
<Box variant="primary" m={0} className="kds-text-center kds-text-brand-primary">
< {BREAKPOINT_SM} px = 1 rem
<br />
≥ {BREAKPOINT_SM} px = 1.5 rem
</Box>
</Spacing>
<Spacing base={4} sm={6} side="bottom">
<Box variant="primary" m={0} className="kds-text-center kds-text-brand-primary">
< {BREAKPOINT_SM} px = 1 rem
<br />
≥ {BREAKPOINT_SM} px = 1.5 rem
</Box>
</Spacing>
</>
Negatiivisen välistyksen asettaminen
Välistys voidaan antaa myös negatiivisena. Käytännön esimerkkejä löydät Accordion-komponentin ja korttimaisten esitystapojen ohjeesta.
<Spacing base={4} sm={0} side="x" negative>
<Box variant="primary" m={0} className="kds-text-center kds-text-brand-primary">
Mobiilinäytöillä (< {BREAKPOINT_SM} px) elementti on kiinni reunoissa.
</Box>
</Spacing>