Using Grommet for HPE?See Layer examples and guidance.
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'.
boolean
true
false
Animation transition of the Layer content when it opens and closes.
boolean
true
false
string
"slide"
"fadeIn"
"none"
Either a color identifier to use for the background color.
string
A color or image url.
"neutral-1"
"url(//my.com/assets/img.png)"
object
Dark is not needed if color is provided.
{ color: "neutral-1", dark: true, image: "url(//my.com/assets/img.png)" position: "bottom", opacity: true, repeat: "no-repeat", size: "cover", light: "string", clip: "text", rotate: 45 }
{ dark: "light-2", light: "dark-2" }
where opacity could be:
"weak"
"medium"
"strong"
boolean
number
where position could be:
any CSS for background-position
where repeat could be:
"no-repeat"
"repeat"
"string"
where size could be:
"cover"
"contain"
"string"
where clip could be:
"text"
"border-box"
"padding-box"
"content-box"
Whether the width and/or height should fill the current viewport size.
boolean
true
false
string
"vertical"
"horizontal"
The amount of margin around the Layer.
string
"none"
"xxsmall"
"xsmall"
"small"
"medium"
"large"
"xlarge"
object
Can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.
{ vertical: "...", horizontal: "...", top: "...", bottom: "...", left: "...", right: "..." }
Whether there should be an overlay preventing interaction underneath the layer.
boolean
true
false
Function that will be invoked on modal layers when the user clicks outside the layer.
function
() => {}
Function that will be called when the user presses the escape key inside the layer.
function
() => {}
Position of the layer content.
string
"bottom"
"bottom-left"
"bottom-right"
"center"
"end"
"hidden"
"left"
"right"
"start"
"top"
"top-left"
"top-right"
Whether the layer should take full width and height on mobile. If a target is provided, the Layer will take the full width and height of the target.
boolean
true
false
At its core, the Layer component is a regular <div> element. Thus, both DOM and React properties, methods, and events are accessible. To read up on all of the possible DOM attributes and types available for div elements, check out this MDN Web Documents page. To learn more about DOM events and methods, you can read more on the MDN Web Events documentation page.
Also, feel free to read about the types of React events available, or see how DOM attributes change in React. Working in tandem with Styled Components, you also have access to the as property.
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.
boolean
true
false
Elevated height above the underlying container, indicated via a drop shadow. Any Box elevation value is valid.
string
"none"
"xsmall"
"small"
"medium"
"large"
"xlarge"
"string"
Any additional style for Layer Container.
string
Any CSS.
css`color: 'blue'`
function
(props) => {}
The backdrop-filter which takes any CSS supported string value.
string
"blur(12px)"
The actual breakpoint to trigger changes in the border, direction, gap, margin, pad, and round.
string
"small"
The possible breakpoints that could affect border, direction, gap, margin, pad, and round.
object
{ 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: {} }