mdgriffith / elm-ui

What if you never had to write CSS again?
https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/
BSD 3-Clause "New" or "Revised" License
1.35k stars 110 forks source link

Improve doc on how to customize radio buttons #268

Open AlienKevin opened 3 years ago

AlienKevin commented 3 years ago

The way to customize radio buttons through Input.optionWith is not clearly documented. To improve the doc, I wrote a working example based on defaultRadioOption in the source:

Run example on Ellie

Input.radio
    [ Element.padding 10
    , Element.spacing 20
    ]
    { onChange = ChooseLunch
    , selected = Just model.lunch
    , label = Input.labelAbove [] (Element.text "Lunch")
    , options =
        [ Input.optionWith Burrito (radioOption (Element.text "Burrito"))
        , Input.optionWith Taco (radioOption (Element.text "Taco!"))
        , Input.optionWith Gyro (radioOption (Element.text "Gyro"))
        ]
    }

radioOption : Element msg -> Input.OptionState -> Element.Element msg
radioOption optionLabel status =
    Element.row
        [ Element.spacing 10
        , Element.alignLeft
        , Element.width Element.shrink
        ]
        [ Element.el
            [ Element.width (Element.px 20)
            , Element.height (Element.px 20)
            , Border.width <|
                case status of
                    Input.Idle ->
                        2

                    Input.Focused ->
                        2

                    Input.Selected ->
                        10
            , Border.color <|
                case status of
                    Input.Idle ->
                        Element.rgb 0.2 0.4 0.2

                    Input.Focused ->
                        Element.rgb 0.2 0.4 0.2

                    Input.Selected ->
                        Element.rgb 0.2 0.4 0.2
            ]
            Element.none
        , Element.el [ Element.width Element.fill ] optionLabel
        ]