Default
With scrollbar
bpk-component-mobile-scroll-container
Backpack mobile scroll container component.
Installation
Check the main Readme for a complete installation guide.
Usage
import { cssModules } from '@skyscanner/backpack-web/bpk-react-utils';
import BpkMobileScrollContainer from '@skyscanner/backpack-web/bpk-component-mobile-scroll-container';
import STYLES from './MyComponent.scss';
const getClassName = cssModules(STYLES);
export default () => (
<BpkMobileScrollContainer>
<div className={getClassName('my-component')}>
{new Array(10).fill().map((item, index) => {
const classNames = ['my-component__item'];
if (index % 2 === 0) {
classNames.push('my-component__item--alternate');
}
return (
<div key={index} className={classNames.map(getClassName).join(' ')}>
{index}
</div>
);
})}
</div>
</BpkMobileScrollContainer>
);MyComponent.scss:
@import '~@skyscanner/backpack-web/bpk-mixins/index.scss';
.my-component {
display: flex;
&__item {
display: flex;
min-width: bpk-spacing-xxl() * 5;
height: bpk-spacing-xxl() * 5;
justify-content: center;
align-items: center;
background-color: $bpk-color-sky-gray-tint-07;
&--alternate {
background-color: $bpk-color-sky-gray-tint-06;
}
}
}Props
Check out the full list of props on Skyscanner's design system documentation website.