PositionLayer

The PositionLayer component is a utility used to handle the position and other properties of a layer based on the screen's breakpoints. It's a versatile component that enables complex layer positioning and behavior according to the properties passed to it.

Props

Here are the properties you can pass to the PositionLayer component:

Prop	Type	Description
align	`[start\|center\|end, start\|center\|end]` \| `BreakpointProp<align>`	Optional. Defines the alignment of the layer.
width	`string` (number + % or px) \| `BreakpointProp<string>`	Optional. Defines the width of the layer.
height	`string` (number + % or px) \| `BreakpointProp<string>`	Optional. Defines the height of the layer.
top	`string` (number + % or px) \| `BreakpointProp<string>`	Optional. Defines the top positioning of the layer.
right	`string` (number + % or px) \| `BreakpointProp<string>`	Optional. Defines the right positioning of the layer.
bottom	`string` (number + % or px) \| `BreakpointProp<string>`	Optional. Defines the bottom positioning of the layer.
left	`string` (number + % or px) \| `BreakpointProp<string>`	Optional. Defines the left positioning of the layer.
layer	`top \| middle \| bottom` \| `BreakpointProp<layer>`	Optional. Defines the layer's position in stack.
hide	`boolean` \| `BreakpointProp<boolean>`	Optional. Defines the visibility of the layer.

Example

The bare bones example below shows a position layer inside a Surface. NB: the position layer component can only be added inside another component which has a stacking context. It will always overlay this component.

Hi!

import { PositionLayer } from '@ef-global/backpack/PositionLayer';
import { Surface } from "@ef-global/backpack/Surface";
import { Headline } from "@ef-global/backpack/Text";
function PositionLayerExample() {
  return (
   <Surface
        style={{ width: '300px', height: '300px', backgroundColor: 'coral' }}
        radius={'xxs'}
    >
        <PositionLayer align={['center', 'center']}>
            <div style={{ backgroundColor: 'black', padding: '10px' }}>
                <Headline as={'h4'} variant={'header3'} inverse align={'center'}>
                    Hi!
                </Headline>
            </div>
        </PositionLayer>
    </Surface>
  );
}
export { PositionLayerExample };

In the above example, we create a PositionLayer that covers the top half of the viewport, aligning its content at the center top. The layer does not hide and its z-index is set to overlay the containing element.

Example with multiple position layers.

You can use as many position layers as you need. Since they are all absolutely positioned the only thing you need to worry about is which should overlay which. The 'layer' prop can override this to an extent, placing layers on the 'top', 'middle', or 'bottom' z-index, but where the layer prop is set to the same value the source order becomes important.

Hi!

import { PositionLayer } from "@ef-global/backpack/PositionLayer";
import { Headline } from "@ef-global/backpack/Text";
function PositionLayerExampleMultiple() {
  return (
    <Surface
            style={{ width: '300px', height: '300px', backgroundColor: 'coral' }}
            radius={'xxs'}
            className={'u-mt-l'}
        >
            <PositionLayer align={['start', 'start']}>
                <div style={{ backgroundColor: 'black', padding: '10px' }}>
                    <Headline as={'h4'} variant={'header3'} inverse align={'center'}>
                        Hi!
                    </Headline>
                </div>
            </PositionLayer>
            <PositionLayer align={['start', 'center']}>
                <div style={{ backgroundColor: 'black', padding: '10px' }}>
                    <Headline as={'h4'} variant={'header3'} inverse align={'center'}>
                        Hi!
                    </Headline>
                </div>
            </PositionLayer>
            <PositionLayer align={['start', 'end']}>
                <div style={{ backgroundColor: 'black', padding: '10px' }}>
                    <Headline as={'h4'} variant={'header3'} inverse align={'center'}>
                        Hi!
                    </Headline>
                </div>
            </PositionLayer>
            <PositionLayer align={['center', 'start']}>
                <div style={{ backgroundColor: 'black', padding: '10px' }}>
                    <Headline as={'h4'} variant={'header3'} inverse align={'center'}>
                        Hi!
                    </Headline>
                </div>
            </PositionLayer>
            <PositionLayer align={['center', 'center']}>
                <div style={{ backgroundColor: 'black', padding: '10px' }}>
                    <Headline as={'h4'} variant={'header3'} inverse align={'center'}>
                        Hi!
                    </Headline>
                </div>
            </PositionLayer>
            <PositionLayer align={['center', 'end']}>
                <div style={{ backgroundColor: 'black', padding: '10px' }}>
                    <Headline as={'h4'} variant={'header3'} inverse align={'center'}>
                        Hi!
                    </Headline>
                </div>
            </PositionLayer>
            <PositionLayer align={['end', 'start']}>
                <div style={{ backgroundColor: 'black', padding: '10px' }}>
                    <Headline as={'h4'} variant={'header3'} inverse align={'center'}>
                        Hi!
                    </Headline>
                </div>
            </PositionLayer>
            <PositionLayer align={['end', 'center']}>
                <div style={{ backgroundColor: 'black', padding: '10px' }}>
                    <Headline as={'h4'} variant={'header3'} inverse align={'center'}>
                        Hi!
                    </Headline>
                </div>
            </PositionLayer>
            <PositionLayer align={['end', 'end']}>
                <div style={{ backgroundColor: 'black', padding: '10px' }}>
                    <Headline as={'h4'} variant={'header3'} inverse align={'center'}>
                        Hi!
                    </Headline>
                </div>
            </PositionLayer>
        </Surface>
  )
}
export { PositionLayerExampleMultiple };

Example with breakpoint config.

The PositionLayer component supports per-breakpoint config for its props, so you can also pass an object of breakpoints with various configurations, as in the example below.

Hi!

import { PositionLayer } from '@ef-global/backpack/PositionLayer';
import { Surface } from "@ef-global/backpack/Surface";
import { Headline } from "@ef-global/backpack/Text";
<Surface
        style={{ width: '300px', height: '300px', backgroundColor: 'coral' }}
        radius={'xxs'}
    >
        <PositionLayer align={{
                           s: ['start', 'start'],
                           m: ['start', 'end'],
                           l: ['end', 'start'],
                           xl: ['end', 'end'],
                       }}>
            <div style={{ backgroundColor: 'black', padding: '10px' }}>
                <Headline as={'h4'} variant={'header3'} inverse align={'center'}>
                    Hi!
                </Headline>
            </div>
        </PositionLayer>
    </Surface>

Pagination Skeleton