layer

Layer

An overlay. Layer is typically modal and anchored to an edge, corner, or center of the window. It is the caller’s responsibility to provide a control for the user to close the layer.

Usage

import { Layer } from 'grommet';
<Layer />

Properties

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’. Defaults to true.

boolean

animation

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

slide
fadeIn
none
boolean

full

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

boolean
vertical
horizontal

margin

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
xxsmall
xsmall
small
medium
large
{
  bottom: 
    xxsmall
    xsmall
    small
    medium
    large
    string,
  end: 
    xxsmall
    xsmall
    small
    medium
    large
    string,
  horizontal: 
    xxsmall
    xsmall
    small
    medium
    large
    string,
  left: 
    xxsmall
    xsmall
    small
    medium
    large
    string,
  right: 
    xxsmall
    xsmall
    small
    medium
    large
    string,
  start: 
    xxsmall
    xsmall
    small
    medium
    large
    string,
  top: 
    xxsmall
    xsmall
    small
    medium
    large
    string,
  vertical: 
    xxsmall
    xsmall
    small
    medium
    large
    string
}
string

modal

Whether there should be an overlay preventing interaction underneath the layer. Defaults to true.

boolean

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 or border.

boolean

position

Position of the layer content. Defaults to center.

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 Defaults to true.

boolean

target

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

object

Intrinsic element

div

Theme

global.size.xxsmall

The minimal height of the Layer. Expects string.

Defaults to

48px

layer.background

The background color of the Layer Container. Expects string.

Defaults to

white

layer.container.zIndex

The stack order of Layer Container. Expects number.

Defaults to

15

layer.extend

Any additional style for Layer. Expects string | (props) => {}.

Defaults to

undefined

layer.overlay.background

The background of the Layer overlay. Expects string.

Defaults to

rgba(0, 0, 0, 0.5)

layer.responsiveBreakpoint

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

Defaults to

small

layer.zIndex

The stack order of Layer. Expects number.

Defaults to

10

global.breakpoints

The possible breakpoints that could affect border, direction, gap, margin, pad, and round. Expects object.

Defaults to

{
    small: {
      value: '768px',
      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: '1536px',
    },
    large: {},
  }