`<c-main>`

Wrapper component for the whole page

Examples

Basic

Vue

React

Angular

TypeScript

<template>
  <c-main class="demo-shell">
    <c-toolbar class="relative">
      <c-csc-logo />

      <span>My Service</span>
    </c-toolbar>

    <c-page>
      <h2>Dashboard</h2>

      <p>Page content goes here.</p>
    </c-page>
  </c-main>
</template>

<style scoped>
/* Demo-only sizing: c-main normally fills the whole viewport. */
.demo-shell::part(root) {
  height: 320px;
}

.demo-shell c-page {
  height: auto;
}
</style>

API reference

`<c-main>`

Wrapper component for the whole page

Properties

Property	Attribute	Type	Default	Description
`disableLayout`	`disable-layout`	`boolean`	`false`	Disable the default dashboard layout

Slots

Slot	Description
`default`	Contents of the page

CSS parts

Style from outside with c-main::part(name) — parts are the library's only styling customization API.

Part	Description
`root`	The main element carrying the page background and dashboard grid layout