DevExtreme React 應用程序模板可幫助您創建一個簡單的 React 應用程序，其中包含一個導航菜單和響應式布局中的幾個示例視圖。

DevExtreme v21.1.6最新版下載

生成新的應用程序

npx -p devextreme-cli devextreme new react-app app-name
cd app-name
npm run start

該應用程序已經包含和組件，您可以在src\pages\display-data\display-data.js 和src\pages\profile\profile.js 文件中分別找到它們的配置。

布局

該應用程序包括兩種布局，它們之間的唯一區別是工具欄所在的位置。

外部工具欄（默認）

內部工具欄

要切換到另一個布局，請打開src\Content.js文件并將SideNavOuterToolbar導入替換為SideNavInnerToolbar：

Content.js

import {
SideNavInnerToolbar as SideNavBarLayout,
SingleCard
} from './layouts';

要生成帶有內部工具欄的新應用程序，請將 --layout 標志設置為 side-nav-inner-toolbar：

npx devextreme-cli new react-app app-name --layout=side-nav-inner-toolbar

添加一個新的視圖

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

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

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

配置導航菜單

配置菜單項

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

• text - 項目的文本
• icon - 項目的圖標
• path - 與項目關聯的導航路徑
• items - 子項

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

JavaScript

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

在關閉狀態下隱藏菜單

在關閉狀態下，導航菜單部分可見，因為它顯示項目圖標。 如果項目沒有圖標，您可以隱藏菜單。為此，打開 SideNavOuterToolbar 或 SideNavInnerToolbar 組件（取決于使用的布局），找到 Drawer 配置，并將其 minSize 屬性設置為 0：

side-nav-outer-toolbar.js

// ...
export default function ({ title, children }) {
// ...
return (
<div className={'side-nav-inner-toolbar'}>
<Drawer ...
minSize={0}>
{/* ... */}
</Drawer>
</div>
);
}

DevExtreme | 下載試用

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

DevExpress技術交流群5：742234706      歡迎一起進群討論