Layout

Overflow
Storybook

The Overflow component allows you to control the display of the content inside a container when it overflows the visible area.

Import

1import { Overflow } from 'dd360-ds'

1import Overflow from 'dd360-ds/Layout/Overflow'

Usage

The prop "overflow" indicates how the overflow of the content inside the container is controlled. Possible values are 'hidden', 'auto', 'visible', 'x-auto', 'x-hidden', 'x-visible', 'scroll', 'y-auto', 'y-hidden', 'y-visible', 'x-scroll' and 'y-scroll'. The default value is 'auto'.

lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum

1import { Overflow } from "dd360-ds"
2
3<Overflow className="h-20">
4  lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum   lorem itsum lorem itsum lorem itsum lorem itsum
5lorem itsum lorem itsum lorem itsum   lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum   lorem itsum
6lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum   lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum
7lorem itsum   lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum
8</Overflow>
9

Scroll

1import { Overflow } from "dd360-ds"
2
3<Overflow className="h-20" overflow="scroll">
4  lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum   lorem itsum lorem itsum lorem itsum lorem itsum
5lorem itsum lorem itsum lorem itsum   lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum   lorem itsum
6lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum   lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum
7lorem itsum   lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum
8</Overflow>
9

Visible

1import { Overflow } from "dd360-ds"
2
3<Overflow className="h-20" overflow="visible">
4  lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum   lorem itsum lorem itsum lorem itsum lorem itsum
5lorem itsum lorem itsum lorem itsum   lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum   lorem itsum
6lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum   lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum
7lorem itsum   lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum
8</Overflow>
9

Hidden

1import { Overflow } from "dd360-ds"
2
3<Overflow className="h-20" overflow="hidden">
4  lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum   lorem itsum lorem itsum lorem itsum lorem itsum
5lorem itsum lorem itsum lorem itsum   lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum   lorem itsum
6lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum   lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum
7lorem itsum   lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum
8</Overflow>
9

X-auto

1import { Overflow } from "dd360-ds"
2
3<Overflow className="h-20" overflow="x-auto">
4  lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum   lorem itsum lorem itsum lorem itsum lorem itsum
5lorem itsum lorem itsum lorem itsum   lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum   lorem itsum
6lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum   lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum
7lorem itsum   lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum
8</Overflow>
9

Y-auto

1import { Overflow } from "dd360-ds"
2
3<Overflow className="h-20" overflow="y-auto">
4  lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum   lorem itsum lorem itsum lorem itsum lorem itsum
5lorem itsum lorem itsum lorem itsum   lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum   lorem itsum
6lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum   lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum
7lorem itsum   lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum
8</Overflow>
9

Y-scroll

1import { Overflow } from "dd360-ds"
2
3<Overflow className="h-20" overflow="y-scroll">
4  lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum   lorem itsum lorem itsum lorem itsum lorem itsum
5lorem itsum lorem itsum lorem itsum   lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum   lorem itsum
6lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum   lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum
7lorem itsum   lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum
8</Overflow>
9

X-scroll

1import { Overflow } from "dd360-ds"
2
3<Overflow className="h-20" overflow="x-scroll">
4  lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum   lorem itsum lorem itsum lorem itsum lorem itsum
5lorem itsum lorem itsum lorem itsum   lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum   lorem itsum
6lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum   lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum
7lorem itsum   lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum lorem itsum
8</Overflow>
9

API Reference

Name	Types	Default
"overflow"	hidden auto visible x-auto x-hidden x-visible scroll y-auto y-hidden y-visible x-scroll y-scroll	auto
"children"	ReactNode	-
"className"	string	-

OrderRow