HorizontalScroll

HorizontalScroll

import HorizontalScroll from "@kiwicom/orbit-components/lib/HorizontalScroll";
<HorizontalScroll>
<FirstComponent />
<SecondComponent />
<ThirdComponent />
...etc
</HorizontalScroll>

Props

NameTypeRequiredDefaultDescription
minHeightnumberset minimal height
dataTeststringprop for testing purposes
idstringSet id for HorizontalScroll
spacingSpacing“small”the spacing between children elements
childrenReact.ReactNode✔️content of HorizontalScroll
scrollSnapScrollSnap“none”set value for scroll-snap-type property
scrollPaddingnumberset value for scroll-padding property
overflowElevationbooleanset box-shadow on sides during scroll
elevationColorstringpaletteCloudDarkerset box-shadow color. Value must be the name of a color token from the theme.
onOverflow() => voidcallback function, fires, if content is overflowed
arrowsbooleanshow arrows
arrowColorstringset arrows color

ScrollSnap

ScrollSnap
"mandatory"
"proximity"
"inline"
"none"

Spacing

Spacing
"none"
"XXXSmall" - deprecated (use "50")
"XXSmall" - deprecated (use "100")
"XSmall" - deprecated (use "200")
"small" - deprecated (use "300")
"medium" - deprecated (use "400")
"large" - deprecated (use "600")
"XLarge" - deprecated (use "800")
"XXLarge" - deprecated (use "1000")
"50"
"100"
"150"
"200"
"300"
"400"
"500"
"600"
"800"
"1000"
"1200"
"1600"