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