@paprika/takeover
Description
The Takeover component can toggle a full-screen view to help the user focus on complex UI tasks.
Installation
yarn add @paprika/takeover
or with npm:
npm install @paprika/takeover
Props
Takeover
| Prop | Type | required | default | Description |
|---|---|---|---|---|
| a11yText | string | false | null | |
| children | node | true | - | The content for the Takeover |
| isOpen | bool | true | - | Control the visibility of the Takeover |
| onAfterClose | func | false | () => {} | Callback once the Takeover has been closed event |
| onAfterOpen | func | false | () => {} | Callback once the Takeover has been opened event |
| onClose | func | false | () => {} | Callback triggered when the takeover needs to be close |
| zIndex | number | false | zValue(5) | The z-index of the Takeover content |
| isFullWidth | bool | false | false | Set Takeover to full width without any margins and max-width |
Takeover.Header
| Prop | Type | required | default | Description |
|---|---|---|---|---|
| children | node | true | - | |
| hasCloseButton | bool | false | true | |
| kind | [ Header.types.kind.DEFAULT, Header.types.kind.PRIMARY] | false | Header.types.kind.DEFAULT | |
| level | [ 1, 2, 3, 4, 5, 6] | false | 2 | |
| onClose | func | false | () => {} | |
| refHeading | custom | false | null | |
| tools | node | false | null | Add node object to the right side of heading next to the close button |
Takeover.Footer
| Prop | Type | required | default | Description |
|---|---|---|---|---|
| children | node | false | null | The footer for the Takeover. Button size needs to be LARGE as per design guideline |
| onSaveClick | func | false | () => {} | Save Callback triggered when want to use default layout of the footer |
| onCancelClick | func | false | () => {} | Cancel Callback triggered when want to use default layout of the footer |
Takeover.FocusLock
| Prop | Type | required | default | Description |
|---|---|---|---|---|
| returnFocus | - | false | true |
Usage
You can use any of the following components to compose the Takeover:
<Takeover.Header />
<Takeover.Content />
<Takeover.Footer />
<Takeover.FocusLock />Basic Example
<Takeover isOpen={isOpen} onClose={toggle}>
<Takeover.Header>Header</Takeover.Header>
<Takeover.Content>My content</Takeover.Content>
<Takeover.Footer onSaveClick={toggle} onCancelClick={toggle} />
</Takeover>Warnings
If the content you are putting into this component will try and control focus (like CKEditor), read this: https://github.com/acl-services/paprika/issues/453