`<c-toolbar>`

Examples

Basic

Vue

React

Angular

TypeScript

<template>
  <div>
    <!-- The relative class keeps the toolbar in flow; by default it is fixed to the top of the viewport -->
    <c-toolbar class="relative">
      <c-csc-logo />

      <span>My Service</span>

      <c-button style="margin-inline-start: auto" text>Log out</c-button>
    </c-toolbar>
  </div>
</template>

API reference

`<c-toolbar>`

Slot	Description
`default`	Content of toolbar

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

Part	Description
`root`	The toolbar bar itself, fixed to the top of the viewport

<c-toolbar>

Examples

API reference

<c-toolbar>

Slots

CSS parts

`<c-toolbar>`

`<c-toolbar>`