- Version: 0.0.21
- GitHub: https://github.com/nativescript-community/ui-persistent-bottomsheet
- Downloads:
- Last Day: 17
- Last Week: 63
- Last Month: 334
@nativescript-community/ui-persistent-bottomsheet
NativeScript plugin that allows you to easily add a persistent bottomsheet to your projects.
![]() |
![]() |
---|---|
iOS Demo | Android Demo |
Table of Contents
- Installation
- Configuration
- API
- Usage in Angular
- Usage in Vue
- Usage in Svelte
- Usage in React
- Demos
- Demos and Development
- Questions
Installation
Run the following command from the root of your project:
ns plugin add @nativescript-community/ui-persistent-bottomsheet
Configuration
For gestures to work, make sure to add the following code block inside the main application file (e.g. app.ts):
import { install } from '@nativescript-community/ui-persistent-bottomsheet';
install();
API
Properties
Property | Default | Type | Description |
---|---|---|---|
bottomSheet | undefined |
View |
View containing the content for the bottomsheet |
gestureEnabled | true |
boolean |
Boolean setting if swipe gestures are enabled |
stepIndex | 0 |
number |
the index of current step (mutable) |
steps | [70] |
number[] |
the different available steps |
backdropColor | new Color('rgba(0, 0, 0, 0.7)') |
Color |
The color of the backdrop behind the drawer |
Methods
Name | Return | Description |
---|---|---|
install() | void |
Install gestures |
Usage in Angular
Import the module into your project.
import { PBSModule } from "@nativescript-community/ui-persistent-bottomsheet/angular";
@NgModule({
imports: [
PBSModule
]
schemas: [
NO_ERRORS_SCHEMA
]
})
export class AppModule { }
Then in your component add the following:
<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>
For a more complete example, look in the demo-ng
directory.
Usage in Vue
Register the plugin in your app.js
.
import BottomSheetPlugin from '~/components/drawer/vue';
Vue.use(BottomSheetPlugin);
Add this at the top of your webpack config file:
const NsVueTemplateCompiler = require('nativescript-vue-template-compiler');
NsVueTemplateCompiler.registerElement('BottomSheet', () => require('@nativescript-community/ui-persistent-bottomsheet').BottomSheet, {
model: {
prop: 'stepIndex',
event: 'stepIndexChange'
}
});
Then in your component add the following:
<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>
For a more complete example, look in the demo-vue
directory.
Usage in Svelte
Register the plugin in your app.ts
.
import BottomSheetElement from '@nativescript-community/ui-persistent-bottomsheet/svelte';
BottomSheetElement.register();
Then in your component, add the following:
<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>
For a more complete example, look in the demo-svelte
directory.
Usage in React
Register the plugin in your app.ts
.
import BottomSheetElement from '@nativescript-community/ui-persistent-bottomsheet/react';
BottomSheetElement.register();
Then in your component, add the following:
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>
For a more complete example, look in the demo-react
directory.
Demos
This repository includes Angular, Vue.js, and Svelte demos. In order to run these execute the following in your 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
Demos and Development
Setup
To run the demos, you must clone this repo recursively.
git clone https://github.com/@nativescript-community/ui-persistent-bottomsheet.git --recursive
Install Dependencies:
npm i # or 'yarn install' or 'pnpm install'
Interactive Menu:
To start the interactive menu, run npm start
(or yarn start
or pnpm start
). This will list all of the commonly used scripts.
Build
npm run build
npm run build.angular # or for Angular
Demos
npm run demo.[ng|react|svelte|vue].[ios|android]
npm run demo.svelte.ios # Example
Questions
If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.