@nativescript-community/ui-drawer 0.0.31 → 0.0.32
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +11 -0
- package/README.md +258 -0
- package/package.json +5 -4
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [0.0.32](https://github.com/nativescript-community/ui-drawer/compare/v0.0.31...v0.0.32) (2022-01-04)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* gesturehandler fix for `gestureEnabled` property ([8f92c62](https://github.com/nativescript-community/ui-drawer/commit/8f92c62426a439a4175fb64e64e8883f0fda3c4f))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
## [0.0.31](https://github.com/nativescript-community/ui-drawer/compare/v0.0.30...v0.0.31) (2021-10-12)
|
|
7
18
|
|
|
8
19
|
**Note:** Version bump only for package @nativescript-community/ui-drawer
|
package/README.md
ADDED
|
@@ -0,0 +1,258 @@
|
|
|
1
|
+
<!-- ⚠️ This README has been generated from the file(s) "blueprint.md" ⚠️-->
|
|
2
|
+
<!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
|
3
|
+
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
|
4
|
+
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
|
5
|
+
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
|
6
|
+
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
|
7
|
+
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
|
8
|
+
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
|
9
|
+
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
|
10
|
+
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
|
11
|
+
DO NOT EDIT THIS READEME DIRECTLY! Edit "bluesprint.md" instead.
|
|
12
|
+
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
|
13
|
+
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
|
14
|
+
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
|
15
|
+
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
|
16
|
+
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
|
17
|
+
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
|
18
|
+
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
|
19
|
+
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
|
20
|
+
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
|
|
21
|
+
<h1 align="center">@nativescript-community/ui-drawer</h1>
|
|
22
|
+
<p align="center">
|
|
23
|
+
<a href="https://npmcharts.com/compare/@nativescript-community/ui-drawer?minimal=true"><img alt="Downloads per month" src="https://img.shields.io/npm/dm/@nativescript-community/ui-drawer.svg" height="20"/></a>
|
|
24
|
+
<a href="https://www.npmjs.com/package/@nativescript-community/ui-drawer"><img alt="NPM Version" src="https://img.shields.io/npm/v/@nativescript-community/ui-drawer.svg" height="20"/></a>
|
|
25
|
+
</p>
|
|
26
|
+
|
|
27
|
+
<p align="center">
|
|
28
|
+
<b>Easily add a side drawer (side menu) to your projects.</b></br>
|
|
29
|
+
<sub><sub>
|
|
30
|
+
</p>
|
|
31
|
+
|
|
32
|
+
<br />
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
| <img src="https://raw.githubusercontent.com/nativescript-community/ui-drawer/master/images/demo-ios.gif" height="500" /> | <img src="https://raw.githubusercontent.com/nativescript-community/ui-drawer/master/images/demo-android.gif" height="500" /> |
|
|
36
|
+
| --- | ----------- |
|
|
37
|
+
| iOS Demo | Android Demo |
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
[](#table-of-contents)
|
|
41
|
+
|
|
42
|
+
## Table of Contents
|
|
43
|
+
|
|
44
|
+
* [Installation](#installation)
|
|
45
|
+
* [Configuration](#configuration)
|
|
46
|
+
* [API](#api)
|
|
47
|
+
* [Properties](#properties)
|
|
48
|
+
* [Methods](#methods)
|
|
49
|
+
* [Events](#events)
|
|
50
|
+
* [Usage in Angular](#usage-in-angular)
|
|
51
|
+
* [Examples:](#examples)
|
|
52
|
+
* [Usage in React](#usage-in-react)
|
|
53
|
+
* [Examples:](#examples-1)
|
|
54
|
+
* [Usage in Svelte](#usage-in-svelte)
|
|
55
|
+
* [Examples:](#examples-2)
|
|
56
|
+
* [Usage in Vue](#usage-in-vue)
|
|
57
|
+
* [Examples:](#examples-3)
|
|
58
|
+
* [Demos and Development](#demos-and-development)
|
|
59
|
+
* [Setup](#setup)
|
|
60
|
+
* [Build](#build)
|
|
61
|
+
* [Demos](#demos)
|
|
62
|
+
* [Questions](#questions)
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
[](#installation)
|
|
66
|
+
|
|
67
|
+
## Installation
|
|
68
|
+
Run the following command from the root of your project:
|
|
69
|
+
|
|
70
|
+
`ns plugin add @nativescript-community/ui-drawer`
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
[](#configuration)
|
|
74
|
+
|
|
75
|
+
## Configuration
|
|
76
|
+
For gestures to work, make sure to add the following code block inside the main application file (e.g. app.ts):
|
|
77
|
+
|
|
78
|
+
```typescript
|
|
79
|
+
import { install } from '@nativescript-community/ui-drawer';
|
|
80
|
+
install();
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
[](#api)
|
|
85
|
+
|
|
86
|
+
## API
|
|
87
|
+
|
|
88
|
+
### Properties
|
|
89
|
+
|
|
90
|
+
| Property | Default | Type | Description |
|
|
91
|
+
| ------------------- | --------------------------------- | --------------------------- | ------------------------------------------------------- |
|
|
92
|
+
| leftDrawer | `undefined` | `View` | View containing the content for the left side drawer |
|
|
93
|
+
| rightDrawer | `undefined` | `View` | View containing the content for the right side drawer |
|
|
94
|
+
| topDrawer | `undefined` | `View` | View containing the content for the top side drawer |
|
|
95
|
+
| bottomDrawer | `undefined` | `View` | View containing the content for the bottom side drawer |
|
|
96
|
+
| mainContent | `undefined` | `View` | View containing the main content of the app |
|
|
97
|
+
| gestureEnabled | `true` | `boolean` | Boolean setting if swipe gestures are enabled |
|
|
98
|
+
| backdropColor | `new Color('rgba(0, 0, 0, 0.7)')` | `Color` | The color of the backdrop behind the drawer |
|
|
99
|
+
| leftDrawerMode | `slide` | `Mode ('under' or 'slide')` | The color of the backdrop behind the drawer |
|
|
100
|
+
| rightDrawerMode | `slide` | `Mode ('under' or 'slide')` | The color of the backdrop behind the drawer |
|
|
101
|
+
| gestureMinDist | `10` | number | The min "swipe" distance to trigger the menu gesture |
|
|
102
|
+
| leftSwipeDistance | `40` | number | The "left" zone size from where the gesture is recognized |
|
|
103
|
+
| rightSwipeDistance | `40` | number | The "right" zone size from where the gesture is recognized |
|
|
104
|
+
| topSwipeDistance | `40` | number | The "top" zone size from where the gesture is recognized |
|
|
105
|
+
| bottomSwipeDistance | `40` | number | The "bottom" zone size from where the gesture is recognized |
|
|
106
|
+
| leftOpenedDrawerAllowDraging | `true` | boolean | Allow dragging the opened menu |
|
|
107
|
+
| rightOpenedDrawerAllowDraging | `true` | boolean | Allow dragging the opened menu |
|
|
108
|
+
| topOpenedDrawerAllowDraging | `true` | boolean | Allow dragging the opened menu |
|
|
109
|
+
| bottomOpenedDrawerAllowDraging | `true` | boolean | Allow dragging the opened menu |
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
|
|
113
|
+
### Methods
|
|
114
|
+
|
|
115
|
+
| Name | Return | Description |
|
|
116
|
+
| ------------ | ------ | ----------------------------------------------- |
|
|
117
|
+
| open() | `void` | Programatically open the drawer |
|
|
118
|
+
| close() | `void` | Programatically close the drawer |
|
|
119
|
+
| toggle() | `void` | Programatically toggle the state of the drawer |
|
|
120
|
+
| install() | `void` | Install gestures |
|
|
121
|
+
|
|
122
|
+
### Events
|
|
123
|
+
|
|
124
|
+
| Name | Event Data | Description |
|
|
125
|
+
| --------- | ------------------ | ---------------------------- |
|
|
126
|
+
| open | `side`, `duration` | Drawer opens |
|
|
127
|
+
| close | `side`, `duration` | Drawer closes |
|
|
128
|
+
|
|
129
|
+
|
|
130
|
+
[](#usage-in-angular)
|
|
131
|
+
|
|
132
|
+
## Usage in Angular
|
|
133
|
+
Import the module into your project.
|
|
134
|
+
|
|
135
|
+
```typescript
|
|
136
|
+
import { DrawerModule } from "@nativescript-community/ui-drawer/angular";
|
|
137
|
+
|
|
138
|
+
@NgModule({
|
|
139
|
+
imports: [
|
|
140
|
+
DrawerModule
|
|
141
|
+
]
|
|
142
|
+
schemas: [
|
|
143
|
+
NO_ERRORS_SCHEMA
|
|
144
|
+
]
|
|
145
|
+
})
|
|
146
|
+
|
|
147
|
+
export class AppModule { }
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
### Examples:
|
|
151
|
+
|
|
152
|
+
- [Basic Drawer](demo-snippets/ng/basic-drawer)
|
|
153
|
+
- A basic sliding drawer.
|
|
154
|
+
- [All Sides](demo-snippets/ng/all-sides)
|
|
155
|
+
- An example of drawers on all sides: left, right, top, bottom.
|
|
156
|
+
|
|
157
|
+
|
|
158
|
+
|
|
159
|
+
[](#usage-in-react)
|
|
160
|
+
|
|
161
|
+
## Usage in React
|
|
162
|
+
|
|
163
|
+
Register the plugin in your `app.ts`.
|
|
164
|
+
|
|
165
|
+
```typescript
|
|
166
|
+
import DrawerElement from '@nativescript-community/ui-drawer/react';
|
|
167
|
+
DrawerElement.register();
|
|
168
|
+
```
|
|
169
|
+
|
|
170
|
+
### Examples:
|
|
171
|
+
|
|
172
|
+
- [Basic Drawer](demo-snippets/react/BasicDrawer.tsx)
|
|
173
|
+
- A basic sliding drawer.
|
|
174
|
+
- [All Sides](demo-snippets/react/AllSides.tsx)
|
|
175
|
+
- An example of drawers on all sides: left, right, top, bottom.
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
[](#usage-in-svelte)
|
|
179
|
+
|
|
180
|
+
## Usage in Svelte
|
|
181
|
+
|
|
182
|
+
Register the plugin in your `app.ts`.
|
|
183
|
+
|
|
184
|
+
```typescript
|
|
185
|
+
import DrawerElement from '@nativescript-community/ui-drawer/svelte';
|
|
186
|
+
DrawerElement.register();
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
### Examples:
|
|
190
|
+
|
|
191
|
+
- [Basic Drawer](demo-snippets/svelte/BasicDrawer.svelte)
|
|
192
|
+
- A basic sliding drawer.
|
|
193
|
+
- [All Sides](demo-snippets/svelte/AllSides.svelte)
|
|
194
|
+
- An example of drawers on all sides: left, right, top, bottom.
|
|
195
|
+
|
|
196
|
+
|
|
197
|
+
[](#usage-in-vue)
|
|
198
|
+
|
|
199
|
+
## Usage in Vue
|
|
200
|
+
|
|
201
|
+
Register the plugin in your `app.js`.
|
|
202
|
+
|
|
203
|
+
```typescript
|
|
204
|
+
import DrawerPlugin from '@nativescript-community/ui-drawer/vue'
|
|
205
|
+
Vue.use(DrawerPlugin);
|
|
206
|
+
```
|
|
207
|
+
|
|
208
|
+
### Examples:
|
|
209
|
+
|
|
210
|
+
- [Basic Drawer](demo-snippets/vue/BasicDrawer.vue)
|
|
211
|
+
- A basic sliding drawer.
|
|
212
|
+
- [All Sides](demo-snippets/vue/AllSides.vue)
|
|
213
|
+
- An example of drawers on all sides: left, right, top, bottom.
|
|
214
|
+
|
|
215
|
+
|
|
216
|
+
[](#demos-and-development)
|
|
217
|
+
|
|
218
|
+
## Demos and Development
|
|
219
|
+
|
|
220
|
+
|
|
221
|
+
### Setup
|
|
222
|
+
|
|
223
|
+
To run the demos, you must clone this repo **recursively**.
|
|
224
|
+
|
|
225
|
+
```
|
|
226
|
+
git clone https://github.com/@nativescript-community/ui-drawer.git --recursive
|
|
227
|
+
```
|
|
228
|
+
|
|
229
|
+
**Install Dependencies:**
|
|
230
|
+
```bash
|
|
231
|
+
npm i # or 'yarn install' or 'pnpm install'
|
|
232
|
+
```
|
|
233
|
+
|
|
234
|
+
**Interactive Menu:**
|
|
235
|
+
|
|
236
|
+
To start the interactive menu, run `npm start` (or `yarn start` or `pnpm start`). This will list all of the commonly used scripts.
|
|
237
|
+
|
|
238
|
+
### Build
|
|
239
|
+
|
|
240
|
+
```bash
|
|
241
|
+
npm run build
|
|
242
|
+
|
|
243
|
+
npm run build.angular # or for Angular
|
|
244
|
+
```
|
|
245
|
+
|
|
246
|
+
### Demos
|
|
247
|
+
|
|
248
|
+
```bash
|
|
249
|
+
npm run demo.[ng|react|svelte|vue].[ios|android]
|
|
250
|
+
|
|
251
|
+
npm run demo.svelte.ios # Example
|
|
252
|
+
```
|
|
253
|
+
|
|
254
|
+
[](#questions)
|
|
255
|
+
|
|
256
|
+
## Questions
|
|
257
|
+
|
|
258
|
+
If you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).
|
package/package.json
CHANGED
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nativescript-community/ui-drawer",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.32",
|
|
4
4
|
"description": "Easily add a side drawer (side menu) to your projects.",
|
|
5
5
|
"main": "./index",
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"typings": "./index.d.ts",
|
|
8
8
|
"scripts": {
|
|
9
|
-
"build": "npm run tsc",
|
|
9
|
+
"build": "npm run tsc && npm run readme",
|
|
10
10
|
"build.all": "npm run build && npm run build.angular",
|
|
11
11
|
"build.angular": "../../node_modules/.bin/ng-packagr -p ../../src/ui-drawer/angular/package.json -c ../../src/ui-drawer/angular/tsconfig.json",
|
|
12
|
+
"readme": "../../node_modules/.bin/readme generate -c ../../tools/readme/blueprint.json",
|
|
12
13
|
"tsc": "../../node_modules/.bin/cpy '**/*.d.ts' '../../packages/ui-drawer' --parents --cwd=../../src/ui-drawer && ../../node_modules/.bin/tsc -skipLibCheck -d",
|
|
13
14
|
"clean": "../../node_modules/.bin/rimraf ./*.d.ts ./*.js ./*.js.map"
|
|
14
15
|
},
|
|
@@ -51,7 +52,7 @@
|
|
|
51
52
|
"license": "Apache-2.0",
|
|
52
53
|
"readmeFilename": "README.md",
|
|
53
54
|
"dependencies": {
|
|
54
|
-
"@nativescript-community/gesturehandler": "^0.1.
|
|
55
|
+
"@nativescript-community/gesturehandler": "^0.1.49"
|
|
55
56
|
},
|
|
56
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "f9061aa7c40ac4afe8956d346b5558a0c03c33db"
|
|
57
58
|
}
|