FordLabs / elm-star-rating / Rating

A simple five star rating component. Uses unicode star characters ★ & ☆ (U+2605 & U+2606) by default. Allows for custom Html elements to be used.

Init

initialState : State

Initial rating state. Sets rating to zero. Uses "★" and "☆".

initialCustomState : Html Msg -> Html Msg -> State

Initial rating state. Sets rating to zero. Uses html passed in by user.

View

classView : String -> List String -> State -> Html Msg

Render the component. Accepts a name for the rating component, a list of css class names and a Rating.State. The radioGroupName is used to populate the name parameter on the radio buttons, so use a unique name for each star rating on the same page. If using initialState to initialize this component, it uses text characters to display the stars, so use css accordingly.

Rating.classView "starRating" [ "cssClass1", "cssClass2" ] ratingState

styleView : String -> List ( String, String ) -> State -> Html Msg

Render the component. Accepts a name for the rating component, a list of style tuples and a Rating.State. The radioGroupName is used to populate the name parameter on the radio buttons, so use a unique name for each star rating on the same page. If using initialState to initialize this component, it uses text characters to display the stars, so use css accordingly.

Rating.styleView "starRating" [ ( "color", "red" ) ] ratingState

Update

update : Msg -> State -> State

Update the state of the rating component.

RatingMsg msg ->
    ( { model | ratingState = (Rating.update msg model.ratingState) }, Cmd.none )

Helpers

get : State -> Basics.Int

Get the current rating.

Rating.get ratingState

set : Basics.Int -> State -> State

Set the rating. Keeps values between 0 and 5.

Rating.set 4 ratingState

Types


type State

Opaque type obscuring rating model.


type Msg

Opaque type obscuring rating messages.