SidebarInlay

How to get SidebarInlay

import { SidebarInlay } from 'fds/components';

Type: Component

An arbitrary Inlay container specific for use within a sidebar tab. SidebarInlay is often used with a Form or any textual content as child. Additionally it serves as a scroll container.

Props

# Name Type Description
1. children ReactNode
2. [paddingSize] 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
"m"
3. [spaceSize] 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
"m"

Related links

Was this page helpful?