{"id":15282609,"url":"https://github.com/bradmartin/nativescript-color-picker","last_synced_at":"2025-04-12T23:07:48.579Z","repository":{"id":57308448,"uuid":"62665107","full_name":"bradmartin/nativescript-color-picker","owner":"bradmartin","description":null,"archived":false,"fork":false,"pushed_at":"2019-07-12T19:48:32.000Z","size":5500,"stargazers_count":13,"open_issues_count":6,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-12T23:06:52.066Z","etag":null,"topics":["android","color-picker","ios","nativescript","nativescript-plugin"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bradmartin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-07-05T19:50:56.000Z","updated_at":"2024-05-30T16:10:58.000Z","dependencies_parsed_at":"2022-09-10T01:10:41.382Z","dependency_job_id":null,"html_url":"https://github.com/bradmartin/nativescript-color-picker","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bradmartin%2Fnativescript-color-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bradmartin%2Fnativescript-color-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bradmartin%2Fnativescript-color-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bradmartin%2Fnativescript-color-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bradmartin","download_url":"https://codeload.github.com/bradmartin/nativescript-color-picker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248643004,"owners_count":21138355,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","color-picker","ios","nativescript","nativescript-plugin"],"created_at":"2024-09-30T14:31:38.810Z","updated_at":"2025-04-12T23:07:48.540Z","avatar_url":"https://github.com/bradmartin.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm](https://img.shields.io/npm/v/nativescript-color-picker.svg)](https://www.npmjs.com/package/nativescript-color-picker)\n[![npm](https://img.shields.io/npm/dt/nativescript-color-picker.svg?label=npm%20downloads)](https://www.npmjs.com/package/nativescript-color-picker)\n[![Build Status](https://travis-ci.org/bradmartin/nativescript-color-picker.svg?branch=master)](https://travis-ci.org/bradmartin/nativescript-color-picker)\n[![Twitter Follow][twitter-image]][twitter-url]\n\n[twitter-image]: https://img.shields.io/twitter/follow/bradwaynemartin.svg?style=social\u0026label=Follow%20me\n[twitter-url]: https://twitter.com/bradwaynemartin\n\n# NativeScript Color Picker\n\nNativeScript plugin to show a color picker dialog.\n\n## Sample Usage\n\n| Sample Android                   | Sample iOS                                        |\n| -------------------------------- | ------------------------------------------------- |\n| ![Sample](./screens/cpicker.gif) | ![Sample iOS](./screens/mscolorpicker_update.gif) |\n\n#### Native Library:\n\n| Android                                                         | iOS                                                     |\n| --------------------------------------------------------------- | ------------------------------------------------------- |\n| [MrBIMC/VintageChroma](https://github.com/MrBIMC/VintageChroma) | [MSColorPicker](https://github.com/sgl0v/MSColorPicker) |\n| ARGB, RGB, HSV                                                  | RGB                                                     |\n\n## Installation\n\nFrom your command prompt/terminal go to your app's root folder and execute:\n\n`tns plugin add nativescript-color-picker`\n\n## Usage\n\n### XML\n\n```XML\n\u003cPage\n  xmlns=\"http://schemas.nativescript.org/tns.xsd\" loaded=\"pageLoaded\"\u003e\n  \u003cActionBar title=\"Color Picker\" /\u003e\n  \u003cStackLayout\u003e\n    \u003cButton text=\"Show ARGB Picker\" tap=\"{{ showARGBPicker }}\" /\u003e\n    \u003cButton text=\"Show RGB Picker\" tap=\"{{ showRGBPicker }}\" /\u003e\n    \u003cButton text=\"Show HSV Picker\" tap=\"{{ showHSVPicker }}\" /\u003e\n    \u003cStackLayout orientation=\"horizontal\"\u003e\n      \u003cLabel text=\"Selected Color: \" class=\"message\" textWrap=\"true\" /\u003e\n      \u003cLabel text=\"{{ selectedColor }}\" class=\"message\" textWrap=\"true\"/\u003e\n    \u003c/StackLayout\u003e\n  \u003c/StackLayout\u003e\n\u003c/Page\u003e\n```\n\n### TS\n\n```TS\nimport { ColorPicker } from 'nativescript-color-picker';\n\nlet picker = new ColorPicker();\n\n public showARGBPicker() {\n    picker.show('#3489db', 'ARGB').then((result) =\u003e {\n      console.log('color int: ' + result);\n    }).catch((err) =\u003e {\n      console.log(err)\n    })\n}\n\n```\n\n## API\n\nOpens the color picker dialog.\n\n- **show(initialColor?: string, colorMode?: string): Promise\u003cnumber\u003e**\n  - ColorMode { 'ARGB', 'RGB', 'HSV' }\n\n## Nativescript-Vue implementation\n\nThe nativescript vue implementation is slightly different due to the difference in the `.vue` template syntax.\n\n### Install and clean\n\nThe 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:\n\n    [TypeError: Cannot read property 'ColorMode' of undefined]\n\n#### Steps to install:\n\n    # install the plugin\n    npm install --save nativescript-color-picker\n\n    # Clean out the platforms directory if you've been developing for android\n    tns platform clean android\n    # Clean out the platforms directory if you've been developing for ios\n    tns platform clean ios\n\n### Code sample\n\nOnce 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):\n\n```vue\n\u003ctemplate\u003e\n  \u003cStackLayout\u003e\n    \u003cActionBar title=\"Color Picker\" /\u003e\n    \u003cButton text=\"Show RGB Picker\" @tap=\"showColorPicker\" /\u003e\n    \u003cStackLayout orientation=\"horizontal\"\u003e\n      \u003cLabel class=\"selected-color\"\u003e\n        \u003cFormattedString\u003e\n          \u003cSpan class=\"label\" text=\"The selected color is: \" /\u003e\n          \u003cSpan class=\"value\" :style=\"valueColor\" :text=\"selectedColor\" /\u003e\n        \u003c/FormattedString\u003e\n      \u003c/Label\u003e\n    \u003c/StackLayout\u003e\n  \u003c/StackLayout\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { ColorPicker } from 'nativescript-color-picker';\nimport { Color } from 'tns-core-modules/Color';\n\nexport default {\n  data() {\n    return {\n      picker: null,\n      selectedColor: null\n    };\n  },\n  computed: {\n    valueColor() {\n      return {\n        color: this.selectedColor ? this.selectedColor.hex : ''\n      };\n    }\n  },\n  methods: {\n    showColorPicker() {\n      this.picker\n        .show('#3489db', 'RGB')\n        .then(result =\u003e {\n          this.selectedColor = new Color(result);\n        })\n        .catch(err =\u003e {\n          console.log(err);\n        });\n    }\n  },\n  created() {\n    this.picker = new ColorPicker();\n  }\n};\n\u003c/script\u003e\n\n\u003cstyle lang=\"scss\" scoped\u003e\n.selected-color {\n  .value {\n    font-weight: bold;\n    font-size: 50px;\n  }\n}\n\u003c/style\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbradmartin%2Fnativescript-color-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbradmartin%2Fnativescript-color-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbradmartin%2Fnativescript-color-picker/lists"}