React Offcanvas Component API
Offcanvas API
Explore the API reference for the React Offcanvas component and discover how to effectively utilize its props for customization.
On this page COffcanvas
import { COffcanvas } from '@coreui/react-pro'
| Property | Default | Type |
|---|
| backdrop | true | boolean, 'static', undefined |
Apply a backdrop on body while offcanvas is open. |
| className | - | string, undefined |
A string of all className you want applied to the base component. |
| dark | - | boolean, undefined |
Sets a darker color scheme. |
| keyboard | true | boolean, undefined |
Closes the offcanvas when escape key is pressed. |
| onHide | - | (() => void), undefined |
Callback fired when the component requests to be hidden. |
| onShow | - | (() => void), undefined |
Callback fired when the component requests to be shown. |
| placement | - | 'start', 'end', 'top', 'bottom' |
Components placement, there’s no default placement. |
| portal | - | boolean, undefined |
Generates modal using createPortal. |
| responsive4.6.0+ | true | boolean, 'sm', 'md', 'lg', 'xl', 'xxl', undefined |
Responsive offcanvas property hide content outside the viewport from a specified breakpoint and down. |
| scroll | - | boolean, undefined |
Allow body scrolling while offcanvas is open |
| visible | - | boolean, undefined |
Toggle the visibility of offcanvas component. |
COffcanvasBody
import { COffcanvasBody } from '@coreui/react-pro'
| Property | Default | Type |
|---|
| className | - | string, undefined |
A string of all className you want applied to the base component. |
import { COffcanvasHeader } from '@coreui/react-pro'
| Property | Default | Type |
|---|
A string of all className you want applied to the base component. |
COffcanvasTitle
import { COffcanvasTitle } from '@coreui/react-pro'
| Property | Default | Type |
|---|
| as | h5 | (ElementType & 'symbol'), (ElementType & 'object'), (ElementType & 'h5'), (ElementType & 'slot'), (ElementType & 'style'), ... 175 more ..., undefined |
Component used for the root node. Either a string to use a HTML element or a component. |
| className | - | string, undefined |
A string of all className you want applied to the component. |