Default
With title
Popovers can be configured to have a title, this is displayed at the top opposite a close button.
With title & action button
As above, but with action button.
On the side
Opened by an input
You can use a BpkInput enhanced with the withOpenEvents higher-order component to open popovers.
bpk-component-popover
Backpack popover component.
Installation
Check the main Readme for a complete installation guide.
Usage
import { createRef } from 'react';
import BpkButton from '@skyscanner/backpack-web/bpk-component-button';
import BpkPopover from '@skyscanner/backpack-web/bpk-component-popover';
import BpkText from '@skyscanner/backpack-web/bpk-component-text';
class App extends Component {
constructor() {
super();
this.ref = createRef();
this.state = {
isOpen: false,
};
}
openPopover = () => {
this.setState({
isOpen: true,
});
}
closePopover = () => {
this.setState({
isOpen: false,
});
}
const target = (
<div ref={this.ref} className={'my-popover-target'}>
<BpkButton
onClick={this.openPopover}>
Open
</BpkButton>
</div>
)
render() {
return (
<div id="popover-container">
<BpkPopover
id="my-popover"
target={target}
onClose={this.closePopover}
isOpen={this.state.isOpen}
label="My popover"
closeButtonLabel="Close"
closeButtonProps={{
tabIndex: 0,
}}
>
<BpkText>My popover content</BpkText>
</BpkPopover>
</div>
);
}
}Props
Check out the full list of props on Skyscanner's design system documentation website.