Skip to content

Commit 7c00acf

Browse files
farfromrefugfarfromrefug
committed
feat: new Switch component (material3). For now iOS uses system switch
1 parent bdebd9c commit 7c00acf

File tree

16 files changed

+345
-36
lines changed

16 files changed

+345
-36
lines changed

‎packages/switch/.npmignore

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.DS_Store
2+
tsconfig.json
3+
node_modules/
4+
pnpm-global/
5+
CHANGELOG.md
6+
blueprint.md
7+
*.aar
8+
*.jar

‎packages/switch/README.md

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
# NativeScript Material Switch
2+
3+
Material Design's [Switch](https://m3.material.io/components/switch/overview) component for NativeScript.
4+
5+
[![npm](https://img.shields.io/npm/v/@nativescript-community/ui-material-switch.svg)](https://www.npmjs.com/package/@nativescript-community/ui-material-prswitchogress)
6+
[![npm](https://img.shields.io/npm/dt/@nativescript-community/ui-material-switch.svg?label=npm%20downloads)](https://www.npmjs.com/package/@nativescript-community/ui-material-switch)
7+
8+
## Contents
9+
10+
1. [Installation](#installation)
11+
2. [Changelog](#changelog)
12+
3. [FAQ](#faq)
13+
4. [Usage](#usage)
14+
- [Plain NativeScript](#plain-nativescript)
15+
- [Angular](#nativescript--angular)
16+
- [Vue](#nativescript--vue)
17+
5. [API](#api)
18+
19+
## Installation
20+
21+
For NativeScript 7.0+
22+
* `tns plugin add @nativescript-community/ui-material-switch`
23+
24+
##
25+
26+
For NativeScript 6.x
27+
* `tns plugin add nativescript-material-switch`
28+
29+
##
30+
31+
Be sure to run a new build after adding plugins to avoid any issues.
32+
33+
## [Changelog](./CHANGELOG.md)
34+
35+
## [FAQ](../../README.md#faq)
36+
37+
## Usage
38+
39+
### Plain NativeScript
40+
41+
<span style="color:red">IMPORTANT: </span>_Make sure you include `xmlns:mdp="@nativescript-community/ui-material-progress"` on the Page element_
42+
43+
#### XML
44+
45+
```XML
46+
<Page xmlns:mdp="@nativescript-community/ui-material-switch">
47+
<StackLayout horizontalAlignment="center">
48+
<mdp:Switch />
49+
</StackLayout>
50+
</Page>
51+
```
52+
53+
#### CSS
54+
55+
```CSS
56+
mdswitch{
57+
ripple-color: blue;
58+
elevation: 4;
59+
}
60+
```
61+
62+
##
63+
64+
### NativeScript + Angular
65+
66+
```typescript
67+
import { NativeScriptMaterialSwitchModule } from "@nativescript-community/ui-material-switch/angular";
68+
69+
@NgModule({
70+
imports: [
71+
NativeScriptMaterialSwitchModule,
72+
...
73+
],
74+
...
75+
})
76+
```
77+
78+
```html
79+
<MDSwitch v-model="value"></MDSwitch>
80+
```
81+
82+
##
83+
84+
### NativeScript + Vue
85+
86+
```typescript
87+
import SwitchPlugin from '@nativescript-community/ui-material-switch/vue';
88+
89+
Vue.use(SwitchPlugin);
90+
```
91+
92+
```html
93+
<MDSwitch></MDSwitch>
94+
```
95+
96+
## API
97+
98+
### Attributes
99+
100+
Inherits from NativeScript [Switch](https://docs.nativescript.org/ui/components/switch) so it already has all the same attributes.
101+

‎packages/switch/package.json

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
{
2+
"name": "@nativescript-community/ui-material-switch",
3+
"version": "7.0.42",
4+
"description": "Material Switch",
5+
"main": "./switch",
6+
"sideEffects": false,
7+
"typings": "./switch.d.ts",
8+
"scripts": {
9+
"tsc": "cpy ../../src/switch/switch.d.ts ./ && tsc -d",
10+
"tsc-win": "cpy ..\\..\\src\\switch\\switch.d.ts .\\ && tsc -d",
11+
"build": "npm run tsc",
12+
"build.watch": "npm run tsc -- -w",
13+
"build.win": "npm run tsc-win",
14+
"build.all": "npm run build && npm run build.angular",
15+
"build.all.win": "npm run build.win && npm run build.angular.win",
16+
"build.angular": "ng-packagr -p ../../src/switch/angular/ng-package.json -c ../../src/switch/angular/tsconfig.json",
17+
"build.angular.win": "ng-packagr -p ..\\..\\src\\switch\\angular\\package.json -c ..\\..\\src\\switch\\angular\\tsconfig.json",
18+
"clean": "rimraf ./*.d.ts ./*.js ./*.js.map"
19+
},
20+
"nativescript": {
21+
"platforms": {
22+
"android": "6.2.0",
23+
"ios": "6.2.0"
24+
}
25+
},
26+
"keywords": [
27+
"NativeScript",
28+
"JavaScript",
29+
"Android",
30+
"iOS",
31+
"Vue",
32+
"Angular",
33+
"preview|https://raw.githubusercontent.com/nativescript-community/ui-material-components/master/images/demo-switch.gif"
34+
],
35+
"author": {
36+
"name": "Martin Guillon",
37+
"email": "[email protected]"
38+
},
39+
"bugs": {
40+
"url": "https://github.com/nativescript-community/ui-material-components/issues"
41+
},
42+
"license": "Apache-2.0",
43+
"repository": {
44+
"type": "git",
45+
"url": "https://github.com/nativescript-community/ui-material-components/tree/master/packages/switch"
46+
},
47+
"readmeFilename": "README.md",
48+
"dependencies": {
49+
"@nativescript-community/ui-material-core": "^7.0.42"
50+
},
51+
"gitHead": "240457b7952c4f0258aabc46615de63d1473ead1"
52+
}

‎packages/switch/platforms/android/native-api-usage.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"uses": [
3+
"com.google.android.material.switchmaterial:MaterialSwitch",
4+
"androidx.appcompat.widget:SwitchCompat"
5+
]
6+
}

‎packages/switch/platforms/ios/Podfile

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
pod 'MaterialComponents/ProgressView+Theming'

‎packages/switch/tsconfig.json

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"extends": "../../tsconfig.json",
3+
"compilerOptions": {
4+
"rootDir": "../../src/switch",
5+
"outDir": "./",
6+
"paths": {
7+
"@nativescript-community/ui-material-core": ["packages/core/index"],
8+
"@nativescript-community/ui-material-core/*": ["packages/core/*"],
9+
}
10+
},
11+
"include": ["../../src/switch/**/*.ts", "../../references.d.ts", "../../tools/references.d.ts", "../../src/references.d.ts"],
12+
"exclude": ["../../src/switch/angular/**"]
13+
}

‎src/switch/angular/index.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Directive, NgModule } from '@angular/core';
2+
import { registerElement } from '@nativescript/angular';
3+
import { Switch } from '@nativescript-community/ui-material-switch';
4+
5+
@Directive({ selector: 'MDSwitch' })
6+
export class MaterialSwitchDirective {}
7+
8+
@NgModule({
9+
declarations: [MaterialSwitchDirective],
10+
exports: [MaterialSwitchDirective]
11+
})
12+
export class NativeScriptMaterialSwitchModule {}
13+
14+
registerElement('MDSwitch', () => ProSwitchgress);

‎src/switch/angular/ng-package.json

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"dest": "../../../packages/switch/angular",
3+
"lib": {
4+
"entryFile": "index.ts"
5+
},
6+
"allowedNonPeerDependencies": [
7+
"."
8+
]
9+
}

‎src/switch/angular/package.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"name": "@nativescript-community/ui-material-switch-angular",
3+
"main": "index.js"
4+
}

‎src/switch/angular/tsconfig.json

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"extends": "../../../tsconfig.json",
3+
"compilerOptions": {
4+
"rootDir": "./",
5+
"paths": {
6+
"@nativescript-community/ui-material-core": ["packages/core/index"],
7+
"@nativescript-community/ui-material-core/*": ["packages/core/*"],
8+
"@nativescript-community/ui-material-switch": ["packages/switch/switch"],
9+
"@nativescript-community/ui-material-switch/*": ["packages/switch/*"]
10+
}
11+
},
12+
"include": ["./**/*.ts", "../../../references.d.ts", "../../references.d.ts"],
13+
"angularCompilerOptions": {
14+
"enableIvy": true
15+
}
16+
}

0 commit comments

Comments
 (0)