Ui.StickyPanel

A component for positioning content that sticks to an element.

  • The content is rendered outside and fixed positioned.
  • If the content cannot be shown at the requested position it will be shown in the inverse position: Ui.Position.BottomLeft becomes Ui.Position.TopLeft.
Interactive Demo

You can play around with a Ui.StickyPanel below using the controls.

Position
BottomLeft
Offset (10px)
Z-index (0)
Should Calculate Position
Pass Through
<Ui.StickyPanel
element={<div style="width: 250px;height:100px;background:var(--secondary-color);"/>}
content={<div style="width: 100px;height:50px;background:var(--primary-color);"/>}
position={Ui.Position.BottomLeft}
shouldCalculate={true}
passThrough={false}
offset={10}
zIndex={0}/>
Position

The position of the content can be set with the position property.

<>
<Ui.StickyPanel
content={
<div style="width: 100px;height:50px;background:var(--primary-color);"/>
}
element={
<div style="width: 250px;height:100px;background:var(--secondary-color);"/>
}
position={Ui.Position.BottomLeft}
offset={10}
/>
<Ui.StickyPanel
content={
<div style="width: 100px;height:50px;background:var(--primary-color);"/>
}
element={
<div style="width: 250px;height:100px;background:var(--secondary-color);"/>
}
position={Ui.Position.TopRight}
offset={10}
/>
<Ui.StickyPanel
content={
<div style="width: 100px;height:50px;background:var(--primary-color);"/>
}
element={
<div style="width: 250px;height:100px;background:var(--secondary-color);"/>
}
position={Ui.Position.RightCenter}
offset={10}
/>
</>
Offset

The offset of the content from the element can be set with the offset property.

<>
<Ui.StickyPanel
content={
<div style="width: 100px;height:50px;background:var(--primary-color);"/>
}
element={
<div style="width: 250px;height:100px;background:var(--secondary-color);"/>
}
offset={5}
/>
<Ui.StickyPanel
content={
<div style="width: 100px;height:50px;background:var(--primary-color);"/>
}
element={
<div style="width: 250px;height:100px;background:var(--secondary-color);"/>
}
offset={10}
/>
<Ui.StickyPanel
content={
<div style="width: 100px;height:50px;background:var(--primary-color);"/>
}
element={
<div style="width: 250px;height:100px;background:var(--secondary-color);"/>
}
offset={20}
/>
</>
Pass Through

The content can be made non interactive using with the passThrough property.

<>
<Ui.StickyPanel
element={
<div style="width: 250px;height:100px;background:var(--secondary-color);"/>
}
content={<Ui.Button label="Click Me!"/>}
passThrough={false}
offset={5}
/>
<Ui.StickyPanel
element={
<div style="width: 250px;height:100px;background:var(--secondary-color);"/>
}
content={<Ui.Button label="Click Me!"/>}
passThrough={true}
offset={5}
/>
</>
Should Calculate

The shouldCalculate property decides if to calculate the position of the content.

Z-Index

The zIndex property sets the z-index of the content.

Mint UI

Mint UI is a design system and component library for building websites, web and desktop applications.

Copyright © 2018-2024 Szikszai Gusztáv. All rights reserved.