Canvas 🧪 Table of Contents

• Props
• Events
• Slots
• CSS Variables

PropertiesPropertyAttributeDescriptionTypeDefaultbackground backgroundDefines the background color of the main section and auto adjust it for the sidebartype CanvasBackground =
'canvas'
'surface''canvas'sidebarEndOpen sidebar-end-openOpen the sidebar on the end sidebooleanfalsesidebarStartOpen sidebar-start-openOpen the sidebar on the start sidebooleanfalseEventsEventDescriptionTypesidebarEndDismiss Emitted when the sidebar end requests to be dismissed.CustomEvent<void>sidebarStartUpdate Emitted when the sidebar start requests to be opened or dismissed.type CanvasSidebarStartUpdateEventDetail = {
  open: boolean;
}
CustomEvent<CanvasSidebarStartUpdateEventDetail>SlotsSlotDescriptionisRequiredaltPropallowedTagNames<slot name="title"> Renders the application name in the header section of the sidebar start area.<slot name="header-start"> Renders a **sticky** header section above the content area on the **start** side (**left** in **LTR** mode / **right** in **RTL** mode).<slot name="header-end"> Renders a **sticky** header section above the content area on the **end** side (**right** in **LTR** mode / **left** in **RTL** mode).<slot> Default slot for the main content.<slot name="footer"> Renders a **sticky** footer section underneath the main content.<slot name="sidebar-start"> Renders a sidebar area on the **start** side (**left** in **LTR** mode / **right** in **RTL** mode). On mobile view it transforms into a flyout.<slot name="sidebar-end"> Renders a sidebar area on the **end** side (**right** in **LTR** mode / **left** in **RTL** mode). On mobile view it transforms into a flyout.<slot name="sidebar-end-header"> Renders in the header section of the sidebar end area.<slot name="background"> Can be used to pass a sticky media element <img/> or <video/> placed underneath the main content.CSS VariablesCSS VariableDescriptiondefaultValue--p-canvas-sidebar-start-width Width of the sidebar start.320px--p-canvas-sidebar-end-width Width of the sidebar end.320px