iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 16
0

elm-css

既然html,js都可以用elm compile出來,那css可以嗎? 當然是可以的,雖然大多數的人還是把css
另外寫,不過如果你要吃elm全餐的話, 也是有這種選項的,名稱就是 elm-css

可以直接來看github上的例子:

module MyCss exposing (main)

import Css exposing (..)
import Html
import Html.Styled exposing (..)
import Html.Styled.Attributes exposing (css, href, src)
import Html.Styled.Events exposing (onClick)


{-| A logo image, with inline styles that change on hover.
-}
logo : Html msg
logo =
    img
        [ src "logo.png"
        , css
            [ display inlineBlock
            , padding (px 20)
            , border3 (px 5) solid (rgb 120 120 120)
            , hover
                [ borderColor theme.primary
                , borderRadius (px 10)
                ]
            ]
        ]
        []

-- more codes...

可以看到,elm-css把css放在 img [][]
img第一個parameter裡,也可以理解,因為第一個parameter是放html
的attribute,而css也是其中一個。

elm-bootstrap

那如果你不想寫css呢?想要直接用css framework?譬如是bootstrap?可以嗎?
可以喔,有一個架在bootstrap4上面的套件:elm-bootstrap。讓你可以直接在elm view 裡面使用bootstrap, 使用也很簡單,就像elm-css一樣,把elm-package.json 加入這個套件就可以使用了。

module Main exposing (..)

import Bootstrap.CDN as CDN
import Bootstrap.Grid as Grid


view : Model -> Html Msg
view model =
    Grid.container []         -- Responsive fixed width container
        [ CDN.stylesheet      -- Inlined Bootstrap CSS for use with reactor
        , navbar model        -- Interactive and responsive menu
        , mainContent model
        ]


-- ... etc

使用的規則也十分類似bootstrap,我們可以來看 doc,以alret messages為例子:

div []
    [ Alert.success [ text "This is a success message." ]
    , Alert.info [ text "Just a heads up info message." ]
    , Alert.warning [ text "Warning, you shouldn't be doing this." ]
    , Alert.danger [ text "Something bad happened." ]
    ]

你可以用 Alert.success, Alert.info, Alert.warning, Alert.danger等都和bootstrap類似,就可以直接在elm裡寫css,不需要再另外的檔案了。


上一篇
15 如何在Elm 裡除錯:dubug in Elm
下一篇
17 使用webpack來打包elm
系列文
學會Elm寫前端30

尚未有邦友留言

立即登入留言