翻譯|使用教程|編輯:龔雪|2021-11-22 15:05:45.180|閱讀 209 次
概述:本文主要介紹如何利用DevExtreme的應(yīng)用程序模板創(chuàng)建一個(gè)簡(jiǎn)單的React應(yīng)用,歡迎下載最新版體驗(yàn)!
# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關(guān)鏈接:
DevExtreme React 應(yīng)用程序模板可幫助您創(chuàng)建一個(gè)簡(jiǎn)單的 React 應(yīng)用程序,其中包含一個(gè)導(dǎo)航菜單和響應(yīng)式布局中的幾個(gè)示例視圖。
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
運(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)。
配置菜單項(xiàng)
編輯 src\app-navigation.js 文件來(lái)配置導(dǎo)航菜單項(xiàng),每個(gè)項(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擁有高性能的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)群討論
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自:慧都網(wǎng)