Name	Description	Default
propertyName*	This is a short description summary	defaultValue
propertyName*	This is a short description summary	defaultValue
propertyName*	This is a short description summary	defaultValue

Scroll


import { Scroll } from '@proton/atoms';

The Scroll component is a utility component which makes an area scrollable should its content overflow the maximum dimensions of its parent. It also adds some styling in the form of shadows to indicate to the user that an area is scrollable/has off-screen parts.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium unde, blanditiis rem accusamus obcaecati enim amet, voluptatibus nemo facilis illum aut itaque in? Deleniti iure amet qui vero, blanditiis quos?

() => {
    return (
        <Scroll className="border" style={{ height: 160 }}>
            <div className="px-4 text-justify">
                <p style={{ maxWidth: 400 }}>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium unde, blanditiis rem accusamus
                    obcaecati enim amet, voluptatibus nemo facilis illum aut itaque in? Deleniti iure amet qui vero,
                    blanditiis quos?
                </p>
                <p style={{ maxWidth: 400 }}>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium unde, blanditiis rem accusamus
                    obcaecati enim amet, voluptatibus nemo facilis illum aut itaque in? Deleniti iure amet qui vero,
                    blanditiis quos?
                </p>
                <p style={{ maxWidth: 400 }}>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium unde, blanditiis rem accusamus
                    obcaecati enim amet, voluptatibus nemo facilis illum aut itaque in? Deleniti iure amet qui vero,
                    blanditiis quos?
                </p>
                <p style={{ maxWidth: 400 }}>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium unde, blanditiis rem accusamus
                    obcaecati enim amet, voluptatibus nemo facilis illum aut itaque in? Deleniti iure amet qui vero,
                    blanditiis quos?
                </p>
            </div>
        </Scroll>
    );
}

Horizontal

Use the horizontal prop to switch to horizontal scrolling.

Props

No inputs found for this component. Read the docs

No Preview

Scroll

Horizontal

Props