The layer is responsible for the positioning of an element on a page. For example, you wrap a tooltip with a layer to make its position relative to a target. You can specify up to 12 different positions.
If you use a layer with a component that could be opened or closed, you have to make sure you re-render the layer the first time you open the component, otherwise it will end up with a wrong position.
Interact with a live demo of the ak-layer component.
npm install ak-layer
The ak-layer package exports the Layer skate component:
Import the component in your JS resource:
import Layer from 'ak-layer';
const myLayer = new Layer();
Now you can use the defined layer in your HTML markup:
<html>
<head>
<script src="bundle.js"></script>
</head>
<body>
<!-- ... -->
<ak-layer></ak-layer>
</body>
This is a standard web component, if you want to use it in your React app, use the Skate.js React integration.
import Layer from 'ak-layer';
import reactify from 'skatejs-react-integration';
const ReactComponent = reactify(Layer, {});
ReactDOM.render(<ReactComponent />, container);
StringDefault position
ObjectTransformation map from ak-positions to popper-positions
Disable positioning and destroy element. Being used in the ak-layer component on the 'detached' event
Manually trigger the repositioning
Returns an element from a selector or the element itself if it was passed as an argument
Kind: global class
Properties
stringStringfunctionHTMLElement | StringBooleanStringfunctionBooleanMethods
The layer is responsible for the positioning of an element on a page.
HTML Example
<ak-layer target="#target"></ak-layer>
JS Example
import Layer from 'ak-layer';
const myLayer = new Layer();
stringPosition of a layer relative to it's target.
The position attribute takes two positional arguments in the
format position="edge edge-position", where edge specifies what edge to align the layer
to, and edge-position specifies where on that edge the layer should appear.
Refer to the table below for examples:
| top left | top center | top right | ||
|---|---|---|---|---|
| left top | right top | |||
| left middle | target | right middle | ||
| left bottom | right bottom | |||
| bottom left | bottom center | bottom right |
Kind: instance property of Layer
Default: "right middle"
HTML Example
<ak-layer position="top left"></ak-layer>
JS Example
layer.position = 'top left';
StringTarget of a layer. Selector or element on a page relative to which layer should be positioned
Kind: instance property of Layer
HTML Example
<ak-layer target="#target"></ak-layer>
JS Example
layer.target = document.body.querySelector('#target');
JS Example
layer.target = '#target'
functionCallback function that is called whenever layer is rendered. The Layer element will be passed in as an argument.
Kind: instance property of Layer
JS Example
layer.onRender = (elem) => { console.log(elem); };
HTMLElement | StringElement to act as a boundary for the Layer. The Layer will not sit outside this element if it can help it. If, through it's normal positoning, it would end up outside the boundary the layer will flip positions if the enable-flip prop is set. Can either be an element or a selector of an element. If not set the boundary will be the current viewport.
Kind: instance property of Layer
HTML Example
<ak-layer enable-flip boundaries-element="#container"></ak-layer>
JS Example
layer.boundariesElement = document.body.querySelector('#container');
JS Example
layer.enableFlip = true;
BooleanSets whether a Layer will flip it's position if there is not enough space in the requested position. i.e. if a layer is set to position="top middle" but placing it there would cause it to be outside the viewport (or the boundariesElement if that is set) the Layer will instead be positioned in "bottom middle".
Kind: instance property of Layer
HTML Example
<ak-layer enable-flip></ak-layer>
JS Example
layer.enableFlip = true;
StringA string representing the offsets from the target element in the format "[x-offset] [y-offset]", measured in pixels.
Kind: instance property of Layer
HTML Example
<ak-layer offset="0 2"></ak-layer>
JS Example
layer.offset = '0 2';
functionCallback function that is called whenever layer is updated (it is rendered, it flips positition because it does not have enough space, etc). The callback will receive an object with the following properties:
isFlipped - boolean representing whether a layer has flipped from its original position.originalPosition - the position the element was supposed to be rendered.actualPositon - the position the element is actually in now after the update.Kind: instance property of Layer
JS Example
layer.onUpdate = (data) => { console.log(data.isFlipped); };
BooleanWill be true if a Layer has been flipped from its original position.
Kind: instance property of Layer
JS Example
const isFlipped = elem.isFlipped;
Forces the Layer to recalculate and reposition itself on the page. This should not usually be required as any modifications to the Layer itself should also cause reposition to be called.
Kind: instance method of Layer
Returns: Layer
JS Example
layer.reposition();
Helper class for positioning elements on a page
JS Example
import Alignment from 'akutil-common';
const alignment = new Alignment({});
StringDefault position
Kind: global variable
Returns: String - A string with the default position
ObjectTransformation map from ak-positions to popper-positions
Kind: global variable
Returns: Object - Map of transformations
Disable positioning and destroy element. Being used in the ak-layer component on the 'detached' event
Kind: global function
JS Example
alignment.destroy();
Manually trigger the repositioning
Kind: global function
JS Example
alignment.reposition();
Returns an element from a selector or the element itself if it was passed as an argument
Kind: global function
JS Example
Alignment.getElement('#TargetId');
Let us know what you think of our components and docs, your feedback is really important for us.
Ask a question in our forum.
Check if someone has already asked the same question before.
Are you in trouble? Let us know!
FAQs
A React layer component responsible for the position of an element on a page
We found that ak-layer demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.