DevExtreme v21.1.5最新版下載

添加一個新視圖

運行以下命令以添加一個新視圖，--icon指定DevExtreme 圖標庫中的圖標。

npx devextreme add view view-name [--icon=IconName]

您可以在src\app\pages文件夾下找到添加的視圖，此命令還會為src\app\app-navigation.ts文件中添加的視圖創建導航菜單項。

配置導航菜單

配置菜單項

編輯 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 組件，工具欄是其配置在src\app\shared\components\header目錄中的HeaderComponent的一部分。要添加自定義工具欄項目，打開此目錄中的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 | 下載試用

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

DevExpress技術交流群4：715863792      歡迎一起進群討論