原創(chuàng)|使用教程|編輯:龔雪|2021-08-09 11:35:59.620|閱讀 258 次
概述:本文主要介紹如何在DevExtreme中使用Ionic,歡迎下載最新版工具體驗(yàn)!
# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關(guān)鏈接:
注意:本教程旨在與最新版本的使用Ionic一起使用,不保證與早期版本的兼容性。
安裝devextreme和devextreme-angular npm包:
npm install devextreme@21.1 devextreme-angular@21.1 --save --save-exact
注意:建議保存DevExtreme的確切版本以避免意外更新,因?yàn)镈evExtreme不使用語(yǔ)義版本控制。在我們的版本系統(tǒng)中,第一個(gè)和中間的數(shù)字表示可能包含操作更改的主要版本。
打開(kāi) src 文件夾中的 global.scss 文件,并導(dǎo)入預(yù)定義的stylesheet(下面代碼中的dx.light.css)。
global.scss
@import '~devextreme/dist/css/dx.light.css';
注意:基于SVG的UI組件不需要stylesheets,如果您選擇導(dǎo)入stylesheets,UI 組件將應(yīng)用與其匹配的外觀。
跳轉(zhuǎn)到您將在其中使用的DevExtreme UI組件的 NgModule,并導(dǎo)入所需的DevExtreme模塊。請(qǐng)注意,如果在您的應(yīng)用程序中配置了tree shaking,可以從devextreme-angular導(dǎo)入模塊,否則,您應(yīng)該從特定文件中導(dǎo)入它們。
app.module.ts
// ... import { DxButtonModule } from 'devextreme-angular'; // or if tree shaking is not configured // import { DxButtonModule } from 'devextreme-angular/ui/button'; @NgModule({ imports: [ // ... DxButtonModule ], // ... }) export class AppModule { }
現(xiàn)在可以在您的應(yīng)用程序中使用 DevExtreme UI 組件:
DataGrid UI 組件和 Globalize 本地化需要額外的庫(kù)。
使用以下命令運(yùn)行應(yīng)用程序:
ionic serve
打開(kāi) //localhost:8100/ 瀏覽應(yīng)用程序。
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ù)交流群4:715863792 歡迎一起進(jìn)群討論
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@fc6vip.cn
文章轉(zhuǎn)載自:慧都網(wǎng)