Mdl：输入字段中的材质图标

Question

我正在研究如何获得以下内容（摘自材料网站）：

我设法使用输入组在Bootstrap的输入字段中获取一个图标。但是我找不到一个关于如何用mdl做这个的好方法。

我正在使用elm，但是html / css解决方案很好。

Answer 1

我用一些css的东西解决了它。

passwordIconStyle : Attribute Msg
passwordIconStyle =
    style
        [ ("position", "absolute")
        , ("top", "18px")
        , ("right", "5px")
        , ("cursor", "pointer")
        ]

passwordField : Model -> Html Msg
passwordField model =
    div [ style [ ("position", "relative") ] ]
        [ Textfield.render Mdl [1] model.mdl
            [ Textfield.label "Password"
            , Textfield.floatingLabel
            , Textfield.password
            , Textfield.value model.password
            , Textfield.error model.passwordError
                |> Options.when (not <| isEmpty model.passwordError)
            , Options.onInput UpdatePassword
            , Options.css "padding-right" "40px"
            ]
            []
        , i [ passwordIconStyle ]
            [
                visibility Color.gray 25
            ]
        ]

结果：

Answer 2

我做了一个this小例子。我希望它可以帮到你。

import Material as Mdl
import Material.Textfield as Textfield
import Html exposing (..)


type alias Model =
    { mdl :
        Mdl.Model
    }


model : Model
model =
    { mdl =
        Mdl.model
        -- Boilerplate: model store for any and all Mdl components you use.
    }


type Msg
    = Mdl (Mdl.Msg Msg)


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        -- Boilerplate: Mdl action handler.
        Mdl msg_ ->
            Mdl.update Mdl msg_ model


view : Model -> Html Msg
view model =
    div []
        [ Textfield.render Mdl
            [ 2 ]
            model.mdl
            [ Textfield.label "Floating label"
            , Textfield.floatingLabel
            , Textfield.text_
            ]
            []
        , Textfield.render Mdl
            [ 5 ]
            model.mdl
            [ Textfield.label "Enter password"
            , Textfield.floatingLabel
            , Textfield.password
            ]
            []
        ]


main : Program Never Model Msg
main =
    Html.program
        { view = view
        , update = update
        , subscriptions = \_ -> Sub.none
        , init = ( model, Cmd.none )
        }

请注意，您必须添加index.html mdl css的function sendtestDraft(draftId){ var request = Gmail.Users.Drafts.send({id : draftId},'me'); Logger.log(request); } 链接。