@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
Markdown
# 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>
```