Modal Content
Type: React component
How to get ModalContent?
JavaScript
import { ModalContent } from 'fds/components';
An arbitrary modal container which draws a border around it to create a separated "box". ModalContent containers can be nested inside each other to create the desired composition, while the component handles which borders to draw.
Should be used as a direct child of ModalBody (but after ModalBodyToolbar) or another ModalContent.
Props
align
Items (Optional)
Type: String
The value to use for CSS' align-items property, should be one of:
-
'baseline',
-
'center',
-
'flex-end',
-
'flex-start',
-
'stretch'
Default value
-
children
(Required)
Type: ReactNode
flex
(Optional)
Type: Number | String
The value to use for CSS' flex property.
Default value
flex
Direction (Optional)
Type: String
The value to use for CSS' flex-direction property, should be one of:
-
'column',
-
'column-reverse',
-
'row',
-
'row-reverse'
Default value
-
is
Scroll Container (Optional)
Type: Boolean
Whether or not this component should act as a scroll container. Meaning, if it should render a (vertical) scrollbar if the contents of the component exceed their bounds; available space.
When making a component a scroll container, a renderer is also introduced. This is used to render positioned elements like Drop to.
Default value
justify
Content (Optional)
Type: String
The value to use for CSS' justify-content property, should be one of:
-
'center',
-
'flex-end',
-
'flex-start',
-
'space-around'
-
'space-between'
Default value
-
padding
Size (Optional)
Type: Number | String | Object
The amount of padding rendered by the component.
This should be a either, A single size value, one of the following values:
-
0 (zero, no padding at all)
-
's' (small)
-
'm' (medium)
-
'l' (large) to set the paddingSize for the top, right, bottom and left side to a single shared value.
Or you can pass an object whose properties determine a specific padding size for either:
-
'horizontal': %single size value% to set the 'left' and 'right' padding to the given size value (one of the values listed above)
-
'vertical': %single size value% to set the 'top' and 'bottom' padding
Or you can pass any combination of 'bottom', 'horizontal', 'left', 'right', 'top', 'vertical', where the more specific keys override the generic (eg. setting 'left': 's' and 'horizontal': 'm' would result in a padding size of 's' for the left side and a size of 'm' for the right side.
Default value
-
space
Size (Optional)
Type: Number | String
The amount of space (or margin) between the children of the component. Depending on the flexDirection value, either horizontal or vertical space is created.
This should be one of the following values:
-
0 (zero, no margin at all)
-
's' (small)
-
'm' (medium)
-
'l' (large)
Default value
-