nixCodeX/elm-bootstrap/2.1.0

NOTE: the latest version is 3.1.1

Renamed to aDifferentJT/elm-bootstrap. That is where the repository lives now. It has not been published as a package under the new name.

Versions published as nixCodeX/elm-bootstrap still install under that name. 13 versions of 13 come from the new location (see their notes).

Rerouted (renamed, verified). The GitHub user or repository was renamed. The tag is still there, at the new name. The Lamdera package server serves a copy recovered from https://github.com/aDifferentJT/elm-bootstrap.

What we checked: The repo moved to github.com/aDifferentJT/elm-bootstrap. Rebuilt with git archive from commit da8645b1cd89 of https://github.com/aDifferentJT/elm-bootstrap (zip prefix nixCodeX-elm-bootstrap-da8645b/, America/Los_Angeles times): the zip is byte-identical to the one package.elm-lang.org recorded, SHA-1 f18e039a14f9a8efe5c0cee7ceb6e3fc5508da5c.

The Lamdera compiler uses this copy and prints a one-line notice saying so. elm itself fails to download this version.

Details · package.elm-lang.org's zip: https://github.com/nixCodeX/elm-bootstrap/zipball/2.1.0/

Bootstrap.Form.Radio

This module allows you to create Bootstrap styled radios.

Creating

radio : List (Option msg) -> String -> Html msg

Create a single radio input.

Radio.radio
    [ Radio.id "myRadio"
    , Radio.checked True
    , Radio.onClick MyRadioMsg
    ]
    "My radio"
custom : List (Option msg) -> String -> Html msg

Create a single radio input with customized Bootstrap styling.

Radio.custom
    [ Radio.id "myCustomRadio"
    , Radio.checked True
    , Radio.onClick MyRadioMsg
    ]
    "My custom radio"
advancedRadio : List (Option msg) -> Label msg -> Html msg

Create a radio element with customized label

Radio.advancedRadio
    [ Radio.id "myChk"
    , Radio.checked True
    , Radio.onCheck MyRadioMsg
    ]
    (Radio.label [ class "mylabelclass" ] [ text "Hello" ])
advancedCustom : List (Option msg) -> Label msg -> Html msg

Create a radio element with customized label

Radio.advancedCustom
    [ Radio.id "myChk"
    , Radio.checked True
    , Radio.onCheck MyRadioMsg
    ]
    (Radio.label [ class "mylabelclass" ] [ text "Hello" ])
label : List (Attribute msg) -> List (Html msg) -> Label msg

Create a label for a radio when using advancedRadio or advancedCustom

Radio.label [ style "font-size" "24px" ] [ div [ class "disclaimer" ] [ text "My disclaimer" ] ]
type Label msg

Opaque type representing a Radio label.

Options

id : String -> Option msg

Set the id for the radio. Will automatically set the for attribute for the label

NOTE: You have to use this for custom checkboxes.

checked : Bool -> Option msg

Option to toggle the radio checked property on off.

name : String -> Option msg

Option to set the name of a radio.

A single radio doesn't make much sense, typically you would have several. To automatically unselect one radio, when selecting another you need to have the same name for each radio in a group.

Use this option to display radios inline.

onClick : msg -> Option msg

Shorthand for assigning an onClick handler for a radio.

disabled : Bool -> Option msg

Option to disable the radio

attrs : List (Attribute msg) -> Option msg

Use this function to handle any Html.Attribute option you wish for your radio

type Option msg

Opaque type representing valid customization options for a radio

Validation

Option to color a radio with success.

Option to color a radio with danger.

Composing

radioList : String -> List (Radio msg) -> List (Html msg)

In most cases you would probably create multiple radios as a group. This function is a convenient helper to create a list of radios

-- You might have defined a single message for all your radios like this
type Msg
    = MyRadioMsg MyRadio Bool


type MyRadio
    = Radio1
    | Radio2
    | Radio3




-- In some view function your could create a radio list as follows


Radio.radioList "myradios"
    [ Radio.create
        [ Radio.id "myRadio1", Radio.onCheck (MyRadioMsg MyRadio1) ]
        "Radio 1"
    , Radio.create
        [ Radio.id "myRadio2", Radio.onCheck (MyRadioMsg MyRadio2) ]
        "Radio 2"
    , Radio.create
        [ Radio.id "myRadio3", Radio.onCheck (MyRadioMsg MyRadio3) ]
        "Radio 3"
    ]
  • groupName - Name of the radios, all radios will get the same name
  • radios - List of radios.
create : List (Option msg) -> String -> Radio msg

Create a composable radio for use in a radioList

createCustom : List (Option msg) -> String -> Radio msg

Create a composable custom radio for use in a radioList

createAdvanced : List (Option msg) -> Label msg -> Radio msg

Create a composable radio with customized label for use in a radioList

createCustomAdvanced : List (Option msg) -> Label msg -> Radio msg

Create a composable custom radio with customized label for use in a radioList

type Radio msg

Opaque composable type representing a Radio.