Hoppa till huvudinnehåll

Flex

Rutnät
Version: 1.0.2
Versionslogg
Storybook

Grid baserat på tekniken display: flex; i css. Flex är både en container för maxbredd och ett underliggande grid med marginaler och tomrum mellan underliggande element.

Komponenterna Grid och Flex har samma innebörd, använd den vars teknik du är mest bekväm med. För komplexa grid kan Grid vara enklare att hantera.

Installation och användning​

npm install @midas-ds/flex
import { Flex } from '@midas-ds/flex'

Grid​

Grids skalas enligt följande specifikation.

SkärmstorlekYttre marginalerUnderliggande elementKolumnerInre marginaler
0 - 767 px16 pxSkalas116 px
768 px - 1199 px32 pxSkalas1216 px
1200 px - 1440 px32 pxSkalas1224 px
> 1440 pxSkalas1368 px1224 px

FlexItem​

Komponenten <FlexItem> agrerar som direkt child till <Flex>. FlexItem accepterar en prop col som kan ta värdena auto eller 1-12.

Riktlinjer​

När ska du använda Flex ?​

Flex används för att strukturera upp en sida och placera olika saker i kolumner. Med gridkomponenten får du med dig ovan justeringar för responsivitet samt mellanrum mellan kolumner.

Så här använder du Flex​

Använd <Flex></Flex> som komponent och justera de direkt underliggande komponenter till Flex justeras enligt griddets bestämmelser. Justera med barnkomponenten <FlexItem col="antal-kolumner"></FlexItem>.

API​

Flex​

NamnTypStandardBeskrivning
fluid boolean-Tar bort alla marginaler för nestad användning
ref LegacyRef<HTMLDivElement>-Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}
key Key-
defaultChecked boolean-
defaultValue string | number | readonly string[]-
suppressContentEditableWarning boolean-
suppressHydrationWarning boolean-
accessKey string-
autoFocus boolean-
className string-
contentEditable Booleanish | "inherit" | "plaintext-only"-
contextMenu string-
dir string-
draggable Booleanish-
hidden boolean-
id string-
lang string-
nonce string-
slot string-
spellCheck Booleanish-
style CSSProperties-
tabIndex number-
title string-
translate "yes" | "no"-
radioGroup string-
role AriaRole-
about string-
content string-
datatype string-
inlist any-
prefix string-
property string-
rel string-
resource string-
rev string-
typeof string-
vocab string-
autoCapitalize string-
autoCorrect string-
autoSave string-
color string-
itemProp string-
itemScope boolean-
itemType string-
itemID string-
itemRef string-
results number-
security string-
unselectable "on" | "off"-
inputMode "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal"-Hints at the type of data that might be entered by the user while editing the element or its contents @see {@link https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute}
is string-Specify that a standard HTML element should behave like a defined custom built-in element @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is}
dangerouslySetInnerHTML { __html: string | TrustedHTML; }-

FlexItem​

Beroenden

    • react@^18.2.0