React Offcanvas Component API
Offcanvas API
Explore the API reference for theReact Offcanvas component and discover how to effectively utilize its props for customization.
COffcanvas#
import{COffcanvas}from'@coreui/react'// orimportCOffcanvasfrom'@coreui/react/src/components/offcanvas/COffcanvas'
| 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# | false | boolean |
Generates modal using createPortal. | ||
| responsive#4.6.0+ | true | boolean,'sm','md','lg','xl','xxl' |
Responsive offcanvas property hide content outside the viewport from a specified breakpoint and down. | ||
| scroll# | false | boolean |
Allow body scrolling while offcanvas is open | ||
| visible# | false | boolean |
Toggle the visibility of offcanvas component. | ||
COffcanvasBody#
import{COffcanvasBody}from'@coreui/react'// orimportCOffcanvasBodyfrom'@coreui/react/src/components/offcanvas/COffcanvasBody'
| Property | Default | Type |
|---|---|---|
| className# | - | string |
A string of all className you want applied to the base component. | ||
COffcanvasHeader#
import{COffcanvasHeader}from'@coreui/react'// orimportCOffcanvasHeaderfrom'@coreui/react/src/components/offcanvas/COffcanvasHeader'
| Property | Default | Type |
|---|---|---|
| className# | - | string |
A string of all className you want applied to the base component. | ||
COffcanvasTitle#
import{COffcanvasTitle}from'@coreui/react'// orimportCOffcanvasTitlefrom'@coreui/react/src/components/offcanvas/COffcanvasTitle'
| Property | Default | Type |
|---|---|---|
| as# | h5 | (ElementType & 'symbol'),(ElementType & 'object'),(ElementType & 'h5'),(ElementType & 'slot'),(ElementType & 'style'),... 174 more ...,(ElementType & FunctionComponent<...>) |
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. | ||