NativeScript plugin that allows you to easily add a persistent bottomsheet to your projects.
npm install @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
* Properties
* Methods
* Usage in Angular
* Usage in Vue
* Usage in Svelte
* Usage in React
* Demos
* Demos and Development
* Repo Setup
* Build
* Demos
* Contributing
* Update repo
* Update readme
* Update doc
* Publish
* modifying submodules
* Questions
[](#installation)
ns plugin add @nativescript-community/ui-persistent-bottomsheet
[](#configuration)
``typescript`
import { install } from '@nativescript-community/ui-persistent-bottomsheet';
install();
[](#api)
| Property | Default | Type | Description |
| ------------------- | --------------------------------- | --------------------------- | ------------------------------------------------------- |
| bottomSheet | undefined | View | View containing the content for the bottomsheet |true
| gestureEnabled | | boolean | Boolean setting if swipe gestures are enabled |0
| stepIndex | | number | the index of current step (mutable) |[70]
| steps | | number[] | the different available steps |new Color('rgba(0, 0, 0, 0.7)')
| backdropColor | | Color | The color of the backdrop behind the drawer |
| Name | Return | Description |
| ------------ | ------ | ----------------------------------------------- |
| install() | void | Install gestures |
[](#usage-in-angular)
`typescript
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:
`xml
`demo-ng
For a more complete example, look in the directory.
[](#usage-in-vue)
Register the plugin in your app.js.
`typescript`
import BottomSheetPlugin from '@nativescript-community/ui-persistent-bottomsheet/vue';
Vue.use(BottomSheetPlugin);
Add this at the top of your webpack config file:
`javascript
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:
`xml
`demo-vue
For a more complete example, look in the directory.
[](#usage-in-svelte)
Register the plugin in your app.ts.
`typescript`
import BottomSheetElement from '@nativescript-community/ui-persistent-bottomsheet/svelte';
BottomSheetElement.register();
Then in your component, add the following:
`xml
`demo-svelte
For a more complete example, look in the directory.
[](#usage-in-react)
Register the plugin in your app.ts.
`typescript`
import BottomSheetElement from '@nativescript-community/ui-persistent-bottomsheet/react';
BottomSheetElement.register();
Then in your component, add the following:
`ts`
import { BottomSheet } from "@nativescript-community/ui-persistent-bottomsheet/react"
`xml
`demo-react
For a more complete example, look in the directory.
[](#demos)
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)
Demos and Development
$3
The repo uses submodules. If you did not clone with
--recursive then you need to call
`
git submodule update --init
`The package manager used to install and link dependencies must be
pnpm or yarn. npm wont work.To develop and test:
if you use
yarn then run yarn
if you use pnpm then run pnpm iInteractive Menu:
To start the interactive menu, run
npm start (or yarn start or pnpm start). This will list all of the commonly used scripts.$3
`bash
npm run build.all
`
WARNING: it seems yarn build.all wont always work (not finding binaries in node_modules/.bin) which is why the doc explicitly uses npm run$3
`bash
npm run demo.[ng|react|svelte|vue].[ios|android]npm run demo.svelte.ios # Example
`Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in
demo-[ng|react|svelte|vue]
Instead you work in demo-snippets/[ng|react|svelte|vue]
You can start from the install.ts of each flavor to see how to register new demos
[](#contributing)
Contributing
$3
You can update the repo files quite easily
First update the submodules
`bash
npm run update
`Then commit the changes
Then update common files
`bash
npm run sync
`
Then you can run yarn|pnpm, commit changed files if any$3
`bash
npm run readme
`$3
`bash
npm run doc
`$3
The publishing is completely handled by
lerna (you can add -- --bump major to force a major release)
Simply run
`shell
npm run publish
`$3
The repo uses https:// for submodules which means you won't be able to push directly into the submodules.
One easy solution is t modify
~/.gitconfig and add
`
[url "ssh://git@github.com/"]
pushInsteadOf = https://github.com/
``
[](#questions)
If you have any questions/issues/comments please feel free to create an issue or start a conversation in the NativeScript Community Discord.