Ignite UI for Web Components

All
  • Public
  • Public/Protected
  • All

Class IgcRatingComponent

Rating provides insight regarding others' opinions and experiences, and can allow the user to submit a rating of their own

Element

igc-rating

Fires

igcChange - Emitted when the value of the control changes.

Fires

igcHover - Emitted when hover is enabled and the user mouses over a symbol of the rating.

Csspart

base - The main wrapper which holds all of the rating elements.

Csspart

label - The label part.

Csspart

value-label - The value label part.

Csspart

symbols - A wrapper for all rating symbols.

Csspart

symbol - The part of the encapsulated default symbol.

Csspart

full - The part of the encapsulated full symbols.

Csspart

empty - The part of the encapsulated empty symbols.

Cssproperty

--symbol-size - The size of the symbols.

Cssproperty

--symbol-full-color - The color of the filled symbol.

Cssproperty

--symbol-empty-color - The color of the empty symbol.

Cssproperty

--symbol-full-filter - The filter(s) used for the filled symbol.

Cssproperty

--symbol-empty-filter - The filter(s) used for the empty symbol.

Hierarchy

Hierarchy

  • FormAssociatedElementInterface<this> & EventEmitterInterface<
        IgcRatingComponentEventMap,
        this,
    > & LitElement<this>
    • IgcRatingComponent

Properties

Accessors

Methods

Properties

allowReset

allowReset: boolean = false

Whether to reset the rating when the user selects the same value.

Attr

allow-reset

disabled

disabled: boolean

The disabled state of the component.

Attr

Default

false

hoverPreview

hoverPreview: boolean = false

Sets hover preview behavior for the component

Attr

hover-preview

invalid

invalid: boolean

Sets the control into invalid state (visual state only).

Attr

Default

false

label

label: string

The label of the control.

Attr

label

name

name: string

The name attribute of the control.

Attr

readOnly

readOnly: boolean = false

Makes the control a readonly field.

Attr

readonly

valueFormat

valueFormat: string

A format string which sets aria-valuetext. Instances of '{0}' will be replaced with the current value of the control and instances of '{1}' with the maximum value for the control.

Important for screen-readers and useful for localization.

Attr

value-format

Static ReadonlytagName

tagName: "igc-rating" = 'igc-rating'

Returns the HTML-uppercased qualified name.

MDN Reference

Accessors

defaultValue

  • set defaultValue(value: unknown): void

    The initial value of the component.

    Parameters

    • value: unknown

    Returns void

form

  • get form(): null | HTMLFormElement

    Returns the HTMLFormElement associated with this element.

    Returns null | HTMLFormElement

max

  • set max(value: number): void

    The maximum value for the rating.

    If there are projected symbols, the maximum value will be resolved based on the number of symbols.

    Attr

    max

    Default

    5

    Parameters

    • value: number

    Returns void

single

  • set single(value: boolean): void

    Toggles single selection visual mode.

    Attr

    single

    Default

    false

    Parameters

    • value: boolean

    Returns void

step

  • set step(value: number): void

    The minimum value change allowed.

    Valid values are in the interval between 0 and 1 inclusive.

    Attr

    step

    Default

    1

    Parameters

    • value: number

    Returns void

validationMessage

  • get validationMessage(): string

    A string containing the validation message of this element.

    Returns string

validity

  • get validity(): ValidityState

    Returns a ValidityState object which represents the different validity states the element can be in, with respect to constraint validation.

    Returns ValidityState

value

willValidate

  • get willValidate(): boolean

    A boolean value which returns true if the element is a submittable element that is a candidate for constraint validation.

    Returns boolean

Methods

checkValidity

  • checkValidity(): boolean

    Checks for validity of the control and emits the invalid event if it invalid.

    Returns boolean

reportValidity

  • reportValidity(): boolean

    Checks for validity of the control and shows the browser message if it invalid.

    Returns boolean

setCustomValidity

  • setCustomValidity(message: string): void

    Sets a custom validation message for the control. As long as message is not empty, the control is considered invalid.

    Parameters

    • message: string

    Returns void

stepDown

  • stepDown(n?: number): void

    Decrements the value of the control by n steps multiplied by the step factor.

    Parameters

    • n: number = 1

    Returns void

stepUp

  • stepUp(n?: number): void

    Increments the value of the control by n steps multiplied by the step factor.

    Parameters

    • n: number = 1

    Returns void