Press UI

# Rate

Used for rating operations on things.

# Code Demo

# Basic usage

<press-rate :value="value" @change="onChange" />

export default {
   data() {
     return {
       value: 3,
     }
   },
   methods: {
     onChange(value) {
       console.log('value', value);
     }
   },
};

# Custom icon

<press-rate
   :value="value"
   icon="like"
   void-icon="like-o"
   @change="onChange"
/>

# Custom styles

<press-rate
   :value="value"
   :size="25"
   color="#ffd21e"
   void-icon="star"
   void-color="#eee"
   @change="onChange"
/>

# half star

<press-rate
   :value="value"
   allow-half
   void-icon="star"
   void-color="#eee"
   @change="onChange"
/>

export default {
   data() {
     return {
       value: 2.5,
     }
   },
   methods: {
     onChange(value) {
       console.log('value', value);
     }
   },
};

# Custom Quantity

<press-rate :value="value" :count="6" @change="onChange" />

# Disabled state

<press-rate disabled :value="value" @change="onChange" />

# read-only status

<press-rate readonly :value="value" @change="onChange" />

# API

# Props

Parameter Description Type Default
name Identifier when submitted within the form string -
value current score number -
count total number of icons number 5
size icon size, the default unit is px string | number 20px
gutter icon spacing, the default unit is px string | number 4px
color color when selected string #ffd21e
void-color unselected color string #c7c7c7
icon The icon name or image link when selected, see Icon Component for optional values string star
void-icon Icon name or image link when not selected, see Icon Component for optional values string star-o
allow-half Whether to allow half selection boolean false
readonly Whether it is read-only boolean false
disabled whether to disable scoring boolean false
disabled-color disabled color string #bdbdbd
touchable Whether rating can be selected by swiping gesture boolean true

# Events

Event Name Description Callback Parameters
@change Event triggered when the current score changes event.detail: current score

# External style classes

class name description
custom-class root node style class
icon-class icon style class

# Theme customization

--rate-horizontal-padding：
--rate-icon-size：
--rate-icon-void-color：
--rate-icon-full-color：
--rate-icon-disabled-color：
--rate-icon-gutter：
横屏

← Search →