gufaUIRating #
rating
Usage #
Import #
ts
import { Arating } from "@agufaui/${framework name}";
Html #
<arating /> or <Arating />
Configuration #
Theme component name: arating
Showcase #
- 1st example is readonly
- 2nd example is clickable
Click to see code
vue
<arating :v="3.5" />
<arating :v="score" clickable @click="score = $event" />AgufaUI provided Theme #
CDefaultType is just string constant "default"
ts
import { CDefaultType } from "@agufaui/config";
import type { IARatingProps } from "../../types/utility/ARating";
export const DARatingDefault = {
vc: "text-amber-5",
};
export const DARating: Readonly<Record<string, Partial<IARatingProps>>> = {
[CDefaultType]: DARatingDefault,
};
Attributes (Properties) #
Default Values #
vue
spacex: "space-x-1",
emptyi: "i-material-symbols:star-outline-rounded",
fulli: "i-material-symbols:star-rounded",
halfi: "i-material-symbols:star-half-rounded",
total: 5,Unique #
ts
export interface IARatingProps extends IProps, IPropsComposeX, IPropsForm {
v?: number; // rating score
vc?: string; // css classes for rating star
emptyi?: string; // empty star icon
fulli?: string; // full star icon
halfi?: string; // half star icon
clickable?: boolean; // if clickable
total?: number; // total number of stars
}Inherit from IProps #
ts
export interface IProps {
t?: string; // user defined or AgufaUI provided component type. Not configurable
c?: string; // css classes for component root html element
}Inherit from IPropsComposeX #
ts
export interface IPropsComposeX {
spacex?: string; // space between elements in x-axis eg. space-x-1.5
}Inherit from IPropsForm #
ts
export interface IPropsForm {
disabled?: boolean; // disabled
}Events #
ts
export interface IARatingEmits {
(e: "click", rating: number): void; // click event
}