Scrollable

<Scrollable> is a component container for creating scrollable areas in the UI. Scrollbars can be both vertical and horizontal.

Usage

This component is commonly used in applications to manage large amounts of information or data, providing a convenient way for users to explore content without overwhelming the available screen space. The children of the <Scrollable> will scroll inside the container.

By default, the width is set to 100%, you can change the width to get a horizontal scrollbar. Same you can achieve with the height property. By default this takes the available height.

The <Scrollable> component can be used with every other component where content is overflowing the container, e.g. <Card>, <Table>, etc.

Vertical Scrolling

To use the vertical scrollbar you need to set the height prop and the content has to overflow the container.

import { Scrollable } from '@marigold/components';import { Rectangle } from '@/ui/Rectangle';export default () => (  <Scrollable height="150px">    <div className="flex flex-col items-center gap-2 p-2">      {Array.from({ length: 10 }).map((_, index) => (        <Rectangle key={index} height="100px" width="200px" />      ))}    </div>  </Scrollable>);

Horizontal Scrolling

To use horizontal scrolling, you need to wrap the content in a Flexbox using flex. By default, the width prop is set to 100%. Here too, the content must extend beyond the container for the scroll bar to be displayed.

import { Scrollable } from '@marigold/components';import { Rectangle } from '@/ui/Rectangle';export default () => (  <Scrollable>    <div className="inline-flex gap-2 p-2">      {Array.from({ length: 10 }).map((_, index) => (        <Rectangle key={index} height="100px" width="200px" />      ))}    </div>  </Scrollable>);

Props

Scrollable

Related