Canvas

ECanvas is similar to the EModal component, often hidden and displayed when triggered. However, off-canvas is frequently used as a sidebar navigation menu. Demo Here

Import

import ECanvas from "@components/Elements/ECanvas";

Usage

const CanvasExample = () => {
    const [isCanvasShown, setIsCanvasShown] = useState(false);

    const onBtnClick = () => {
        setIsCanvasShown(true)
    }

    const onBackdropClick = () => {
        setIsCanvasShown(false)
    }

    return (
        <Fragment>
            <EBtn onClick={onBtnClick}>
                Open Canvas
            </Btn>
            <ECanvas
                status={isCanvasShown}
                toggleCanvas={onBackdropClick}
                title="Canvas title"
            >
                Canvas content
            </ECanvas>
        </Fragment>
    );
};

export default CanvasExample;

Props

For ECanvas component, the following props are available:

Prop	Type	Default	Note
title	[Node ,String]	-	Adds a title to the ECanvas element.
footer	node	-	Footer content
portal	Boolean	true	Enables react portal.
blurEffect	Boolean	true	Applies background blur.
width	[String, Number]	-	Sets the component's width. Default unit is px.
height	[String, Number]	-	Sets the component's height. Default unit is px.
bodyClassName	String	-	Classes to card body of canvas.
square	Boolean	false	Removes rounded corners of the element.
closeIcon	Boolean	true	Adds close icon to the canvas header.
status	Boolean	false	Controls the visible/hidden state of canvas.
persistent	Boolean	false	persistent ECanvas is not discarded when touching outside.
position	String	"left"	The ECanvas element can appear from the left, right, top or bottom edge of the viewport.
className	String	-	Overrides or extends the component's styles.

Callback Functions

The ECanvas component contains following callback functions.

Function	Description
toggleCanvas	Toggles canvas active state. function(event: React.SyntheticEvent, isOpen: Boolean) => void 👇 • event: The event source of the callback. • isOpen: visible/hidden state of canvas

Children

The ECanvas component provides a children props that enable you to customize the content.

Children	Description
✔️	Component's content.