@@ -7,7 +7,9 @@ NativeScript plugin that allows you to easily add persistent bottomsheet to your
7
7
[ ![ npm downloads] ( https://img.shields.io/npm/dt/@nativescript-community/ui-persistent-bottomsheet.svg )] ( https://www.npmjs.com/package/@nativescript-community/ui-persistent-bottomsheet )
8
8
9
9
---
10
+
10
11
## Table of Contents
12
+
11
13
1 . [ Installation] ( #installation )
12
14
2 . [ Configuration] ( #configuration )
13
15
3 . [ API] ( #api )
@@ -24,6 +26,7 @@ ns plugin add @nativescript-community/ui-persistent-bottomsheet
24
26
```
25
27
26
28
## Configuration
29
+
27
30
For gestures to work, make sure to add the following code block inside the main application file (e.g. app.ts):
28
31
29
32
``` typescript
@@ -43,15 +46,14 @@ install();
43
46
| steps | ` [70] ` | ` number[] ` | the different available steps |
44
47
| backdropColor | ` new Color('rgba(0, 0, 0, 0.7)') ` | ` Color ` | The color of the backdrop behind the drawer |
45
48
46
-
47
-
48
49
### Methods
49
50
50
51
| Name | Return | Description |
51
52
| ------------ | ------ | ----------------------------------------------- |
52
53
| install() | ` void ` | Install gestures |
53
54
54
55
## Usage in Angular
56
+
55
57
Import the module into your project.
56
58
57
59
``` typescript
@@ -83,6 +85,7 @@ Then in your component add the following:
83
85
84
86
</BottomSheet >
85
87
```
88
+
86
89
For a more complete example, look in the ` demo-ng ` directory.
87
90
88
91
## Usage in Vue
@@ -107,6 +110,7 @@ Then in your component add the following:
107
110
108
111
</BottomSheet >
109
112
```
113
+
110
114
For a more complete example, look in the ` demo-vue ` directory.
111
115
112
116
## Usage in Svelte
@@ -131,6 +135,7 @@ Then in your component, add the following:
131
135
132
136
</bottomsheet >
133
137
```
138
+
134
139
For a more complete example, look in the ` demo-svelte ` directory.
135
140
136
141
## Usage in React
@@ -143,6 +148,7 @@ BottomSheetElement.register();
143
148
```
144
149
145
150
Then in your component, add the following:
151
+
146
152
``` ts
147
153
import { BottomSheet } from " @nativescript-community/ui-persistent-bottomsheet/react"
148
154
```
@@ -158,16 +164,19 @@ import { BottomSheet } from "@nativescript-community/ui-persistent-bottomsheet/r
158
164
159
165
</BottomSheet >
160
166
```
167
+
161
168
For a more complete example, look in the ` demo-react ` directory.
162
169
163
170
## Demos
171
+
164
172
This repository includes Angular, Vue.js, and Svelte demos. In order to run these execute the following in your shell:
173
+
165
174
``` shell
166
- $ git clone https://github.com/@ nativescript-community/ui-persistent-bottomsheet
167
- $ cd ui-drawer
168
- $ npm run i
169
- $ npm run setup
170
- $ npm run build && npm run build.angular
171
- $ cd demo-ng # or demo-vue or demo-svelte or demo-react
172
- $ ns run ios| android
173
- ```
175
+ git clone https://github.com/nativescript-community/ui-persistent-bottomsheet
176
+ cd ui-persistent-bottomsheet
177
+ npm i
178
+ npm run setup
179
+ npm run build && npm run build.angular
180
+ cd demo-ng # or demo-vue or demo-svelte or demo-react
181
+ ns run ios| android # or run `npx nativescript run ios|android` when you do not have nativescript installed globally
182
+ ```
0 commit comments