Skip to content

Commit 6b2f0f9

Browse files
farfromrefugfarfromrefug
committed
chore: project update
1 parent d16935e commit 6b2f0f9

File tree

10 files changed

+352
-183
lines changed

10 files changed

+352
-183
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,3 +78,4 @@ package-lock.json
7878
plugin/**/*js.map
7979
plugin/**/*js
8080
pnpm-lock.yaml
81+
hooks

‎README.md

Lines changed: 41 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,11 @@
1-
# NativeScript Drawer
1+
# NativeScript BottomSheet
22

3-
NativeScript plugin that allows you to easily add a side drawer (side menu) to your projects. This can be used as an Open Source alternative to [RadSideDrawer](https://docs.nativescript.org/ui/components/sidedrawer/overview).
3+
NativeScript plugin that allows you to easily add persistent bottomsheet to your projects.
44

55
[![npm](https://img.shields.io/npm/v/@nativescript-community/ui-persistent-bottomsheet.svg)](https://www.npmjs.com/package/@nativescript-community/ui-persistent-bottomsheet)
66
[![npm downloads](https://img.shields.io/npm/dm/@nativescript-community/ui-persistent-bottomsheet.svg)](https://www.npmjs.com/package/@nativescript-community/ui-persistent-bottomsheet)
77
[![npm downloads](https://img.shields.io/npm/dt/@nativescript-community/ui-persistent-bottomsheet.svg)](https://www.npmjs.com/package/@nativescript-community/ui-persistent-bottomsheet)
88

9-
| <img src="https://i.imgur.com/3MCog2g.gif" height="500" /> | <img src="https://i.imgur.com/t3v8tQP.gif" height="500" /> |
10-
| --- | ----------- |
11-
| iOS Demo | Android Demo |
12-
139
---
1410
## Table of Contents
1511
1. [Installation](#installation)
@@ -41,34 +37,29 @@ install();
4137

4238
| Property | Default | Type | Description |
4339
| ------------------- | --------------------------------- | --------------------------- | ------------------------------------------------------- |
44-
| leftDrawer | `undefined` | `View` | View containing the content for the left side drawer |
45-
| rightDrawer | `undefined` | `View` | View containing the content for the right side drawer |
46-
| mainContent | `undefined` | `View` | View containing the main content of the app |
47-
| gestureEnabled | `true` | `boolean` | Boolean setting if swipe gestures are enabled |
48-
| backdropColor | `new Color('rgba(0, 0, 0, 0.7)')` | `Color` | The color of the backdrop behind the drawer |
49-
| leftDrawerMode | `slide` | `Mode ('under' or 'slide')` | The color of the backdrop behind the drawer |
50-
| rightDrawerMode | `slide` | `Mode ('under' or 'slide')` | The color of the backdrop behind the drawer |
40+
| bottomSheet | `undefined` | `View` | View containing the content for the bottomsheet |
41+
| gestureEnabled | `true` | `boolean` | Boolean setting if swipe gestures are enabled |
42+
| stepIndex | `0` | `number` | the index of current step (mutable) |
43+
| steps | `[70]` | `number[]` | the different available steps |
44+
| backdropColor | `new Color('rgba(0, 0, 0, 0.7)')` | `Color` | The color of the backdrop behind the drawer |
5145

5246

5347

5448
### Methods
5549

5650
| Name | Return | Description |
5751
| ------------ | ------ | ----------------------------------------------- |
58-
| open() | `void` | Programatically open the drawer |
59-
| close() | `void` | Programatically close the drawer |
60-
| toggle() | `void` | Programatically toggle the state of the drawer |
6152
| install() | `void` | Install gestures |
6253

6354
## Usage in Angular
6455
Import the module into your project.
6556

6657
```typescript
67-
import { DrawerModule } from "@nativescript-community/ui-persistent-bottomsheet/angular";
58+
import { PBSModule } from "@nativescript-community/ui-persistent-bottomsheet/angular";
6859

6960
@NgModule({
7061
imports: [
71-
DrawerModule
62+
PBSModule
7263
]
7364
schemas: [
7465
NO_ERRORS_SCHEMA
@@ -81,15 +72,16 @@ export class AppModule { }
8172
Then in your component add the following:
8273

8374
```xml
84-
<Drawer>
85-
<GridLayout leftDrawer backgroundColor="white">
75+
<BottomSheet>
76+
<StackLayout backgroundColor="white">
77+
<Label text="This is the main content"></Label>
78+
</StackLayout>
79+
<GridLayout bottomSheet backgroundColor="white" height="70">
8680
<Label text="This is the side drawer content"></Label>
8781
</GridLayout>
8882

89-
<StackLayout mainContent backgroundColor="white">
90-
<Label text="This is the main content"></Label>
91-
</StackLayout>
92-
</Drawer>
83+
84+
</BottomSheet>
9385
```
9486
For a more complete example, look in the `demo-ng` directory.
9587

@@ -98,22 +90,22 @@ For a more complete example, look in the `demo-ng` directory.
9890
Register the plugin in your `app.js`.
9991

10092
```typescript
101-
import DrawerPlugin from '~/components/drawer/vue';
102-
Vue.use(DrawerPlugin);
93+
import BottomSheetPlugin from '~/components/drawer/vue';
94+
Vue.use(BottomSheetPlugin);
10395
```
10496

10597
Then in your component add the following:
10698

10799
```xml
108-
<Drawer>
109-
<GridLayout ~leftDrawer backgroundColor="white">
100+
<BottomSheet>
101+
<StackLayout backgroundColor="white">
102+
<Label text="This is the main content" />
103+
</StackLayout>
104+
<GridLayout ~bottomSheet backgroundColor="white" height="70">
110105
<Label text="This is the side drawer content" />
111106
</GridLayout>
112107

113-
<StackLayout ~mainContent backgroundColor="white">
114-
<Label text="This is the main content" />
115-
</StackLayout>
116-
</Drawer>
108+
</BottomSheet>
117109
```
118110
For a more complete example, look in the `demo-vue` directory.
119111

@@ -122,22 +114,22 @@ For a more complete example, look in the `demo-vue` directory.
122114
Register the plugin in your `app.ts`.
123115

124116
```typescript
125-
import DrawerElement from '@nativescript-community/ui-persistent-bottomsheet/svelte';
126-
DrawerElement.register();
117+
import BottomSheetElement from '@nativescript-community/ui-persistent-bottomsheet/svelte';
118+
BottomSheetElement.register();
127119
```
128120

129121
Then in your component, add the following:
130122

131123
```xml
132-
<drawer>
133-
<gridlayout prop:leftDrawer backgroundColor="white">
124+
<bottomsheet>
125+
<stacklayout backgroundColor="white">
126+
<Label text="This is the main content" />
127+
</stacklayout>
128+
<gridlayout prop:bottomSheet backgroundColor="white" height="70">
134129
<Label text="This is the side drawer content" />
135130
</gridlayout>
136131

137-
<stacklayout prop:mainContent backgroundColor="white">
138-
<Label text="This is the main content" />
139-
</stacklayout>
140-
</drawer>
132+
</bottomsheet>
141133
```
142134
For a more complete example, look in the `demo-svelte` directory.
143135

@@ -146,25 +138,25 @@ For a more complete example, look in the `demo-svelte` directory.
146138
Register the plugin in your `app.ts`.
147139

148140
```typescript
149-
import DrawerElement from '@nativescript-community/ui-persistent-bottomsheet/react';
150-
DrawerElement.register();
141+
import BottomSheetElement from '@nativescript-community/ui-persistent-bottomsheet/react';
142+
BottomSheetElement.register();
151143
```
152144

153145
Then in your component, add the following:
154146
```ts
155-
import { Drawer } from "@nativescript-community/ui-persistent-bottomsheet/react"
147+
import { BottomSheet } from "@nativescript-community/ui-persistent-bottomsheet/react"
156148
```
157149

158150
```xml
159-
<Drawer>
160-
<gridLayout nodeRole="leftDrawer" backgroundColor="white" width="300">
151+
<BottomSheet>
152+
<stackLayout backgroundColor="white">
153+
<label text="This is the main content" />
154+
</stackLayout>
155+
<gridLayout nodeRole="bottomSheet" backgroundColor="white" height="70">
161156
<label text="This is the side drawer content" />
162157
</gridLayout>
163158

164-
<stackLayout nodeRole="mainContent" backgroundColor="white">
165-
<label text="This is the main content" />
166-
</stackLayout>
167-
</Drawer>
159+
</BottomSheet>
168160
```
169161
For a more complete example, look in the `demo-react` directory.
170162

‎demo-svelte/app/App.svelte

Lines changed: 27 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
import { PersistentBottomSheet } from '@nativescript-community/ui-persistent-bottomsheet';
55
import { HTTPTileDataSource } from '@nativescript-community/ui-carto/datasources/http';
66
import { RasterTileLayer } from '@nativescript-community/ui-carto/layers/raster';
7-
import { GridLayout } from '@nativescript/core';
87
let bottomsheet: PersistentBottomSheet;
98
let cartoMap: CartoMap;
109
let stepIndex = 1;
@@ -50,7 +49,7 @@
5049
cartoMap.addLayer(rasterLayer);
5150
cartoMap.setFocusPos({ latitude: 45, longitude: 5 }, 0);
5251
}
53-
$: console.log('stepIndex changed', stepIndex)
52+
$: console.log('stepIndex changed', stepIndex);
5453
</script>
5554

5655
<style>
@@ -59,13 +58,6 @@
5958
color: white;
6059
}
6160
62-
.avatar {
63-
background-color: #b52e31;
64-
border-radius: 40;
65-
height: 80;
66-
vertical-align: middle;
67-
}
68-
6961
Button {
7062
background-color: #b52e31;
7163
color: white;
@@ -74,32 +66,30 @@
7466

7567
<page>
7668
<actionBar title="Svelte Demo" />
77-
<gridlayout>
78-
<bottomsheet bind:stepIndex bind:this={bottomsheet} steps={[56, 156, 456]} scrollViewId="scrollView" backdropColor="#88000000">
79-
<cartomap row="1" zoom="8" on:mapReady={onMapReady} />
80-
<gridlayout prop:bottomSheet backgroundColor="white" rows="56, 100, 300">
81-
<stacklayout row="0" orientation="horizontal">
82-
<button text="My Profile" class="button" on:tap={()=> stepIndex = 0}/>
83-
<button text="Settings" class="button" />
84-
<button text="Rate Us" class="button" />
85-
<button text="Support" class="button" />
86-
<button text="Contact" class="button" />
87-
</stacklayout>
88-
<stacklayout row="1" orientation="horizontal">
89-
<button text="My Profile" class="button" />
90-
<button text="Settings" class="button" />
91-
<button text="Rate Us" class="button" />
92-
<button text="Support" class="button" />
93-
<button text="Contact" class="button" />
94-
</stacklayout>
95-
<collectionView {items} row="2" id="scrollView" colWidth="50%" rowHeight="100">
96-
<Template let:item>
97-
<gridlayout rows="*, auto" backgroundColor={item.color} class="item">
98-
<stacklayout row="1"><label row="1" text={item.name} class="title" /> <label row="1" text={item.color} class="subtitle" /></stacklayout>
99-
</gridlayout>
100-
</Template>
101-
</collectionView>
102-
</gridlayout>
103-
</bottomsheet>
104-
</gridlayout>
69+
<bottomsheet bind:stepIndex bind:this={bottomsheet} steps={[56, 156, 456]} scrollViewId="scrollView" backdropColor="#88000000">
70+
<cartomap row="1" zoom="8" on:mapReady={onMapReady} />
71+
<gridlayout prop:bottomSheet backgroundColor="white" rows="56, 100, 300">
72+
<stacklayout row="0" orientation="horizontal">
73+
<button text="My Profile" class="button" on:tap={() => (stepIndex = 0)} />
74+
<button text="Settings" class="button" />
75+
<button text="Rate Us" class="button" />
76+
<button text="Support" class="button" />
77+
<button text="Contact" class="button" />
78+
</stacklayout>
79+
<stacklayout row="1" orientation="horizontal">
80+
<button text="My Profile" class="button" />
81+
<button text="Settings" class="button" />
82+
<button text="Rate Us" class="button" />
83+
<button text="Support" class="button" />
84+
<button text="Contact" class="button" />
85+
</stacklayout>
86+
<collectionView {items} row="2" id="scrollView" colWidth="50%" rowHeight="100">
87+
<Template let:item>
88+
<gridlayout rows="*, auto" backgroundColor={item.color} class="item">
89+
<stacklayout row="1"><label row="1" text={item.name} class="title" /> <label row="1" text={item.color} class="subtitle" /></stacklayout>
90+
</gridlayout>
91+
</Template>
92+
</collectionView>
93+
</gridlayout>
94+
</bottomsheet>
10595
</page>

0 commit comments

Comments
 (0)