DevExtreme v21.1.5最新版下載

配置導(dǎo)航菜單

配置菜單項

編輯src\app\app-navigation.ts文件來配置導(dǎo)航菜單項，每個項目配置可以有以下字段：

• text - 項目的文本
• icon - 項目的圖標(biāo)
• path - 與項目關(guān)聯(lián)的導(dǎo)航路徑
• items - 子項目

注意：菜單項應(yīng)該導(dǎo)航到頁面或包含子項，因此不要為同一菜單項同時指定路徑和項目。

JavaScript

{
text: 'Category',
icon: 'folder',
items: [{
text: 'About',
path: '/about'
}]
}

在關(guān)閉狀態(tài)下隱藏菜單

 在關(guān)閉狀態(tài)下，導(dǎo)航菜單部分可見，因為它顯示項目圖標(biāo)。 如果項目沒有圖標(biāo)，您可以隱藏菜單。 為此請打開 SideNavOuterToolbarComponent 或 SideNavInnerToolbarComponent（取決于布局）并按如下方式更改 updateDrawer() 函數(shù)：

side-nav-outer-toolbar.component.ts

// ...
export class SideNavInnerToolbarComponent implements OnInit {
// ...
updateDrawer() {
// ...
this.minMenuSize = 0;
}
}

添加自定義工具欄項

應(yīng)用程序模板使用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 中聲明，當(dāng)使用外部工具欄布局時應(yīng)用此組件。如果應(yīng)用程序使用內(nèi)部工具欄布局，請將相同的代碼添加到 SideNavInnerToolbarComponent。

DevExtreme | 下載試用

DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現(xiàn)代Web開發(fā)堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構(gòu)建交互式的Web應(yīng)用程序。從Angular和Reac，到ASP.NET Core或Vue，DevExtreme包含全面的高性能和響應(yīng)式UI小部件集合，可在傳統(tǒng)Web和下一代移動應(yīng)用程序中使用。 該套件附帶功能齊全的數(shù)據(jù)網(wǎng)格、交互式圖表小部件、數(shù)據(jù)編輯器等。

DevExpress技術(shù)交流群4：715863792      歡迎一起進(jìn)群討論