DevExtreme React 應(yīng)用程序模板可幫助您創(chuàng)建一個(gè)簡(jiǎn)單的 React 應(yīng)用程序，其中包含一個(gè)導(dǎo)航菜單和響應(yīng)式布局中的幾個(gè)示例視圖。

DevExtreme v21.1.6最新版下載

生成新的應(yīng)用程序

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

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

布局

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

外部工具欄（默認(rèn)）

內(nèi)部工具欄

要切換到另一個(gè)布局，請(qǐng)打開(kāi)src\Content.js文件并將SideNavOuterToolbar導(dǎo)入替換為SideNavInnerToolbar：

Content.js

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

要生成帶有內(nèi)部工具欄的新應(yīng)用程序，請(qǐng)將 --layout 標(biāo)志設(shè)置為 side-nav-inner-toolbar：

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

添加一個(gè)新的視圖

運(yùn)行以下命令以添加新視圖， --icon 指定 DevExtreme 圖標(biāo)庫(kù)中的圖標(biāo)。

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

您可以在 src\pages 文件夾下找到添加的視圖，此命令還會(huì)為src\app-navigation.js文件中添加的視圖創(chuàng)建導(dǎo)航菜單項(xiàng)。

配置導(dǎo)航菜單

配置菜單項(xiàng)

編輯 src\app-navigation.js 文件來(lái)配置導(dǎo)航菜單項(xiàng)，每個(gè)項(xiàng)目配置可以有以下字段：

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

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

JavaScript

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

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

在關(guān)閉狀態(tài)下，導(dǎo)航菜單部分可見(jiàn)，因?yàn)樗@示項(xiàng)目圖標(biāo)。 如果項(xiàng)目沒(méi)有圖標(biāo)，您可以隱藏菜單。為此，打開(kāi) SideNavOuterToolbar 或 SideNavInnerToolbar 組件（取決于使用的布局），找到 Drawer 配置，并將其 minSize 屬性設(shè)置為 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小部件集合，使您可以利用現(xiàn)代Web開(kāi)發(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和下一代移動(dòng)應(yīng)用程序中使用。 該套件附帶功能齊全的數(shù)據(jù)網(wǎng)格、交互式圖表小部件、數(shù)據(jù)編輯器等。

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