NativeScript Angular 侧边导航模板

应用模板可以帮助您使用内置 UI 元素和最佳实践，快速启动您的原生跨平台应用。在创建新应用时，避免重复编写样板代码，节省时间。

包含 RadSideDrawer 组件的模板，用于导航。RadSideDrawer 组件是 Progress NativeScript UI 的一部分。

主要功能

• 侧边导航
• 五个与抽屉导航相关联的空白页面
• 可定制的主题
• 用户体验和开发最佳实践
• 易于理解的代码

快速入门

执行以下命令从模板创建应用：

tns create my-drawer-ng --template tns-template-drawer-navigation-ng

注意：此命令将创建一个使用最新版本的此模板的 NativeScript 应用。

如果您想从 master 分支创建使用模板源的新应用，您可以执行以下操作：

# 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)
tns create my-drawer-ng --template nativescript-app-templates/packages/template-drawer-navigation-ng

注意：请记住，master 分支可能引用尚未在 NPM 上发布的依赖项！

教程

架构

RadSideDrawer 组件在

• /src/app/app-component 中设置为一个应用程序根视图 - 设置侧边导航内容并定义一个页面路由出口。

RadSideDrawer 具有以下组件结构

• RadSideDrawer - 在页面上显示抽屉的组件。
• tkDrawerContent 指令 - 标记将包含抽屉内容的组件。
• tkMainContent 指令 - 标记将包含应用程序主要内容的组件。

在这些文件夹中有五个空白组件

• /src/app/browse/browse.component
• /src/app/featured/featured.component
• /src/app/home/home.component
• /src/app/search/search.component
• /src/app/settings/settings.component

样式

此模板设置为使用 SASS 进行样式设置。所有使用的类都基于 {N} 核心主题 - 咨询 文档 了解如何自定义它。

它包含 3 个全局样式文件，位于应用程序文件夹的根目录

• /src/_app-common.scss - 全局公共样式表。这些样式规则应用于 Android 和 iOS。
• /src/app.android.scss - 全局 Android 样式表。这些样式规则仅应用于 Android。
• /src/app.ios.scss - 全局 iOS 样式表。这些样式规则仅应用于 iOS。

获取帮助

NativeScript 框架拥有一个充满活力的社区，可以在您遇到问题时提供帮助。

尝试 加入 NativeScript 社区 Slack。Slack 频道是获取帮助、解决问题的绝佳地方，同时也是与其他 NativeScript 开发者建立联系的好地方。

如果您在此模板中发现问题，请在 NativeScript 存储库 中报告问题。

贡献

我们热爱PR（Pull Requests），并乐意接受。请随意提出更改和新想法。我们将进行审查和讨论，以确保它们被接受并更好地集成。