Scrollable
Scrollable area adorned with top and bottom drop shadows on scroll detection
Shadow is shown on top if you scroll upwards Shadow is shown on bottom if you scroll downwardsIf you don't specify height you will get a default height per the Scrollable component (subject to change)
Basic usage of scrollable with provided height
Show editable code example
Any Paragon component or export may be added to the code example.
<Scrollable id="test" style={{'height': '40vh'}}><p>Do not use overflow in wrapped component, Scrollable provides overflow:auto around wrapped element</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p></Scrollable>
With padding used by consumer
Show editable code example
Any Paragon component or export may be added to the code example.
<Scrollable style={{'height': '40vh'}}><div className="p-4"><p>Do not use overflow in wrapped component, Scrollable provides overflow:auto around wrapped element</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p><p>A very long scrollable Content.</p></div></Scrollable>
Props API#
Scrollable Props API
- children
nodeRequiredSpecifies the content of the
Scrollable. - className
stringAdditional classnames for this component.
Usage Insights#
Scrollable
| Project Name | Paragon Version | Instance Count | |
|---|---|---|---|
| frontend-lib-content-components | 20.34.0 | 1 |