mirror of
https://github.com/correl/elm-mdl.git
synced 2024-11-23 19:19:52 +00:00
102 lines
2.8 KiB
Elm
102 lines
2.8 KiB
Elm
|
module Demo.Elevation where
|
||
|
|
|
||
|
|
import Effects exposing (Effects, none)
|
||
|
|
import Html exposing (..)
|
||
|
|
|
||
|
|
import Markdown
|
||
|
|
|
||
|
|
import Material.Template as Template
|
||
|
|
import Material exposing (lift, lift')
|
||
|
|
|
||
|
|
|
||
|
|
-- MODEL
|
||
|
|
|
||
|
|
|
||
|
|
type alias Model =
|
||
|
|
{ template : Template.Model
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
model : Model
|
||
|
|
model =
|
||
|
|
{ template = Template.model
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
-- ACTION, UPDATE
|
||
|
|
|
||
|
|
|
||
|
|
type Action
|
||
|
|
= TemplateAction Template.Action
|
||
|
|
|
||
|
|
|
||
|
|
update : Action -> Model -> (Model, Effects Action)
|
||
|
|
update action model =
|
||
|
|
case action of
|
||
|
|
TemplateAction action' -> lift .template (\m x -> {m|template=x}) TemplateAction Template.update action' model
|
||
|
|
|
||
|
|
|
||
|
|
-- VIEW
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
view : Signal.Address Action -> Model -> Html
|
||
|
|
view addr model =
|
||
|
|
div []
|
||
|
|
[ intro
|
||
|
|
, Template.view (Signal.forwardTo addr TemplateAction) model.template
|
||
|
|
]
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
intro : Html
|
||
|
|
intro = """
|
||
|
|
|
||
|
|
|
||
|
|
{-| From the [Material Design Lite documentation](https://github.com/google/material-design-lite/blob/master/src/shadow/README.md)
|
||
|
|
|
||
|
|
> The Material Design Lite (MDL) shadow is not a component in the same sense as
|
||
|
|
> an MDL card, menu, or textbox; it is a visual effect that can be assigned to a
|
||
|
|
> user interface element. The effect simulates a three-dimensional positioning of
|
||
|
|
> the element, as though it is slightly raised above the surface it rests upon —
|
||
|
|
> a positive z-axis value, in user interface terms. The shadow starts at the
|
||
|
|
> edges of the element and gradually fades outward, providing a realistic 3-D
|
||
|
|
> effect.
|
||
|
|
>
|
||
|
|
> Shadows are a convenient and intuitive means of distinguishing an element from
|
||
|
|
> its surroundings. A shadow can draw the user's eye to an object and emphasize
|
||
|
|
> the object's importance, uniqueness, or immediacy.
|
||
|
|
>
|
||
|
|
> Shadows are a well-established feature in user interfaces, and provide users
|
||
|
|
> with a visual clue to an object's intended use or value. Their design and use
|
||
|
|
> is an important factor in the overall user experience.)
|
||
|
|
|
||
|
|
The [Material Design Specification](https://www.google.com/design/spec/what-is-material/elevation-shadows.html#elevation-shadows-elevation-android-)
|
||
|
|
pre-defines appropriate elevation for most UI elements; you need to manually
|
||
|
|
assign shadows only to your own elements.
|
||
|
|
|
||
|
|
You are encouraged to visit the
|
||
|
|
[Material Design specification](https://www.google.com/design/spec/what-is-material/elevation-shadows.html)
|
||
|
|
for details about appropriate use of shadows.
|
||
|
|
|
||
|
|
# TEMPLATE
|
||
|
|
|
||
|
|
From the
|
||
|
|
[Material Design Lite documentation](https://www.getmdl.io/components/index.html#TEMPLATE-section).
|
||
|
|
|
||
|
|
> ...
|
||
|
|
|
||
|
|
#### See also
|
||
|
|
|
||
|
|
- [Demo source code](https://github.com/debois/elm-mdl/blob/master/examples/Demo/TEMPLATE.elm)
|
||
|
|
- [elm-mdl package documentation](http://package.elm-lang.org/packages/debois/elm-mdl/latest/Material-TEMPLATE)
|
||
|
|
- [Material Design Specification](https://www.google.com/design/spec/components/TEMPLATE.html)
|
||
|
|
- [Material Design Lite documentation](https://www.getmdl.io/components/index.html#TEMPLATE)
|
||
|
|
|
||
|
|
#### Demo
|
||
|
|
|
||
|
|
""" |> Markdown.toHtml
|
||
|
|
|
||
|
|
|
||
|
|
|