190323_elmでbulmaを利用
Elmでwebアプリを作成するとき、CSSフレームワークはbulmaが使われることが多そうです。
やってみたいと思います。
開発環境
参考：http://i-doctor.sakura.ne.jp/font/?p=36967
Windows 10 Pro
Chrome
VisualStudioCode 1.32.3
git version 2.20.1.windows.1
nvm 1.1.7
node 10.2.0
npm 6.4.1
elm 0.19.0
elm-format 0.8.1
VisualStudioCodeの拡張機能でelmをインストールして、settings.jsonに以下のようにelmを設定
"[elm]": {
"editor.formatOnSave": true
},
create-elm-app 3.0.6
VisualStudioCodeで、Alt+Shift+F, Ctrl+S を繰り返しながらコーディングをしていきます。
public/index.html
public/index.htmlの<head></head>内に、bulmaとFontAwesome5のCDNを記載して、使用できるようにします。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css"> <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
src/Main.elm
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| module Main exposing (Model, Msg(..), init, main, update, view) | |
| import Browser | |
| import Html exposing (Html, div, h1, i, img, p, text) | |
| import Html.Attributes exposing (class, src) | |
| ---- MODEL ---- | |
| type alias Model = | |
| {} | |
| init : ( Model, Cmd Msg ) | |
| init = | |
| ( {}, Cmd.none ) | |
| ---- UPDATE ---- | |
| type Msg | |
| = NoOp | |
| update : Msg -> Model -> ( Model, Cmd Msg ) | |
| update msg model = | |
| ( model, Cmd.none ) | |
| ---- VIEW ---- | |
| view : Model -> Html Msg | |
| view model = | |
| div [ class "section" ] | |
| [ img [ src "/logo.svg" ] [] | |
| , div [ class "columns" ] | |
| [ div [ class "column" ] | |
| [ p [ class "notification is-primary has-text-centered" ] | |
| [ i [ class "far fa-arrow-alt-circle-right fa-fw" ] [] | |
| , text "First colum" | |
| ] | |
| ] | |
| , div [ class "column" ] | |
| [ p [ class "notification is-info has-text-centered" ] | |
| [ i [ class "fas fa-comment-dots fa-fw" ] [] | |
| , text "Second colum" | |
| ] | |
| ] | |
| , div [ class "column" ] | |
| [ p [ class "notification is-warning has-text-centered" ] | |
| [ i [ class "far fa-check-circle fa-fw" ] [] | |
| , text "Third colum" | |
| ] | |
| ] | |
| ] | |
| ] | |
| ---- PROGRAM ---- | |
| main : Program () Model Msg | |
| main = | |
| Browser.element | |
| { view = view | |
| , init = \_ -> init | |
| , update = update | |
| , subscriptions = always Sub.none | |
| } |
ソースコードその他
https://github.com/syossan27/kuso2018-front
https://github.com/ababup1192/crud_elm
https://package.elm-lang.org/packages/surprisetalk/elm-bulma/latest/