UI Components
The source code of this page is available at
Form_FieldType_Text.elm
.
1. Button - Primary - Light
R10.Button.primary []
    { label = text "Text"
    , libu = R10.Libu.Bu <| Just doSomething
    , theme = theme
    }
Text
2. Button - Primary - Disabled - Light
R10.Button.primary []
    { label = text "Text"
    , libu = R10.Libu.Bu <| Nothing
    , theme = theme
    }
Text
3. Button - Primary - as Link - Light
R10.Button.primary []
    { label = text "Text"
    , libu = R10.Libu.Li "https://www.example.com"
    , theme = theme
    }
4. Button - Primary - Limited Width - Light
R10.Button.primary R10.Button.withLimitedWidth
    { label = text "Text"
    , libu = R10.Libu.Bu <| Just doSomething
    , theme = theme
    }
Text
5. Button - Secondary - Light
R10.Button.secondary []
    { label = text "Text"
    , libu = R10.Libu.Bu <| Just doSomething
    , theme = theme
    }
Text
6. Button - Tertiary - Light
R10.Button.tertiary []
    { label = text "Text"
    , libu = R10.Libu.Bu <| Just doSomething
    , theme = theme
    }
Text
7. Button - Tertiary with link - Light
R10.Button.tertiary []
    { label =
        paragraph []
            [ text "Text with "
            , el (R10.Link.attrs theme) <| text <| "link"
            ]
    , libu = R10.Libu.Bu <| Just doSomething
    , theme = theme
    }
Text with
link
8. Form - Login - Outlined - Light
R10.Form.viewWithTheme
    { conf = v01
    , state = formState
    }
    msgMapper
    theme_
Label
Required
9. Form - Login - Filled - Light
R10.Form.viewWithOptions
    { conf = v01
    , state = formState
    }
    msgMapper
    { maker = Nothing
    , translator = Nothing
    , style = R10.Form.style.filled
    , palette = Just <| R10.Form.themeToPalette theme_
    }
Label
Required
10. Form - Password - Outlined - Light
                    R10.Form.viewWithTheme
    { conf = v11
    , state = formState
    }
    msgMapper
    theme_
Label
Required
11. Form - Password - Filled - Light
                    R10.Form.viewWithOptions
    { conf = v11
    , state = formState
    }
    msgMapper
    { maker = Nothing
    , translator = Nothing
    , style = R10.Form.style.filled
    , palette = Just <| R10.Form.themeToPalette theme_
    }
Label
Required
Explain: OFF ⇔ ON
Width: Fill ⇔ Shrink