Ui.ScrollPanel

This component offers a panel which can be scrolled either horizontally or vertically while providing a hint (shadow) when there is more content.

Interactive Demo

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

Orientation
Shadow Size
Maximum Size
Extra Padding
<Ui.ScrollPanel
orientation="Vertical"
extraPadding={0}
shadowSize={20}
maxSize={300}>
<div
style="width:200px;height:200px;background:var(--content-color);margin:5px;"
/>
<div
style="width:200px;height:200px;background:var(--content-color);margin:5px;"
/>
<div
style="width:200px;height:200px;background:var(--content-color);margin:5px;"
/>
<div
style="width:200px;height:200px;background:var(--content-color);margin:5px;"
/>
<div
style="width:200px;height:200px;background:var(--content-color);margin:5px;"
/>
<div
style="width:200px;height:200px;background:var(--content-color);margin:5px;"
/>
</Ui.ScrollPanel>
Orientation

The orientation of the component can be set using the orientation property.

<>
<Ui.ScrollPanel orientation="vertical">
<div style="width:300px;height:400px;background:var(--content-color)"/>
</Ui.ScrollPanel>
<Ui.ScrollPanel orientation="horizontal">
<div style="width:400px;height:300px;background:var(--content-color)"/>
</Ui.ScrollPanel>
</>
Max Size

The maximum size of the component can be set using the maxSize property.

<>
<Ui.ScrollPanel maxSize={50}>
<div style="width:250px;height:300px;background:var(--content-color)"/>
</Ui.ScrollPanel>
<Ui.ScrollPanel maxSize={100}>
<div style="width:250px;height:300px;background:var(--content-color)"/>
</Ui.ScrollPanel>
<Ui.ScrollPanel maxSize={200}>
<div style="width:250px;height:300px;background:var(--content-color)"/>
</Ui.ScrollPanel>
</>
Shadow Size

The size of the shadow can be set using the shadowSize property.

<>
<Ui.ScrollPanel shadowSize={50}>
<div style="width:250px;height:500px;background:var(--content-color)"/>
</Ui.ScrollPanel>
<Ui.ScrollPanel shadowSize={100}>
<div style="width:250px;height:500px;background:var(--content-color)"/>
</Ui.ScrollPanel>
<Ui.ScrollPanel shadowSize={200}>
<div style="width:250px;height:500px;background:var(--content-color)"/>
</Ui.ScrollPanel>
</>
Extra Padding

The padding between the scrollbar and the content can be set using the extraPadding property.

<>
<Ui.ScrollPanel extraPadding={0}>
<div style="width:250px;height:500px;background:var(--content-color)"/>
</Ui.ScrollPanel>
<Ui.ScrollPanel extraPadding={10}>
<div style="width:250px;height:500px;background:var(--content-color)"/>
</Ui.ScrollPanel>
<Ui.ScrollPanel extraPadding={20}>
<div style="width:250px;height:500px;background:var(--content-color)"/>
</Ui.ScrollPanel>
</>
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.