The Takeover component can toggle a full-screen view to help the user focus on complex UI tasks.
npm install @paprika/takeoverThe Takeover component can toggle a full-screen view to help the user focus on complex UI tasks.
``
yarn add @paprika/takeover
or with npm:
`
npm install @paprika/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 |
| 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 |
| 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 |
| Prop | Type | required | default | Description |
| ----------- | ---- | -------- | ------- | ----------- |
| returnFocus | - | false | true | |
You can use any of the following components to compose the Takeover:
`jsx`
Basic Example
`jsx``
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
- Storybook Showcase
- GitHub source code
- Create GitHub issue
- CHANGELOG