Layer

an overlay

Using Grommet for HPE?See Layer examples and guidance.

Props

animate

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

Animation transition of the Layer content when it opens and closes.

boolean

true

false

string

"slide"

"fadeIn"

"none"

background

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"

full

Whether the width and/or height should fill the current viewport size.

boolean

true

false

string

"vertical"

"horizontal"

margin

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: "..."
}

onClickOutside

Function that will be invoked on modal layers when the user clicks outside the layer.

function

() => {}

onEsc

Function that will be called when the user presses the escape key inside the layer.

function

() => {}

plain

Whether this is a plain Layer with no background color, border, or elevation.

boolean

true

false

position

Position of the layer content.

string

"bottom"

"bottom-left"

"bottom-right"

"center"

"end"

"hidden"

"left"

"right"

"start"

"top"

"top-left"

"top-right"

responsive

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

target

Target where the layer will be aligned to. This should be a React reference.

object

ref.current

React/DOM Properties

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.

Theme

global.size.xxsmall

The minimal height of the Layer.

string

"48px"

layer.background

The background color of the Layer Container.

string

"white"

layer.border.radius

The rounding of the Layer corners.

string

"4px"

layer.border.intelligentRounding

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

layer.container.zIndex

The stack order of Layer Container.

number

layer.extend

Any additional style for Layer.

string

Any CSS.

css`color: 'blue'`

function

(props) => {}

layer.container.elevation

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"

layer.container.extend

Any additional style for Layer Container.

string

Any CSS.

css`color: 'blue'`

function

(props) => {}

layer.overlay.background

The background of the Layer overlay.

string

"rgba(0, 0, 0, 0.5)"

layer.responsiveBreakpoint

The actual breakpoint to trigger changes in the border, direction, gap, margin, pad, and round.

string

"small"

layer.zIndex

The stack order of Layer.

number

global.breakpoints

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: {}
}