- Welcome
- Getting started
- Latest updates
- Foundations
-
Components
- Accordion
- Alert
- Alignment
- Aria live
- Autosuggest
- Badge
- Banner alert
- Bar chart
- Blockquote
- Bottom navigation
- Bottom sheet
- Breadcrumb
- Breakpoint
- Button
- Calendar
- Card
- Card List
- Card button
- Carousel
- Checkbox
- Chip
- Chip group
- Code
- Content cards
- Data Table
- Datepicker
- Description list
- Dialog
- Divider
- Drawer
- Field Set
- Flare
- Flat list
- Flight leg
- Floating action button
- Floating notification
- Form label
- Form validation
- Graphic promotion
- Horizontal navigation
- Icon
- Image
- Infinite scroll
- Link
- List
- Map
- Mobile scroll container
- Modal
- Navigation bar
- Nudger
- Overlay
- Page indicator
- Pagination
- Panel
- Phone input
- Picker
- Popover
- Price
- Progress bar
- Radio button
- Rating
- Scrollable calendar
- Section header
- Section list
- Select
- Skeleton
- Skip link
- Slider
- Snackbar
- Snippet
- Spinner
- Split input
- Star rating
- Switch
- Table
- Text
- Text input
- Theming
- Ticket
- Toast
- Tooltip
- Touchable native feedback
- Touchable overlay
- Content
- Accessibility
Mobile scroll container
The mobile scroll container component will hide overflowing content in fixed width situations and will enable horizontal scrolling.
Default
Storybook failed to load.
With scrollbar
Storybook failed to load.
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
Property | PropType | Required | Default Value |
---|---|---|---|
children | node | true | - |
className | string | false | null |
leadingIndicatorClassName | string | false | null |
scrollerRef | func | false | null |
trailingIndicatorClassName | string | false | null |
showScrollbar | bool | false | false |
Made with ❤️ by Skyscanner © 2023
© 2023 Skyscanner Backpack. Page last updated on Jan 12, 2023, 09:39