@nativescript-community/ui-drawer

轻松将侧滑抽屉（侧边菜单）添加到您的项目中。

iOS 示例	Android 示例

目录

• 安装
• 配置
• API
  • 属性
  • 方法
  • 事件
• 在 Angular 中的使用
  • 示例
• 在 React 中的使用
  • 示例
• 在 Svelte 中的使用
  • 示例
• 在 Vue 中的使用
  • 示例
• 在 Vue3 中的使用
  • 示例
• 演示和开发
  • 仓库设置
  • 构建
  • 演示
• 贡献
  • 更新仓库
  • 更新 README
  • 更新文档
  • 发布
  • 修改子模块
• 问题

安装

从项目的根目录运行以下命令

ns plugin add @nativescript-community/ui-drawer

配置

为了使手势功能正常工作，请确保在主应用程序文件（例如 app.ts）内部添加以下代码块

import { install } from '@nativescript-community/ui-drawer';
install();

API

属性

方法

事件

在 Angular 中的使用

将模块导入到您的项目中。

import { DrawerModule } from "@nativescript-community/ui-drawer/angular";

@NgModule({
    imports: [
        DrawerModule
    ]
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})

export class AppModule { }

示例

• 基本抽屉
  • 一个基本的滑动抽屉。
• 所有侧面
  • 所有侧面（左侧、右侧、顶部、底部）抽屉的示例。

在 React 中的使用

在您的 app.ts 中注册插件。

import DrawerElement from '@nativescript-community/ui-drawer/react';
DrawerElement.register();

示例

• 基本抽屉
  • 一个基本的滑动抽屉。
• 所有侧面
  • 所有侧面（左侧、右侧、顶部、底部）抽屉的示例。

在 Svelte 中的使用

在您的 app.ts 中注册插件。

import DrawerElement from '@nativescript-community/ui-drawer/svelte';
DrawerElement.register();

示例

• 基本抽屉
  • 一个基本的滑动抽屉。
• 所有侧面
  • 所有侧面（左侧、右侧、顶部、底部）抽屉的示例。

在 Vue 中的使用

在您的 app.js 中注册插件。

import DrawerPlugin from '@nativescript-community/ui-drawer/vue'
Vue.use(DrawerPlugin);

示例

• 基本抽屉
  • 一个基本的滑动抽屉。
• 所有侧面
  • 所有侧面（左侧、右侧、顶部、底部）抽屉的示例。

在 Vue3 中的使用

在您的 app.js 中注册插件。

import DrawerPlugin from '@nativescript-community/ui-drawer/vue3'

app.use(DrawerPlugin);

示例

• 基本抽屉
  • 一个基本的滑动抽屉。
• 所有侧面
  • 所有侧面（左侧、右侧、顶部、底部）抽屉的示例。

演示和开发

仓库设置

该仓库使用子模块。如果您没有使用 --recursive 进行克隆，则需要调用

git submodule update --init

用于安装和链接依赖项的包管理器必须是 pnpm 或 yarn。 npm 不可用。

开发和测试：如果您使用 yarn，则运行 yarn；如果您使用 pnpm，则运行 pnpm i

交互式菜单

要启动交互式菜单，运行 npm start（或 yarn start 或 pnpm start）。这将列出所有常用的脚本。

构建

npm run build.all

警告：似乎 yarn build.all 并不总是有效（在 node_modules/.bin 中找不到二进制文件），这就是为什么文档明确使用 npm run

演示

npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example

示例设置有些特别，如果您想修改/添加示例，您不需要直接在 demo-[ng|react|svelte|vue] 中工作。相反，您应该在 demo-snippets/[ng|react|svelte|vue] 中工作。您可以从每种风格的 install.ts 开始，看看如何注册新的示例。

贡献

更新仓库

您可以非常容易地更新仓库文件。

首先更新子模块。

npm run update

然后提交更改，然后更新通用文件。

npm run sync

然后您可以运行 yarn|pnpm，如果有任何更改，请提交更改的文件。

更新 README

npm run readme

更新文档

npm run doc

发布

发布完全由 lerna 处理（您可以添加 -- --bump major 以强制发布主版本）。只需运行即可。

npm run publish

修改子模块

仓库使用 https:// 用于子模块，这意味着您不能直接推送到子模块。一个简单的解决方案是修改 ~/.gitconfig 并添加

[url "ssh://[email protected]/"]
	pushInsteadOf = https://github.com/

问题

如果您有任何问题/问题/评论，请随时创建一个问题或开始一个在 NativeScript 社区 Discord 中的对话。