0.1.3 • Published 4 years ago
ngx-vertical-sortable-menu v0.1.3
ngx-vertical-sortable-menu
Vertical sorting drag menu based on angular6 +
Overview
How to use it?
npm i -S ngx-vertical-sortable-menu
Import the NgxVerticalSortableMenuModule in your app.module.ts:
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
NgxVerticalSortableMenuModule
],
providers: [],
bootstrap: [AppComponent]
})
Use the NgxVerticalSortableMenuComponent by placing:
<div style="height: 100vh;border-right: 1px solid #cccccc;width: 240px;">
<ngx-vertical-sortable-menu
(closeEmit)="closeEmit($event)"
(clickEmit)="clickEmit($event)"
(menuSort)="menuSort($event)"
[menuList]="menus"
liHeight="40"></ngx-vertical-sortable-menu>
</div>
API
interface
- MenuItem:
type iconTy = 'class';
interface MenuItem {
name: string;
url: string;
icon?: string;
id?: string | number;
iconType?: iconTy;
}
Input &Output
Property | Description | Type | Default |
---|---|---|---|
menuList | An array of the MenuItem type | MenuItem[] | - |
liHeight | Menu line height | number | - |
(clickEmit) | Menu click event callback function. | EventEmitter<MenuItem[]> | - |
(closeEmit) | Menu close event callback function. | EventEmitter<MenuItem[]> | - |
(menuSort) | Returns the current data when dragged and sorted. | EventEmitter<MenuItem[]> | - |