配置導航菜單
配置菜單項
編輯src\app\app-navigation.ts文件來配置導航菜單項，每個項目配置可以有以下字段：
- text - 項目的文本
- icon - 項目的圖標
- path - 與項目關聯的導航路徑
- items - 子項目
注意：菜單項應該導航到頁面或包含子項，因此不要爲同一菜單項同時指定路徑和項目。
JavaScript
{
text: 'Category',
icon: 'folder',
items: [{
text: 'About',
path: '/about'
}]
}
在關閉狀態下隱藏菜單
在關閉狀態下，導航菜單部分可見，因爲它顯示項目圖標。 如果項目沒有圖標，您可以隱藏菜單。 爲此請打開 SideNavOuterToolbarComponent 或 SideNavInnerToolbarComponent（取決於佈局）並按如下方式更改 updateDrawer() 函數：
side-nav-outer-toolbar.component.ts
// ...
export class SideNavInnerToolbarComponent implements OnInit {
// ...
updateDrawer() {
// ...
this.minMenuSize = 0;
}
}
添加自定義工具欄項
應用程序模板使用DevExtreme Toolbar組件，Toolbar是HeaderComponent的一部分，其配置位於src\app\shared\components\header目錄中。要添加自定義工具欄項，請打開此目錄中的 header.component.html 文件並在dx-toolbar中添加一個dxi-item元素。
header.component.html
<header>
<dx-toolbar class="header-toolbar">
<!-- ... -->
<dxi-item
location="after"
widget="dxButton"
[options]="{
icon: 'search',
onClick: startSearch
}">
</dxi-item>
<!-- ... -->
</dx-toolbar>
</header>
header.component.ts
export class HeaderComponent {
// ...
@Output()
search = new EventEmitter<void>();
startSearch = () => {
this.search.emit();
}
}
side-nav-outer-toolbar.component.html
<app-header ... (search)="search()"> </app-header> <!-- ... -->
side-nav-outer-toolbar.component.ts
export class SideNavOuterToolbarComponent implements OnInit {
// ...
search() {
console.log("search");
}
}
在上面的代碼中，按鈕單擊處理程序在 SideNavOuterToolbarComponent 中聲明，當使用外部工具欄佈局時應用此組件。如果應用程序使用內部工具欄佈局，請將相同的代碼添加到 SideNavInnerToolbarComponent。
DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現代Web開發堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構建交互式的Web應用程序。從Angular和Reac，到ASP.NET Core或Vue，DevExtreme包含全面的高性能和響應式UI小部件集合，可在傳統Web和下一代移動應用程序中使用。 該套件附帶功能齊全的數據網格、交互式圖表小部件、數據編輯器等。
DevExpress技術交流羣4：715863792 歡迎一起進羣討論