Whether to animate the Layer content when it opens. This property is deprecated and will be removed in the next major version of grommet. Instead, use 'animation'.
Either a color identifier to use for the background color. For example: 'neutral-1'. Or, a 'url()' for an image. Dark is not needed if color is provided.
Whether the width and/or height should fill the current viewport size.
The amount of margin around the Layer. An object can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side of the layer
"none"
"xsmall"
"small"
"medium"
"large"
"any CSS size"
{
"vertical": "...",
"horizontal": "...",
"top": "...",
"bottom": "...",
"left": "...",
"right": "..."
}
Function that will be invoked on modal layers when the user clicks outside the layer.
() => {}
Whether the border-radius of the Layer should adapt based on the Layer's position. Wherever the Layer is touching the edge of the screen, a border-radius of 0 will be applied.
Elevated height above the underlying container, indicated via a drop shadow. Any Box elevation value is valid.
The actual breakpoint to trigger changes in the border, direction, gap, margin, pad, and round.
"small"
The possible breakpoints that could affect border, direction, gap, margin, pad, and round.
{
"small": {
"value": 768,
"borderSize": {
"xsmall": "1px",
"small": "2px",
"medium": "4px",
"large": "6px",
"xlarge": "12px"
},
"edgeSize": {
"none": "0px",
"hair": "1px",
"xxsmall": "2px",
"xsmall": "3px",
"small": "6px",
"medium": "12px",
"large": "24px",
"xlarge": "48px"
},
"size": {
"xxsmall": "24px",
"xsmall": "48px",
"small": "96px",
"medium": "192px",
"large": "384px",
"xlarge": "768px",
"full": "100%"
}
},
"medium": {"value": 1536},
"large": {}
}