npm i --save @nativescript/template-tab-navigation-ng
- 版本:8.8.1
- GitHub: https://github.com/NativeScript/nativescript-app-templates
- NPM: https://npmjs.net.cn/package/%40nativescript%2Ftemplate-tab-navigation-ng
- 下载次数
- 昨天:2
- 上周:40
- 上个月:141
NativeScript 与 Angular 标签导航模板
应用模板可以帮助您使用内置 UI 元素和最佳实践快速启动原生跨平台应用程序。创建新应用时,节省重复编写样板代码的时间。
具有用于导航的 TabView 组件的应用模板。
主要功能
- 标签导航
- 五个与标签导航连接的空白页面
- 可定制主题
- 用户体验和开发最佳实践
- 易于理解的代码
快速入门
执行以下命令可从该模板创建应用程序:
ns create my-tab-ng --template @nativescript/template-tab-navigation-ng
注意:此命令将创建一个使用发布到 npm 的最新版本模板的新 NativeScript 应用程序。
如果您想创建一个使用来自 main
分支的模板源的新应用程序,您可以执行以下操作:
# clone nativescript-app-templates monorepo locally
git clone [email protected]:NativeScript/nativescript-app-templates.git
# create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
ns create my-tab-ng --template nativescript-app-templates/packages/template-tab-navigation-ng
注意:请注意,主分支可能引用尚未在 NPM 上提供的依赖项!
指南
架构
标签导航在应用程序组件中设置
/src/app/app.component
- 设置标签导航并定义项目路由出口。
这些文件夹中有四个组件用于标签内容项目
/src/app/home/home.component
- 主主页。显示项目列表,并在项目上点击时导航到项目详情页面。/src/app/home/item-detail/item-detail.component
- 项目详情页面。显示点击的项目详情。/src/app/browse/browse.component
- 空白页面/src/app/search/search.component
- 空白页面
样式
此模板设置为使用 SASS 进行样式设置。所有使用的类都基于 {N} 核心主题 - 咨询文档以了解如何自定义。
它有 3 个全局样式文件,位于应用程序文件夹的根目录
/src/_app-common.scss
- 全局通用样式表。这些样式规则应用于 Android 和 iOS。/src/app.android.scss
- 全局 Android 样式表。这些样式规则仅应用于 Android。/src/app.ios.scss
- 全局 iOS 样式表。这些样式规则仅应用于 iOS。
获取帮助
NativeScript 框架有一个充满活力的社区,可以在您遇到问题时提供帮助。
尝试加入NativeScript 社区 Discord。Discord 频道是获取帮助解决故障的好地方,同时也是与其他 NativeScript 开发者联系的好地方。
如果您在此模板中发现问题,请在 NativeScript 存储库中报告问题。
贡献
我们喜欢 PR,并且乐于接受。请随时提出更改和新想法。我们将进行审查和讨论,以便它们可以被接受并更好地整合。