Wrap the sidesheet elements you need in a td-sidesheet
element.
td-sidesheet-header
creates a header that can hold a title and an action (optional)
td-sidesheet-title
adds a title to the header (optional)
td-sidesheet-header-action
creates an action in the header (optional)
td-sidesheet-content
creates an element to hold the content with margins that follow Material spec
td-sidesheet-actions
creates a sticky footer that can hold multiple actions (optional)
Import the [CovalentSidesheetModule] in your NgModule:
import { CovalentSidesheetModule } from '@covalent/core/sidesheet'; @NgModule({ imports: [ CovalentSidesheetModule, ... ], ... }) export class MyModule {}
Basic Example:
<td-sidesheet> Sidesheet Content </td-sidesheet>
Example with optional components:
<td-sidesheet> <td-sidesheet-header> <td-sidesheet-title>Sidesheet Title</td-sidesheet-title> <button mat-icon-button td-sidesheet-header-action> ... add button for sidesheet action </button> </td-sidesheet-header> <td-sidesheet-content> Sidesheet Content </td-sidesheet-content> <td-sidesheet-actions> ... add button elements </td-sidesheet-actions> </td-sidesheet>