This component offers a panel which can be scrolled either horizontally or vertically while providing a hint (shadow) when there is more content.
<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>
<> <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></>
<> <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></>
<> <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></>
<> <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 is a design system and component library for building websites, web and desktop applications.