mirror of
https://github.com/correl/elm-mdl.git
synced 2025-01-12 11:08:14 +00:00
Added elevation (shadow) styles
This commit is contained in:
Søren Debois
parent
8ca132ae4d
commit
2ca589a7ef
5 changed files with 127 additions and 25 deletions
6
Makefile
6
Makefile
|
|
@ -11,14 +11,14 @@ pages :
|
|||
elm-make examples/Demo.elm --output $(PAGES)/elm.js
|
||||
(cd $(PAGES); git commit -am "Update."; git push origin gh-pages)
|
||||
|
||||
clean :
|
||||
cleanish :
|
||||
rm -f elm.js index.html
|
||||
|
||||
veryclean :
|
||||
clean :
|
||||
rm -rf elm-stuff/build-artifacts
|
||||
|
||||
distclean : clean
|
||||
rm -rf elm-stuff
|
||||
|
||||
|
||||
.PHONY : pages elm.js clean veryclean distclean
|
||||
.PHONY : pages elm.js clean cleanish distclean
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import Material.Grid exposing (..)
|
|||
import Material.Style exposing (Style, css)
|
||||
|
||||
import Html exposing (..)
|
||||
import Markdown
|
||||
|
||||
-- Cell styling
|
||||
|
||||
|
|
@ -33,7 +34,8 @@ std = democell 200
|
|||
|
||||
view : List Html
|
||||
view =
|
||||
[ [1..12]
|
||||
[ intro
|
||||
, [1..12]
|
||||
|> List.map (\i -> small [size All 1] [text "1"])
|
||||
|> grid []
|
||||
, [1 .. 3]
|
||||
|
|
@ -50,3 +52,36 @@ view =
|
|||
]
|
||||
|
||||
|
||||
intro : Html
|
||||
intro = """
|
||||
From the
|
||||
[Material Design Lite documentation](http://www.getmdl.io/components/#layout-section/grid):
|
||||
|
||||
> The Material Design Lite (MDL) grid component is a simplified method for laying
|
||||
> out content for multiple screen sizes. It reduces the usual coding burden
|
||||
> required to correctly display blocks of content in a variety of display
|
||||
> conditions.
|
||||
>
|
||||
> The MDL grid is defined and enclosed by a container element. A grid has 12
|
||||
> columns in the desktop screen size, 8 in the tablet size, and 4 in the phone
|
||||
> size, each size having predefined margins and gutters. Cells are laid out
|
||||
> sequentially in a row, in the order they are defined, with some exceptions:
|
||||
>
|
||||
> - If a cell doesn't fit in the row in one of the screen sizes, it flows
|
||||
> into the following line.
|
||||
> - If a cell has a specified column size equal to or larger than the number
|
||||
> of columns for the current screen size, it takes up the entirety of its
|
||||
> row.
|
||||
|
||||
#### See also
|
||||
|
||||
- [Demo source code](https://github.com/debois/elm-mdl/blob/master/examples/Demo/Grid.elm)
|
||||
- [elm-mdl package documentation](http://package.elm-lang.org/packages/debois/elm-mdl/latest/Material-Grid)
|
||||
- [Material Design Specification](https://www.google.com/design/spec/layout/responsive-ui.html#responsive-ui-grid)
|
||||
- [Material Design Lite documentation](http://www.getmdl.io/components/#layout-section/grid)
|
||||
|
||||
#### Demo
|
||||
|
||||
""" |> Markdown.toHtml
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -5,15 +5,16 @@ import Html exposing (..)
|
|||
import Html.Attributes exposing (class, style, key)
|
||||
import Array exposing (Array)
|
||||
|
||||
import Markdown
|
||||
|
||||
import Material.Color as Color
|
||||
import Material.Style exposing (styled, cs)
|
||||
import Material.Snackbar as Snackbar
|
||||
import Material.Button as Button exposing (Action(..))
|
||||
import Material.Grid exposing (..)
|
||||
import Material.Elevation as Elevation
|
||||
import Material exposing (lift, lift')
|
||||
|
||||
import Demo.Page as Page
|
||||
|
||||
|
||||
-- MODEL
|
||||
|
||||
|
|
@ -119,7 +120,7 @@ clickView model k =
|
|||
[ Color.background color
|
||||
, Color.text Color.primaryContrast
|
||||
-- TODO. Should have shadow styles someplace.
|
||||
, cs <| "mdl-shadow--" ++ if selected then "8dp" else "2dp"
|
||||
, Elevation.shadow (if selected then 8 else 2)
|
||||
]
|
||||
[ style
|
||||
[ ("margin-right", "3ex")
|
||||
|
|
@ -139,10 +140,8 @@ clickView model k =
|
|||
|
||||
view : Signal.Address Action -> Model -> Html
|
||||
view addr model =
|
||||
div []
|
||||
[ h1 [ class "mdl-typography--display-4-color-contrast" ] [ text "Snackbars & Toasts" ]
|
||||
, intro
|
||||
, grid []
|
||||
Page.view srcUrl "Snackbar & Toast" [ intro ] references
|
||||
[ grid []
|
||||
-- TODO. Buttons should be centered. Desperately need to be able
|
||||
-- to add css/classes to top-level element of components (div
|
||||
-- in grid, button in button, div in textfield etc.)
|
||||
|
|
@ -169,10 +168,8 @@ view addr model =
|
|||
|
||||
|
||||
intro : Html
|
||||
intro = """
|
||||
From the
|
||||
[Material Design Lite documentation](https://www.getmdl.io/components/index.html#snackbar-section).
|
||||
|
||||
intro =
|
||||
Page.fromMDL "https://www.getmdl.io/components/index.html#snackbar-section" """
|
||||
> The Material Design Lite (MDL) __snackbar__ component is a container used to
|
||||
> notify a user of an operation's status. It displays at the bottom of the
|
||||
> screen. A snackbar may contain an action button to execute a command for the
|
||||
|
|
@ -180,15 +177,18 @@ From the
|
|||
> example. Actions should not be to close the snackbar. By not providing an
|
||||
> action, the snackbar becomes a __toast__ component.
|
||||
|
||||
#### See also
|
||||
"""
|
||||
|
||||
- [Demo source code](https://github.com/debois/elm-mdl/blob/master/examples/Demo/Snackbar.elm)
|
||||
- [elm-mdl package documentation](http://package.elm-lang.org/packages/debois/elm-mdl/latest/Material-Snackbar)
|
||||
- [Material Design Specification](https://www.google.com/design/spec/components/snackbars-toasts.html)
|
||||
- [Material Design Lite documentation](https://www.getmdl.io/components/index.html#snackbar-section)
|
||||
srcUrl : String
|
||||
srcUrl =
|
||||
"https://github.com/debois/elm-mdl/blob/master/examples/Demo/Snackbar.elm"
|
||||
|
||||
#### Demo
|
||||
|
||||
""" |> Markdown.toHtml
|
||||
references : List (String, String)
|
||||
references =
|
||||
[ Page.demo srcUrl
|
||||
, Page.package "http://package.elm-lang.org/packages/debois/elm-mdl/latest/Material-Snackbar"
|
||||
, Page.mds "https://www.google.com/design/spec/components/snackbars-toasts.html"
|
||||
, Page.mdl "https://www.getmdl.io/components/index.html#snackbar-section"
|
||||
]
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -30,7 +30,8 @@ module Material.Badge
|
|||
@docs withBadge, noBackground, overlap
|
||||
-}
|
||||
|
||||
import Material.Style exposing (Style, cs, attrib, multiple)
|
||||
import Html.Attributes
|
||||
import Material.Style exposing (Style, cs, attribute, multiple)
|
||||
|
||||
|
||||
{-| Optional style for Badge. No background for badge
|
||||
|
|
@ -55,4 +56,7 @@ overlap =
|
|||
-}
|
||||
withBadge : String -> Style
|
||||
withBadge databadge =
|
||||
multiple [cs "mdl-badge", attrib "data-badge" databadge]
|
||||
multiple
|
||||
[ cs "mdl-badge"
|
||||
, attribute (Html.Attributes.attribute "data-badge" databadge)
|
||||
]
|
||||
|
|
|
|||
63
src/Material/Elevation.elm
Normal file
63
src/Material/Elevation.elm
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
module Material.Elevation
|
||||
( shadow
|
||||
, transition
|
||||
) where
|
||||
|
||||
|
||||
{-| 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.
|
||||
|
||||
|
||||
# Component
|
||||
@docs shadow, transition
|
||||
|
||||
-}
|
||||
|
||||
import Material.Style exposing (..)
|
||||
|
||||
|
||||
{-| Indicate the elevation of an element by giving it a shadow.
|
||||
The `z` argument indicates intended elevation; valid values
|
||||
are 0--24. The specification uses only the values
|
||||
1-6, 8, 9, 12, 16, 24 for standard UI elements.
|
||||
-}
|
||||
shadow : Int -> Style
|
||||
shadow z =
|
||||
cs ("mdl-shadow--" ++ toString z ++ "dp")
|
||||
|
||||
|
||||
{-| Add a CSS-transition to changes in elevation. Supply a transition
|
||||
duration in milliseconds as argument.
|
||||
|
||||
NB! This style dictated by neither MDL nor the Material Design
|
||||
Specification.
|
||||
-}
|
||||
transition : String -> Style
|
||||
transition duration =
|
||||
css "transition" ("box-shadow " ++ toString duration ++ "ms ease-in-out 0s")
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in a new issue