Giter VIP home page Giter VIP logo

nativescript-star-ratings's Introduction

NativeScript Star Ratings

npm npm Build Status

Installation

tns plugin add nativescript-star-ratings

Configuration

IMPORTANT: Make sure you include xmlns:ui="nativescript-star-ratings" on the Page element

<ui:StarRating emptyBorderColor="white" emptyColor="white" filledBorderColor="black" filledColor="red" value="2" max="5"/>

Angular

import { registerElement } from 'nativescript-angular/element-registry';
registerElement('StarRating', () => require('nativescript-star-ratings').StarRating);
<StarRating emptyBorderColor="white" emptyColor="white" filledBorderColor="black" filledColor="red" value="{{value}}" max="{{max}}" isindicator="false"></StarRating>

API

Properties

Property Default Type Required Description
emptyBorderColor blue string
IOS only
emptyColor white string
filledBorderColor blue string
IOS only
filledColor blue string
value 0 number
max 5 number
isindicator false boolean
Android only

ScreenShots

IOS Android
IOS Android

TODO

  • Custom images

nativescript-star-ratings's People

Contributors

triniwiz avatar yalampalli avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

nativescript-star-ratings's Issues

How to set the maximum number of stars

Make sure to check the demo app(s) for sample usage

check

Make sure to check the existing issues in this repository

ckeck

If the demo apps cannot help and there is no issue for your problem, tell us about it

Please, ensure your title is less than 63 characters long and starts with a capital
letter.

Which platform(s) does your issue occur on?

  • iOS/Android/Both

Please, provide the following version numbers that your issue occurs with:

  • CLI: 3.4.3
  • Cross-platform modules: {
    "description": "Application private",
    "license": "SEE LICENSE IN ",
    "readme": "NativeScript Application",
    "repository": "",
    "nativescript": {
    "id": "mx.com.waisoft.appcustomerappli",
    "tns-android": {
    "version": "3.4.2"
    }
    },
    "dependencies": {
    "@angular/animations": "~5.2.0",
    "@angular/common": "~5.2.0",
    "@angular/compiler": "~5.2.0",
    "@angular/core": "~5.2.0",
    "@angular/forms": "~5.2.0",
    "@angular/http": "~5.2.0",
    "@angular/platform-browser": "~5.2.0",
    "@angular/platform-browser-dynamic": "~5.2.0",
    "@angular/router": "~5.2.0",
    "nativescript-angular": "~5.2.0",
    "nativescript-cardview": "^2.0.5",
    "nativescript-geolocation": "^4.2.5",
    "nativescript-google-maps-sdk": "^2.5.0",
    "nativescript-google-places-autocomplete": "^1.0.3",
    "nativescript-ng-shadow": "^2.1.0",
    "nativescript-star-ratings": "^1.0.0",
    "nativescript-theme-core": "~1.0.4",
    "nativescript-ui-autocomplete": "^3.6.0",
    "nativescript-ui-sidedrawer": "^3.5.2",
    "reflect-metadata": "~0.1.8",
    "rxjs": "~5.5.2",
    "tns-core-modules": "~3.4.0",
    "zone.js": "~0.8.2"
    },
    "devDependencies": {
    "@angular/compiler-cli": "~5.2.0",
    "@ngtools/webpack": "~1.9.4",
    "babel-traverse": "6.26.0",
    "babel-types": "6.26.0",
    "babylon": "6.18.0",
    "copy-webpack-plugin": "~4.3.0",
    "css-loader": "~0.28.7",
    "extract-text-webpack-plugin": "~3.0.2",
    "lazy": "1.0.11",
    "nativescript-dev-typescript": "~0.6.0",
    "nativescript-dev-webpack": "^0.9.2",
    "nativescript-worker-loader": "~0.8.1",
    "raw-loader": "~0.5.1",
    "resolve-url-loader": "~2.2.1",
    "typescript": "~2.6.2",
    "uglifyjs-webpack-plugin": "~1.1.6",
    "webpack": "~3.10.0",
    "webpack-bundle-analyzer": "^2.9.1",
    "webpack-sources": "~1.1.0"
    }
    }

Size of the stars

Make sure to check the demo app(s) for sample usage

checked

Make sure to check the existing issues in this repository

checked

If the demo apps cannot help and there is no issue for your problem, tell us about it

how can i modify the size of the stars

Which platform(s) does your issue occur on?

  • iOS/Android/Both

Please, provide the following version numbers that your issue occurs with:

  • CLI: 3.4.1
  • Cross-platform modules: 3.4.0
  • Runtime(s): 3.4.1
  • Plugin(s):
    "dependencies": {
    "@angular/animations": "~5.2.0",
    "@angular/common": "~5.2.0",
    "@angular/compiler": "~5.2.0",
    "@angular/core": "~5.2.0",
    "@angular/forms": "~5.2.0",
    "@angular/http": "~5.2.0",
    "@angular/platform-browser": "~5.2.0",
    "@angular/platform-browser-dynamic": "~5.2.0",
    "@angular/router": "~5.2.0",
    "email-validator": "^1.1.1",
    "nativescript-angular": "~5.2.0",
    "nativescript-liveedit": "^2.3.0",
    "nativescript-pro-ui": "~3.3.0",
    "nativescript-star-ratings": "^1.0.0",
    "nativescript-theme-core": "~1.0.4",
    "reflect-metadata": "~0.1.10",
    "rxjs": "~5.5.5",
    "tns-core-modules": "~3.4.0",
    "zone.js": "~0.8.18"
    },
    "devDependencies": {
    "@angular/compiler-cli": "~5.2.0",
    "@ngtools/webpack": "~1.9.1",
    "babel-traverse": "6.4.5",
    "babel-types": "6.4.5",
    "babylon": "6.4.5",
    "codelyzer": "~4.0.2",
    "copy-webpack-plugin": "~4.3.0",
    "css-loader": "~0.28.7",
    "extract-text-webpack-plugin": "~3.0.2",
    "lazy": "1.0.11",
    "nativescript-dev-sass": "~1.3.5",
    "nativescript-dev-typescript": "~0.6.0",
    "nativescript-dev-webpack": "~0.9.1",
    "nativescript-worker-loader": "~0.8.1",
    "raw-loader": "~0.5.1",
    "resolve-url-loader": "~2.2.1",
    "sass-loader": "~6.0.6",
    "tslint": "~5.8.0",
    "typescript": "~2.6.2",
    "uglifyjs-webpack-plugin": "~1.1.6",
    "webpack": "~3.10.0",
    "webpack-bundle-analyzer": "^2.9.1",
    "webpack-sources": "~1.1.0"
    }

Please, tell us how to recreate the issue in as much detail as possible.

just use it as the instructions says it should be used

Capture target action change event from iOS

Currently you cannot capture the changed 'current' value. Implementation is commented out, as I am not currently confident on the correct usage for capturing such event.

demo not working

when we run the demo, the following error appears and the application not working:

System.err: Error: Building UI from XML. @file:///app/main-page.xml:10:9 System.err: > Module '/data/data/org.nativescript.demo/files/app/nativescript-star-ratings' not found for element 'nativescript-star-ratings:StarRating'. System.err: > com.tns.NativeScriptException: Failed to find module: "/data/data/org.nativescript.demo/files/app/nativescript-star-ratings", relative to: app//

Star rating emptyColor wont change!

Which platform(s) does your issue occur on?

  • emulator, Pixel XL API 28

Please, provide the following version numbers that your issue occurs with:

  • CLI: 6.5.0
  • Cross-platform modules: 6.3.2
  • Plugin(s): ^1.0.0

Possible Fix:
File name: star-rantings.android.js, line number 40
emptyDrawable.setColorFilter(new color_1.Color('white').android, android.graphics.PorterDuff.Mode.SRC_ATOP);

Changed to:
emptyDrawable.setColorFilter(new color_1.Color(color).android, android.graphics.PorterDuff.Mode.SRC_ATOP);

The issue was that the color was manually set to white, I just replaced it with the parameter.

filledColor not showing in Android.

Make sure to check the demo app(s) for sample usage

Make sure to check the existing issues in this repository

If the demo apps cannot help and there is no issue for your problem, tell us about it

Please, ensure your title is less than 63 characters long and starts with a capital
letter.

Which platform(s) does your issue occur on?

  • iOS/Android/Both
  • iOS/Android versions
  • emulator or device. What type of device?

Please, provide the following version numbers that your issue occurs with:

  • CLI: (run tns --version to fetch it)
  • Cross-platform modules: (check the 'version' attribute in the
    node_modules/tns-core-modules/package.json file in your project)
  • Runtime(s): (look for the "tns-android" and "tns-ios" properties in the package.json file of your project)
  • Plugin(s): (look for the version numbers in the package.json file of your
    project and paste your dependencies and devDependencies here)

Please, tell us how to recreate the issue in as much detail as possible.

Describe the steps to reproduce it.

Is there any code involved?

  • provide a code example to recreate the problem
  • (EVEN BETTER) provide a .zip with application or refer to a repository with application where the problem is reproducible.

Plugin not cloud-building on iOS nativescript sidekick

Hi everybody,

I'm not being able to build anymore iOS cloud build through nativescript sidekick. When installing dependencies, it always return an error

Cosmos does not specify a Swift version and none of the targets (MyAppName) integrating it have the SWIFT_VERSION attribute set. Please contact the author or set the SWIFT_VERSION attribute in at least one of the targets that integrate this pod.

I tried the following workaround https://medium.com/@championswimmer/setting-swift-version-in-nativescript-6ece09112a46 however I didn't have any success. Actually, checking the POD file inside node_modules folder, I see it already has the same code applied setting SWIFT_VERSION to '4.0'...

I tried to local build in a macOs and I got the same error, but downgrading Cocoapods version to 1.6x worked fine. As I can't tune cloud build to use a specific cocoapod version, I'm following the suggestion of the console and I'm loging this issue here.

Windows10
NodeJs 10.13.0
npm 6.9.0
NS CLI 5.3.1

max value doesn't work

If the demo apps cannot help and there is no issue for your problem, tell us about it

Please, ensure your title is less than 63 characters long and starts with a capital
letter.
I want the max value to be 5 but when I plugged the max value onto the element 8 stars show up in the display, my platform is Android and I'm using javascript
-CLI: 3.4.0
-Runtimes tns-android: 3.4.0
tns-ios: 3.4.0
-plugins: "dependencies": {
"nativescript-accordion": "^5.0.3",
"nativescript-awesome-loaders": "^1.2.1",
"nativescript-dom": "^2.0.0",
"nativescript-drop-down": "^3.2.0",
"nativescript-floatingactionbutton": "^4.1.2",
"nativescript-https": "^1.0.1",
"nativescript-loading-indicator": "^2.4.0",
"nativescript-loading-indicator-new": "^2.1.0",
"nativescript-master-technology": "^1.1.1",
"nativescript-modal-datetimepicker": "^1.0.3",
"nativescript-paypal": "^2.6.9",
"nativescript-pro-ui": "^3.2.0",
"nativescript-reviews": "^1.0.4",
"nativescript-snackbar": "^2.0.0",
"nativescript-sqlite": "^1.1.11",
"nativescript-star-ratings": "^1.0.0",
"nativescript-theme-core": "1.0.4",
"tns-core-modules": "^3.4.0"
},
"devDependencies": {
"babel-traverse": "6.4.5",
"babel-types": "6.4.5",
"babylon": "6.4.5",
"eslint": "4.6.1",
"lazy": "1.0.11",
"nativescript-dev-sass": "1.3.2",
"node-sass": "4.5.3"
}

<Page class="page-content" loaded="onloaded" xmlns:UI="nativescript-reviews" xmlns:ui="nativescript-star-ratings" > <GridLayout rows="*, 60, 60"> <ScrollView> <StackLayout row="0"> <UI:Reviews user="userTap" long="longpressed" reviews="{{ reviews }}" /> </StackLayout> </ScrollView> <StackLayout row="1"> <ui:StarRating value="5" max="5" emptyBorderColor="yellow" emptyColor="white" filledBorderColor="yellow" filledColor="yellow" /> </StackLayout> <StackLayout row="2" orientation="horizontal"> <TextField class="input" hint="write your own review here" id="userReview" /> <Button text="done" /> </StackLayout> </GridLayout> </Page>

can't build ios after new cosmos library release

hello, i have this error after the update of

https://github.com/evgenyneu/Cosmos

that this is a is a fork of , here is the error, how can i solve?

Xcode build...
/Users/mac/WebstormProjects/xxx/platforms/ios/Pods/Cosmos/Cosmos/CosmosAccessibility.swift:19:29: error: type 'UIAccessibilityTraits' (aka 'UInt64') has no member 'adjustable'
      UIAccessibilityTraits.adjustable :UIAccessibilityTraits.none
      ~~~~~~~~~~~~~~~~~~~~~ ^~~~~~~~~~
/Users/mac/WebstormProjects/xxx/platforms/ios/Pods/Cosmos/Cosmos/CosmosAccessibility.swift:19:63: error: type 'UIAccessibilityTraits' (aka 'UInt64') has no member 'none'
      UIAccessibilityTraits.adjustable :UIAccessibilityTraits.none
                                        ~~~~~~~~~~~~~~~~~~~~~ ^~~~
/Users/mac/WebstormProjects/xxx/platforms/ios/Pods/Cosmos/Cosmos/StarLayer.swift:55:57: error: type 'CALayerContentsGravity' (aka 'NSString') has no member 'resizeAspect'
    imageLayer.contentsGravity = CALayerContentsGravity.resizeAspect
                                 ~~~~~~~~~~~~~~~~~~~~~~ ^~~~~~~~~~~~
Command CompileSwift failed with a nonzero exit code
note: Using new build system
note: Planning build
note: Constructing build description
** ARCHIVE FAILED **
Command xcodebuild failed with exit code 65

thank you

can add editable false?

i want set editable to false, i just want to display purpose. can help me on this, other than use enabled = false?

Fixed Stars

Is there any option to fix the value of star

Not able to get values of stars on code behind

Make sure to check the demo app(s) for sample usage

I have checked and not found any demo app for Nativescript angular example.

Make sure to check the existing issues in this repository

I checked.

If the demo apps cannot help and there is no issue for your problem, tell us about it

Please, ensure your title is less than 63 characters long and starts with a capital
letter.

Which platform(s) does your issue occur on?

  • iOS/Android/Both
    Android

  • iOS/Android versions
    Android Version 6.0

  • emulator or device. What type of device?
    on both

Please, provide the following version numbers that your issue occurs with:

  • CLI: (run tns --version to fetch it)
    4.0.0
  • Cross-platform modules: (check the 'version' attribute in the
    node_modules/tns-core-modules/package.json file in your project)
    3.4.1
  • Runtime(s): (look for the "tns-android" and "tns-ios" properties in the package.json file of your project)
    4.0.1
  • Plugin(s): (look for the version numbers in the package.json file of your
    project and paste your dependencies and devDependencies here)
    {
    "description": "NativeScript Application",
    "license": "SEE LICENSE IN ",
    "readme": "NativeScript Application",
    "repository": "",
    "nativescript": {
    "id": "com.itneer.hotelmobile",
    "tns-ios": {
    "version": "4.0.1"
    },
    "tns-android": {
    "version": "4.0.1"
    }
    },
    "dependencies": {
    "@angular/animations": "4.4.6",
    "@angular/common": "4.4.6",
    "@angular/compiler": "4.4.6",
    "@angular/core": "4.4.6",
    "@angular/forms": "4.4.6",
    "@angular/http": "4.4.6",
    "@angular/platform-browser": "4.4.6",
    "@angular/router": "4.4.6",
    "angular-star-rating": "^3.0.8",
    "nativescript-angular": "~4.4.0",
    "nativescript-app-shortcuts": "^2.1.0",
    "nativescript-braintree": "^1.0.8",
    "nativescript-checkbox": "^3.0.3",
    "nativescript-drop-down": "^3.2.5",
    "nativescript-feedback": "^1.1.2",
    "nativescript-google-maps-sdk": "^2.6.0",
    "nativescript-googlemaps": "^3.0.2",
    "nativescript-image-swipe": "^2.1.0",
    "nativescript-snackbar": "^2.0.1",
    "nativescript-star-ratings": "^1.0.0",
    "nativescript-theme-core": "~1.0.2",
    "nativescript-ui-autocomplete": "^3.7.0",
    "nativescript-ui-calendar": "^3.5.2",
    "nativescript-ui-sidedrawer": "^4.0.0",
    "reflect-metadata": "^0.1.12",
    "rxjs": "~5.4.2",
    "tns-core-modules": "^3.4.1",
    "zone.js": "^0.8.26"
    },
    "devDependencies": {
    "babel-traverse": "6.4.5",
    "babel-types": "6.4.5",
    "babylon": "6.4.5",
    "lazy": "1.0.11",
    "nativescript-dev-typescript": "~0.5.0",
    "typescript": "~2.4.2"
    }
    }

Please, tell us how to recreate the issue in as much detail as possible.

using the link of Nativescript Angular, "https://www.npmjs.com/package/nativescript-star-ratings", I tried to implement start rating on my app.

however, I am not able to get the number of stars which I choose from my app.
Can anyone provide a sample application (working) where i select 3 or 4 stars and i get that value as number on my code behind (lets say on button click).

emptyBorderColor, emptyColor and filledBorderColor properties don't change.

I changed emptyBorderColor, emptyColor and filledBorderColor property color's, but anything didn't changed. Border colors looks white. I am using genymotion - Google Nexus 5X - 6.0.0 device.
My code is;

<ui:StarRating horizontalAlignment="center" verticalAlignment="center" id="rating" emptyBorderColor="red" emptyColor="red" filledBorderColor="black" filledColor="red" value="3" max="5" isindicator="false"/>

please, can you help me? Thank you.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.