Rating"

From Documentation
Line 16: Line 16:
 
<source lang="xml" >
 
<source lang="xml" >
 
     <style>
 
     <style>
         .emoji .z-rating-hover {
+
         .myGiftIcon:before {
            -webkit-filter: hue-rotate(160deg);
+
             content: '🎁';
            filter: hue-rotate(160deg);
 
        }
 
        .emoji .z-rating-selected {
 
             -webkit-filter: hue-rotate(180deg);
 
            filter: hue-rotate(180deg);
 
 
         }
 
         }
 
     </style>
 
     </style>
     <rating max="14" rating="8"/>
+
     <rating rating="3"/>
     <separator height="25px"/>
+
     <rating iconSclass="z-icon-bolt" rating="3" max="7"/>
    <rating max="13" rating="7" symbol="z-icon-flag"/>
+
     <rating iconSclass="glyphicon glyphicon-star" rating="3"/>
     <separator height="25px"/>
+
     <rating iconSclass="myGiftIcon" rating="3"/>
     <rating max="12" rating="6" symbol="&#x260E;"/>
 
 
</source>
 
</source>
  

Revision as of 07:10, 18 October 2018

Rating

[ since 8.6.0 ]

Employment/Purpose

The rating component is a component that allows user selecting an rate that is smaller than the maximum number.

Example

ZKCompRef Rating.png

    <style>
        .myGiftIcon:before {
            content: '🎁';
        }
    </style>
    <rating rating="3"/>
    <rating iconSclass="z-icon-bolt" rating="3" max="7"/>
    <rating iconSclass="glyphicon glyphicon-star" rating="3"/>
    <rating iconSclass="myGiftIcon" rating="3"/>

Properties and Features

Symbol

Specify encoded unicode for xml, font awesome icons prefixed with z-icon could change the icon of Rating.

Orient

The orientation is default to horizontal, could be changed to vertical if vertical is specified.

Rating

This is the rating value, will have a initial value if specified to an integer larger than 0.

Cancelable

If true, by clicking the previous rated icon again, the rating will be canceled and set 0.

Max

Represents the maximum number of the rating. Also, icons will be rendered as the max size.

Disabled

If disabled is true, it's not allowed to be rated. (Is allowed to have an initial rating.)

Readonly

If true, the rating is only readable, not changeable. (Is allowed to have an initial rating.)

Supported Events

Name
Event Type
onChange
Event: Event

Denotes user has rated.

Supported Children

* none

Version History

Last Update : 2018/10/18


Version Date Content
     



Last Update : 2018/10/18

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.