- 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
Drawer
Drawers slide in from the edge of the screen and are used to display content.
Default
The default drawer has a title and a close button.
Text button
Drawers can be configured to display the close button as text - useful for when a close icon doesn't fit the context.
bpk-component-drawer
Backpack drawer component.
Installation
Check the main Readme for a complete installation guide.
Usage
import { Component } from 'react';
import BpkDrawer from '@skyscanner/backpack-web/bpk-component-drawer';
import BpkButton from '@skyscanner/backpack-web/bpk-component-button';
class App extends Component {
constructor() {
super();
this.state = {
isOpen: false,
};
}
onOpen = () => {
this.setState({
isOpen: true,
});
};
onClose = () => {
this.setState({
isOpen: false,
});
};
render() {
return (
<div>
<div id="pagewrap">
<BpkButton onClick={this.onOpen}>Open drawer</BpkButton>
</div>
<BpkDrawer
id="my-drawer"
isOpen={this.state.isOpen}
onClose={this.onClose}
title="Drawer title"
closeLabel="Close drawer"
getApplicationElement={() => document.getElementById('pagewrap')}
>
This is a drawer. You can put anything you want in here.
</BpkDrawer>
</div>
);
}
}
Note: In order to "hide" your application from screen readers whilst the drawer is open you need to let it know what the root element for your application is by returning it's DOM node via the function passed to the getApplicationElement prop (see the example above). The pagewrap element id is a convention we use internally at Skyscanner. In most cases it should "just work".
Theming: In order to theme the drawer, a renderTarget needs to be supplied as a function which returns a DOM node in the scope of a BpkThemeProvider.
Props
Property | PropType | Required | Default Value |
---|---|---|---|
id | string | true | - |
className | string | true | - |
contentClassName | string | true | - |
children | node | true | - |
isOpen | bool | true | - |
onClose | func | true | - |
title | string | true | - |
getApplicationElement | func | true | - |
closeLabel | string | false | null |
closeText | string | false | null |
hideTitle | bool | false | false |
renderTarget | func | false | null |
Theme Props
- linkColor
- linkHoverColor
- linkActiveColor
- linkVisitedColor
Made with ❤️ by Skyscanner © 2023
© 2023 Skyscanner Backpack. Page last updated on Nov 2, 2022, 10:53