Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bradmartin/nativescript-color-picker
https://github.com/bradmartin/nativescript-color-picker
android color-picker ios nativescript nativescript-plugin
Last synced: 10 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/bradmartin/nativescript-color-picker
- Owner: bradmartin
- License: other
- Created: 2016-07-05T19:50:56.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2019-07-12T19:48:32.000Z (over 5 years ago)
- Last Synced: 2024-12-23T09:37:41.583Z (18 days ago)
- Topics: android, color-picker, ios, nativescript, nativescript-plugin
- Language: TypeScript
- Size: 5.25 MB
- Stars: 13
- Watchers: 4
- Forks: 3
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/nativescript-color-picker)
[](https://www.npmjs.com/package/nativescript-color-picker)
[](https://travis-ci.org/bradmartin/nativescript-color-picker)
[![Twitter Follow][twitter-image]][twitter-url]
[twitter-image]: https://img.shields.io/twitter/follow/bradwaynemartin.svg?style=social&label=Follow%20me
[twitter-url]: https://twitter.com/bradwaynemartin
# NativeScript Color Picker
NativeScript plugin to show a color picker dialog.
## Sample Usage
| Sample Android | Sample iOS |
| -------------------------------- | ------------------------------------------------- |
|  |  |
#### Native Library:
| Android | iOS |
| --------------------------------------------------------------- | ------------------------------------------------------- |
| [MrBIMC/VintageChroma](https://github.com/MrBIMC/VintageChroma) | [MSColorPicker](https://github.com/sgl0v/MSColorPicker) |
| ARGB, RGB, HSV | RGB |
## Installation
From your command prompt/terminal go to your app's root folder and execute:
`tns plugin add nativescript-color-picker`
## Usage
### XML
```XML
```
### TS
```TS
import { ColorPicker } from 'nativescript-color-picker';
let picker = new ColorPicker();
public showARGBPicker() {
picker.show('#3489db', 'ARGB').then((result) => {
console.log('color int: ' + result);
}).catch((err) => {
console.log(err)
})
}
```
## API
Opens the color picker dialog.
- **show(initialColor?: string, colorMode?: string): Promise**
- ColorMode { 'ARGB', 'RGB', 'HSV' }
## Nativescript-Vue implementation
The nativescript vue implementation is slightly different due to the difference in the `.vue` template syntax.
### Install and clean
The install is the same, but be sure to run a clean of the platform directory after the plugin installation. If not, you could run into an error similar to this:
[TypeError: Cannot read property 'ColorMode' of undefined]
#### Steps to install:
# install the plugin
npm install --save nativescript-color-picker
# Clean out the platforms directory if you've been developing for android
tns platform clean android
# Clean out the platforms directory if you've been developing for ios
tns platform clean ios
### Code sample
Once installed, you can pull in the module similar to the method noted above, the major difference being the template's tag directives for binding and events which are in the vue-style (e.g. `:text=""` to bind and `@tap=""` to listen):
```vue
import { ColorPicker } from 'nativescript-color-picker';
import { Color } from 'tns-core-modules/Color';
export default {
data() {
return {
picker: null,
selectedColor: null
};
},
computed: {
valueColor() {
return {
color: this.selectedColor ? this.selectedColor.hex : ''
};
}
},
methods: {
showColorPicker() {
this.picker
.show('#3489db', 'RGB')
.then(result => {
this.selectedColor = new Color(result);
})
.catch(err => {
console.log(err);
});
}
},
created() {
this.picker = new ColorPicker();
}
};
.selected-color {
.value {
font-weight: bold;
font-size: 50px;
}
}
```