Description
To make it easier to build application layout and form-views in line with defined design sketches, there are a number of components for layout.
-
Flex.Container is a building block for CSS flexbox based layout of contents and components.
Flex.Verticalcan be used as an alias instead of the propertydirection="vertical".Flex.Horizontalcan be used as an alias instead of the propertydirection="horizontal".
-
Flex.Item is a building block for CSS flexbox based layout of contents and components.
-
Flex.Stack is an outer block element for wrapping content to get the correct layout and spacing between region and region headings.
import { Flex } from '@dnb/eufemia'render(<Flex.Container><Flex.Item>content</Flex.Item></Flex.Container>,)
You find more related information in the Layout pages.
Demos
Used in forms
Profile
Name
More information
Code Editor
<Flex.Stack> <Form.MainHeading>Profile</Form.MainHeading> <Card stack> <Form.SubHeading>Name</Form.SubHeading> <Field.String label="Fornavn" value="John" /> <Field.String label="Etternavn" value="Smith" /> </Card> <Card stack> <Form.SubHeading>More information</Form.SubHeading> <Field.NationalIdentityNumber value="20058512345" /> <Field.Email value="john@smith.email" /> <Field.PhoneNumber value="+47 98765432" /> </Card> </Flex.Stack>
Responsive Flex.Item
With the default sizeCount of 12 parts.
FlexItem (8)
FlexItem (4)
FlexItem (small: 8, medium: 4)
FlexItem (small: 4, medium: 8)
Code Editor
<Flex.Container> <Flex.Item size={8}> <TestElement style={colors[0]}>FlexItem (8)</TestElement> </Flex.Item> <Flex.Item size={4}> <TestElement style={colors[1]}>FlexItem (4)</TestElement> </Flex.Item> <Flex.Item size={{ small: 12, medium: 4, }} > <TestElement style={colors[2]}> FlexItem (small: 8, medium: 4) </TestElement> </Flex.Item> <Flex.Item size={{ small: 12, medium: 8, }} > <TestElement style={colors[3]}> FlexItem (small: 4, medium: 8) </TestElement> </Flex.Item> </Flex.Container>
Customized Flex.Item sizes
With a custom amount of 4 parts (sizeCount) as well as custom breakpoints and media queries.
FlexItem
FlexItem
FlexItem
FlexItem
Code Editor
const breakpoints = { ...defaultBreakpoints, xsmall: '30em', } const queries = { ...defaultQueries, xsmall: { min: 0, max: 'xsmall', }, small: { min: 'xsmall', max: 'small', }, } const CustomMediaQuery = styled.div` display: flex; flex-direction: column; .dnb-flex-container[data-media-key='xsmall'] .dnb-flex-item--responsive { --size: var(--xsmall); } ` render( <CustomMediaQuery> <Flex.Container direction="horizontal" sizeCount={4} breakpoints={breakpoints} queries={queries} > <Flex.Item size={{ small: 2, medium: 3, large: 1, }} > <TestElement style={colors[0]}>FlexItem</TestElement> </Flex.Item> <Flex.Item size={{ small: 2, medium: 1, large: 2, }} > <TestElement style={colors[1]}>FlexItem</TestElement> </Flex.Item> <Flex.Item size={{ xsmall: 4, small: 2, medium: 1, large: 1, }} > <TestElement style={colors[2]}>FlexItem</TestElement> </Flex.Item> <Flex.Item size={{ xsmall: 4, small: 2, medium: 3, large: 4, }} > <TestElement style={colors[3]}>FlexItem</TestElement> </Flex.Item> </Flex.Container> </CustomMediaQuery>, )