Skip to content

Instantly share code, notes, and snippets.

@lorenzo
Forked from hipertracker/Counter.elm
Last active September 21, 2016 15:07
Show Gist options
  • Save lorenzo/26ae626548a24b86db2993b90730e4e6 to your computer and use it in GitHub Desktop.
Save lorenzo/26ae626548a24b86db2993b90730e4e6 to your computer and use it in GitHub Desktop.
Elm example
module Main exposing (..)
{- This file re-implements the Elm Counter example (1 counter) with elm-mdl
buttons. Use this as a starting point for using elm-mdl components in your own
app.
-}
import Html.App as App
import Html exposing (..)
import Html.Attributes exposing (href, class, style)
import Material
import Material.Scheme
import Material.Button as Button
import Material.Options exposing (css)
import Material.Layout as Layout
-- MODEL
type alias Model =
{ count : Int
, mdl :
Material.Model
-- Boilerplate: model store for any and all Mdl components you use.
, selectedTab : Int
}
init : Model
init =
{ count = 0
, mdl =
Material.model
-- Boilerplate: Always use this initial Mdl model store.
, selectedTab = 0
}
-- ACTION, UPDATE
type Msg
= Increase
| Reset
| Mdl (Material.Msg Msg)
| SelectTab Int
-- Boilerplate: Msg clause for internal Mdl messages.
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case Debug.log "message" msg of
Increase ->
( { model | count = model.count + 1 }, Cmd.none )
Reset ->
( { model | count = 0 }, Cmd.none )
-- Boilerplate: Mdl action handler.
Mdl msg' ->
Material.update msg' model
SelectTab num ->
{ model | selectedTab = num } ! []
-- VIEW
type alias Mdl =
Material.Model
view : Model -> Html Msg
view model =
Material.Scheme.top <|
Layout.render Mdl
model.mdl
[ Layout.fixedHeader
, Layout.selectedTab model.selectedTab
, Layout.onSelectTab SelectTab
]
{ header = [ h4 [ style [ ( "padding-left", "2rem" ) ] ] [ text "Counter" ] ]
, drawer = []
, tabs = ( [ text "Search", text "Read" ], [] )
, main = [ viewBody model ]
}
viewBody : Model -> Html Msg
viewBody model =
let
_ =
Debug.log "selectedTab:"
in
case model.selectedTab of
0 ->
viewCounter model
1 ->
text "Something else"
_ ->
text "404"
viewCounter : Model -> Html Msg
viewCounter model =
div
[ style [ ( "padding", "2rem" ) ] ]
[ text ("Count: " ++ toString model.count)
, Button.render Mdl
[ 0 ]
model.mdl
[ Button.onClick Increase
, css "margin" "0 24px"
]
[ text "Increase" ]
, Button.render Mdl
[ 1 ]
model.mdl
[ Button.onClick Reset ]
[ text "Reset" ]
, text ("selectedTab: " ++ toString model.selectedTab)
]
-- Load Google Mdl CSS. You'll likely want to do that not in code as we
-- do here, but rather in your master .html file. See the documentation
-- for the `Material` module for details.
main : Program Never
main =
App.program
{ init = ( init, Cmd.none )
, view = view
, subscriptions = always Sub.none
, update = update
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment