diff --git a/README.md b/README.md index de4a2eb..0d301d7 100644 --- a/README.md +++ b/README.md @@ -6,13 +6,59 @@ An Angular 2 sidebar component. -*Documentation coming soon* - -### Development +## Installation ```shell -npm install -typings install -npm start -``` \ No newline at end of file +npm install --save ng2-sidebar +``` + + +## Usage + +Import the component and add it to the list of directives on your component: + +```typescript +import Sidebar from 'ng2-sidebar'; + +@Component({ + selector: 'example', + directives: [Sidebar], + template: ` + +

Sidebar contents

+
+ + + ` +}) +export class MyComponent { + private _open: boolean = false; + + private _toggleSidebar() { + this._open = !this._open; + } +} +``` + +### Options + +#### `[(open)]="boolean_value"` +Boolean input value that controls the visibility of the sidebar. This should be two-way bound in case +the value changes when the sidebar is closed by clicking outside of it when `closeOnClickOutside` is +enabled. + +#### `[pullRight]="boolean_value"` +Boolean input value + +#### `[closeOnClickOutside]="boolean_value"` +Boolean input value that controls whether clicking outside of the open sidebar will close it. + +#### `[sidebarClassName]="'string_value'"` +A string used as an additional class name on the sidebar element. + +#### `(onOpen)="func_call()"` +An output event, emitted when the sidebar is opened. + +#### `(onClose)="func_call()"` +An output event, emitted when the sidebar is closed.