NativeScript 底部菜单

NativeScript 插件，允许您轻松地将持久底部菜单添加到项目中。

目录

1. 安装
2. 配置
3. API
4. 在 Angular 中使用
5. 在 Vue 中使用
6. 在 Svelte 中使用
7. 在 React 中使用
8. 演示

安装

ns plugin add @nativescript-community/ui-persistent-bottomsheet

配置

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

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

API

属性

方法

在 Angular 中使用

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

import { PBSModule } from "@nativescript-community/ui-persistent-bottomsheet/angular";

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

export class AppModule { }

然后在您的组件中添加以下内容

<BottomSheet>
    <StackLayout backgroundColor="white">
      <Label text="This is the main content"></Label>
    </StackLayout>
    <GridLayout bottomSheet backgroundColor="white" height="70">
      <Label text="This is the side drawer content"></Label>
    </GridLayout>

   
</BottomSheet>

对于更完整的示例，请查看 demo-ng 目录。

在 Vue 中使用

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

import BottomSheetPlugin from '~/components/drawer/vue';
Vue.use(BottomSheetPlugin);

然后在您的组件中添加以下内容

<BottomSheet>
    <StackLayout backgroundColor="white">
      <Label text="This is the main content" />
    </StackLayout>
    <GridLayout ~bottomSheet backgroundColor="white" height="70">
      <Label text="This is the side drawer content" />
    </GridLayout>

</BottomSheet>

对于更完整的示例，请查看 demo-vue 目录。

在 Svelte 中使用

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

import BottomSheetElement from '@nativescript-community/ui-persistent-bottomsheet/svelte';
BottomSheetElement.register();

然后在您的组件中添加以下内容

<bottomsheet>
    <stacklayout  backgroundColor="white">
      <Label text="This is the main content" />
    </stacklayout>
    <gridlayout prop:bottomSheet backgroundColor="white" height="70">
      <Label text="This is the side drawer content" />
    </gridlayout>

</bottomsheet>

对于更完整的示例，请查看 demo-svelte 目录。

在 React 中使用

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

import BottomSheetElement from '@nativescript-community/ui-persistent-bottomsheet/react';
BottomSheetElement.register();

然后在您的组件中添加以下内容

import { BottomSheet } from "@nativescript-community/ui-persistent-bottomsheet/react"

<BottomSheet>
  <stackLayout backgroundColor="white">
    <label text="This is the main content" />
  </stackLayout>
  <gridLayout nodeRole="bottomSheet" backgroundColor="white" height="70">
    <label text="This is the side drawer content" />
  </gridLayout>

</BottomSheet>

对于更完整的示例，请查看 demo-react 目录。

演示

此存储库包含 Angular、Vue.js 和 Svelte 演示。要运行这些演示，请在您的 shell 中执行以下操作

$ git clone https://github.com/@nativescript-community/ui-persistent-bottomsheet
$ cd ui-drawer
$ npm run i
$ npm run setup
$ npm run build && npm run build.angular
$ cd demo-ng # or demo-vue or demo-svelte or demo-react
$ ns run ios|android