A component for positioning content that sticks to an element.
Ui.Position.BottomLeft
becomes Ui.Position.TopLeft
.<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}/>
<> <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} /></>
<> <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} /></>
<> <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} /></>
Mint UI is a design system and component library for building websites, web and desktop applications.