UNPKG

@covalent/core

Version:

Core Teradata UI Platform for layouts, icons, custom components and themes. This should be added as a dependency for any project that wants to use layouts, icons and themes for Angular Material.

65 lines (46 loc) 1.64 kB
# CovalentSideSheet Main injectable to import and call the `open` method with any TemplateRef or Component ## td-side-sheet-title `td-side-sheet-title` adds title styling to an element (optional) ## td-side-sheet-close `td-side-sheet-close` will close the open side sheet on click, enter, etc. ## td-side-sheet-content `td-side-sheet-content` creates an element to hold the content with margins that follow Material spec and also scroll when the content is larger than the view port ## td-side-sheet-actions `td-side-sheet-actions` creates a sticky footer that can hold multiple actions (optional) ## Setup Import the [CovalentSideSheetModule] in your NgModule: ```typescript import { CovalentSideSheetModule } from '@covalent/core/side-sheet'; @NgModule({ imports: [ CovalentSideSheetModule, ... ], ... }) export class MyModule {} ``` ## Usage Basic Example: ```typescript import { ExampleSideSheetComponent } from './example.sidebar/example.sidesheet.component'; import { CovalentSideSheet } from '.@covalent/core/side-sheet'; export class AppComponent { constructor(private sideSheet: CovalentSideSheet) { this.sideSheet.open(ExampleSidebarComponent); } } ``` Example component html content with optional directives to support styling: ```html <span td-sidesheet-title> Side Sheet Title <button mat-icon-button td-side-sheet-close>close</button> </span> <td-side-sheet-content> Sidesheet Content </td-side-sheet-content> <td-sidesheet-actions> <button mat-icon-button td-side-sheet-close>close</button> <button mat-icon-button td-side-sheet-close>save</button> </td-sidesheet-actions> ```