Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
ng2-sidebar
Advanced tools
ng2-sidebar - npm Package Compare versions
Comparing version 1.8.1 to 1.8.2
| { | ||
| "name": "ng2-sidebar", | ||
| "version": "1.8.1", | ||
| "description": "A sidebar component for Angular 2.", | ||
| "version": "1.8.2", | ||
| "description": "[DEPRECATED] Renamed to ng-sidebar.", | ||
| "repository": { | ||
@@ -6,0 +6,0 @@ "type": "git", |
121
README.md
| # ng2-sidebar | ||
| [](https://nodei.co/npm/ng2-sidebar) | ||
| **[Demo](https://echeung.me/ng2-sidebar)** | ||
| An Angular 2 sidebar component. | ||
| ## Installation | ||
| ```shell | ||
| npm install --save ng2-sidebar | ||
| ``` | ||
| ### SystemJS configuration | ||
| If you're using SystemJS, be sure to add the appropriate settings to your SystemJS config: | ||
| ```js | ||
| var map = { | ||
| // ... | ||
| 'ng2-sidebar': 'node_modules/ng2-sidebar', | ||
| // ... | ||
| }; | ||
| var packages = { | ||
| // ... | ||
| 'ng2-sidebar': { | ||
| main: 'lib/index', | ||
| defaultExtension: 'js' | ||
| }, | ||
| // ... | ||
| }; | ||
| ``` | ||
| ## Usage | ||
| Add `SidebarModule` to your app module: | ||
| ```typescript | ||
| import { SidebarModule } from 'ng2-sidebar'; | ||
| @NgModule({ | ||
| declarations: [AppComponent], | ||
| imports: [BrowserModule, SidebarModule], | ||
| bootstrap: [AppComponent], | ||
| }) | ||
| class AppModule {} | ||
| ``` | ||
| If you're using it in a feature module, you may need to add it as an import in that module as well. | ||
| In your component, simply use the directive in your template: | ||
| ```typescript | ||
| @Component({ | ||
| selector: 'app', | ||
| template: ` | ||
| <ng2-sidebar [(open)]="_open"> | ||
| <p>Sidebar contents</p> | ||
| </ng2-sidebar> | ||
| <button (click)="_toggleSidebar()">Toggle sidebar</button> | ||
| ` | ||
| }) | ||
| export class AppComponent { | ||
| private _open: boolean = false; | ||
| private _toggleSidebar() { | ||
| this._open = !this._open; | ||
| } | ||
| } | ||
| ``` | ||
| A directive is also provided to easily close the sidebar by clicking something inside it: | ||
| ```typescript | ||
| @Component({ | ||
| selector: 'example', | ||
| template: ` | ||
| <ng2-sidebar [(open)]="_open"> | ||
| <a closeSidebar>Closes the sidebar</a> | ||
| </ng2-sidebar> | ||
| ` | ||
| }) | ||
| // ... | ||
| ``` | ||
| ### Browser support | ||
| Note that this component uses Angular 2's [animation system](https://angular.io/docs/ts/latest/guide/animations.html), which relies on the Web Animations API. Unforunately, there is only [partial support](http://caniuse.com/#feat=web-animation) for this API in Firefox, Chrome, and Opera, so it's recommended to use [the web-animations.js polyfill](https://github.com/web-animations/web-animations-js) for support in other browsers. | ||
| ### Options | ||
| #### Inputs | ||
| | Property name | Type | Default | Description | | ||
| | ------------- | ---- | ------- | ----------- | | ||
| | open | boolean | `false` | If the sidebar should be open. This should be two-way bound. | | ||
| | position | `'left' | 'right' | 'top' | 'bottom'` | `'left'` | What side the sidebar should be docked to. `SIDEBAR_POSITION` can also be used instead of the strings. | | ||
| | closeOnClickOutside | boolean | `false` | Whether clicking outside of the open sidebar will close it. | | ||
| | showOverlay | boolean | `false` | If a translucent black overlay should appear over the page contents when the sidebar is open. | | ||
| | animate | boolean | `true` | Whether the sidebar should animate when opening/closing. | | ||
| | defaultStyles | boolean | `false` | Applies some basic default styles to the sidebar. | | ||
| | trapFocus | boolean | `true` | Keeps focus within the sidebar if it's open. | | ||
| | autoFocus | boolean | `true` | Automatically focuses the first focusable element in the sidebar when opened. | | ||
| | sidebarClass | string | | Additional class name on the sidebar element. | | ||
| | overlayClass | string | | Additional class name on the overlay element. | | ||
| | ariaLabel | string | | String used for the sidebar's `aria-label` attribute. | | ||
| | keyClose | boolean | `false` | Close the sidebar when a keyboard button is pressed. | | ||
| | keyCode | number | `27` | The [KeyCode](http://keycode.info/) for `keyClose`. | | ||
| #### Outputs | ||
| | Property name | Callback arguments | Description | | ||
| | ------------- | ------------------ | ----------- | | ||
| | onOpen | | Emitted when the sidebar is opened. | | ||
| | onClose | | Emitted when the sidebar is closed. | | ||
| | onAnimationStarted | `e: AnimationTransitionEvent` | Emitted when the animation is started. | | ||
| | onAnimationDone | `e: AnimationTransitionEvent` | Emitted when the animation is done. | | ||
| This package has been renamed to [ng-sidebar](https://github.com/arkon/ng-sidebar). |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Deprecated
MaintenanceThe maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.
Found 1 instance in 1 package
Improved metrics
- Number of medium maintenance alerts
- decreased by-100%
0
Worsened metrics
- Total package byte prevSize
- decreased by-7.06%
49701
- Number of lines in readme file
- decreased by-96.75%
4
No dependency changes