nve-stack
nve-stack stabler barn-elementer vertikalt med mellomrom.
gap er knyttet direkte til spacing-tokenene i designsystemet og er det som sikrer at avstandene er konsistente på tvers av sider og komponenter.
Import
Layout-komponentene ligger et nivå under de andre komponentene. For å bruke disse kan du følge stien med /layout etterfulgt av komponentet du vil bruke. Eksempel:
javascript
import 'nve-designsystem/components/layouts/nve-stack/nve-stack.component.js';Native element
Bruk as for å velge det native HTML-elementet som omslutter innholdet.
html
<nve-stack as="section" role="region" aria-label="Kontaktinformasjon">
<nve-heading level="2">Kontakt oss</nve-heading>
<nve-paragraph>Ta kontakt med oss.</nve-paragraph>
</nve-stack>Gyldige verdier for as er div, section, article, aside, nav, main, header, footer og ul.
Mellomrom
gap setter avstanden mellom barn-elementene ved bruk av et spacing-token.
Gyldige spacing-verdier
Følgende verdier er gyldige for gap: none, 2x-small, x-small, small, medium (default), large, x-large, 2x-large, 3x-large, 4x-large og 5x-large.
html
<nve-box padding="small" background="--color-neutrals-background-canvas">
<nve-stack gap="small">
<div style="padding: 0.75rem; background: var(--color-feedback-background-default-info)"></div>
<div style="padding: 0.75rem; background: var(--color-feedback-background-default-info)"></div>
<div style="padding: 0.75rem; background: var(--color-feedback-background-default-info)"></div>
</nve-stack>
</nve-box>
<nve-box padding="small" background="--color-neutrals-background-canvas">
<nve-stack>
<div style="padding: 0.75rem; background: var(--color-feedback-background-default-info)"></div>
<div style="padding: 0.75rem; background: var(--color-feedback-background-default-info)"></div>
<div style="padding: 0.75rem; background: var(--color-feedback-background-default-info)"></div>
</nve-stack>
</nve-box>
<nve-box padding="small" background="--color-neutrals-background-canvas">
<nve-stack gap="large">
<div style="padding: 0.75rem; background: var(--color-feedback-background-default-info)"></div>
<div style="padding: 0.75rem; background: var(--color-feedback-background-default-info)"></div>
<div style="padding: 0.75rem; background: var(--color-feedback-background-default-info)"></div>
</nve-stack>
</nve-box>Justering
justify styrer hvordan barn-elementene fordeles vertikalt. Tilsvarer CSS-egenskapen justify-content.
Gyldige justering-verdier
Følgende verdier er gyldige for justify: flex-start (default), flex-end, center, space-between, space-around, space-evenly, start, end, left og right.
html
<nve-box padding="small" background="--color-neutrals-background-canvas">
<nve-stack justify="flex-start" gap="small" style="height: 220px">
<div style="padding: 0.75rem; background: var(--color-feedback-background-default-info)"></div>
<div style="padding: 0.75rem; background: var(--color-feedback-background-default-info)"></div>
<div style="padding: 0.75rem; background: var(--color-feedback-background-default-info)"></div>
</nve-stack>
</nve-box>
<nve-box padding="small" background="--color-neutrals-background-canvas">
<nve-stack justify="center" gap="small" style="height: 220px">
<div style="padding: 0.75rem; background: var(--color-feedback-background-default-info)"></div>
<div style="padding: 0.75rem; background: var(--color-feedback-background-default-info)"></div>
<div style="padding: 0.75rem; background: var(--color-feedback-background-default-info)"></div>
</nve-stack>
</nve-box>
<nve-box padding="small" background="--color-neutrals-background-canvas">
<nve-stack justify="flex-end" gap="small" style="height: 220px">
<div style="padding: 0.75rem; background: var(--color-feedback-background-default-info)"></div>
<div style="padding: 0.75rem; background: var(--color-feedback-background-default-info)"></div>
<div style="padding: 0.75rem; background: var(--color-feedback-background-default-info)"></div>
</nve-stack>
</nve-box>
<nve-box padding="small" background="--color-neutrals-background-canvas">
<nve-stack justify="space-between" gap="small" style="height: 220px">
<div style="padding: 0.75rem; background: var(--color-feedback-background-default-info)"></div>
<div style="padding: 0.75rem; background: var(--color-feedback-background-default-info)"></div>
<div style="padding: 0.75rem; background: var(--color-feedback-background-default-info)"></div>
</nve-stack>
</nve-box>
<nve-box padding="small" background="--color-neutrals-background-canvas">
<nve-stack justify="space-around" gap="small" style="height: 220px">
<div style="padding: 0.75rem; background: var(--color-feedback-background-default-info)"></div>
<div style="padding: 0.75rem; background: var(--color-feedback-background-default-info)"></div>
<div style="padding: 0.75rem; background: var(--color-feedback-background-default-info)"></div>
</nve-stack>
</nve-box>
<nve-box padding="small" background="--color-neutrals-background-canvas">
<nve-stack justify="space-evenly" gap="small" style="height: 220px">
<div style="padding: 0.75rem; background: var(--color-feedback-background-default-info)"></div>
<div style="padding: 0.75rem; background: var(--color-feedback-background-default-info)"></div>
<div style="padding: 0.75rem; background: var(--color-feedback-background-default-info)"></div>
</nve-stack>
</nve-box>Nøsting
Stacks kan nøstes for å bygge opp et hierarki av avstander.
html
<nve-box padding="small" background="--color-neutrals-background-canvas">
<nve-stack gap="large">
<nve-box padding="small" background="--color-neutrals-background-primary-contrast">
<nve-stack gap="small">
<div style="padding: 0.75rem; background: var(--color-feedback-background-default-info)"></div>
<div style="padding: 0.75rem; background: var(--color-feedback-background-default-info)"></div>
<div style="padding: 0.75rem; background: var(--color-feedback-background-default-info)"></div>
</nve-stack>
</nve-box>
<nve-box padding="small" background="--color-neutrals-background-primary-contrast">
<nve-stack gap="small">
<div style="padding: 0.75rem; background: var(--color-feedback-background-default-info)"></div>
<div style="padding: 0.75rem; background: var(--color-feedback-background-default-info)"></div>
</nve-stack>
</nve-box>
</nve-stack>
</nve-box>Eksempel på bruk
Med nve-stack får du konsistent avstand fra et token, uten egen CSS.
html
<nve-stack>
<nve-input label="Navn"></nve-input>
<nve-input label="E-post" type="email"></nve-input>
<nve-textarea label="Melding"></nve-textarea>
<nve-button variant="primary">Send inn</nve-button>
</nve-stack>Uten nve-stack klistrer elementene seg sammen og må styles individuelt for å få luft mellom seg.
html
<div>
<nve-input label="Navn"></nve-input>
<nve-input label="E-post" type="email"></nve-input>
<nve-textarea label="Melding"></nve-textarea>
<nve-button variant="primary">Send inn</nve-button>
</div>Egenskaper
| Egenskap | Type | Standard | Beskrivelse |
|---|---|---|---|
as | LayoutElementTag | div | Native HTML-element som omslutter innholdet, for eksempel section. |
gap | SpacingToken | medium | Tokenbasert mellomrom mellom barn-elementer. |
justify | LayoutJustify | flex-start | Fordeling langs den vertikale aksen. Gyldige verdier er CSS justify-content-verdier. |
padding | SpacingToken | — | Tokenbasert padding på alle sider. |
padding-block | SpacingToken | — | Overstyrer padding i blokk-retning (topp/bunn). |
padding-inline | SpacingToken | — | Overstyrer padding i inline-retning (venstre/høyre). |
margin | SpacingToken | — | Tokenbasert margin på alle sider. |
margin-block | SpacingToken | — | Overstyrer margin i blokk-retning (topp/bunn). |
margin-inline | SpacingToken | — | Overstyrer margin i inline-retning (venstre/høyre). |