彩票走势图

DevExtreme初级入门教程(Angular篇):应用程序模板(Part 1)

原创|使用教程|编辑:龚雪|2021-08-16 10:10:29.887|阅读 206 次

概述:可直接利用DevExtreme Angular应用程序模板快速创建一个简单的Angular应用程序,本文主要介绍如何生成一个新的应用程序以及调整布局、添加视图。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

DevExtreme Angular应用程序模板可帮助您快速创建一个简单的Angular应用程序,其中包含一个导航菜单和响应式布局中的多个示例视图。

DevExtreme v21.1.5最新版下载

DevExtreme应用程序模板(part1) - 图1

生成一个新的应用程序

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

生成的应用程序已经包含DataGrid和Form组件,您可以在src\pages\display-data\display-data.component.html 和 src\pages\profile\profile.component.html文件中分别找到它们的配置。

布局

该应用程序包括两种布局,它们之间的唯一区别是工具栏所在的位置。

外部工具栏(默认)

DevExtreme应用程序模板(part1) - 图2

内部工具栏

DevExtreme应用程序模板(part1) - 图3

要切换到另一个布局,请打开src\app\app.component.html文件并将app-side-nav-outer-toolbar元素替换为app-side-nav-inner-toolbar:

app.component.html

<app-side-nav-inner-toolbar title="{{appInfo.title}}">
<!-- Layout content is here -->
</app-side-nav-inner-toolbar>

要生成带有内部工具栏的新应用程序,请将--layout标志设置为side-nav-inner-toolbar:

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

添加新的视图

运行以下命令来添加视图,--icon 指定中的图标。

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

您可以在src\app\pages文件夹下找到添加的视图,此命令还会为src\app\app-navigation.ts文件中添加的视图创建导航菜单项。


DevExpress技术交流群4:715863792      欢迎一起进群讨论

慧都DevExpress企业定制服务全新升级,助力企业打造一流应用界面

标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@cahobeh.cn

文章转载自:慧都网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP