铜牌：在输入栏图标素材

Question

我期待到一种方式来获得以下（从材料的网站上得到）：

我已经能够做到与输入场得到一个图标使用输入组引导。但是，我无法找到一个关于如何使用mdl执行此操作的好方法。

我使用榆树，但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。