0
我期待到一種方式來獲得以下(從材料的網站上得到):銅牌:在輸入欄圖標素材
我已經能夠做到與輸入場得到一個圖標使用輸入組引導。但是,我無法找到一個關於如何使用mdl執行此操作的好方法。
我使用榆樹,但HTML/CSS的解決方案是好的。
我期待到一種方式來獲得以下(從材料的網站上得到):銅牌:在輸入欄圖標素材
我已經能夠做到與輸入場得到一個圖標使用輸入組引導。但是,我無法找到一個關於如何使用mdl執行此操作的好方法。
我使用榆樹,但HTML/CSS的解決方案是好的。
我解決了它與一些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
]
]
我已經完成了一個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。
感謝了很多,但我如何獲得在密碼字段:) – Milan
能見度圖標根據材料設計精簡版專門尋找,和'的文檔elm- mdl'我想你可以在可擴展文本框上有圖標,我認爲這不是你正在尋找的。你給我們的截圖是從材料設計網站,但不是從材料設計精簡版... – gabrielperales
我解決了它使用一些CSS。我不喜歡圖標的輸入字段行停止,但否則如果密碼太長,它可能會在圖標下。 – Milan