mirror of
https://github.com/correl/elm-mdl.git
synced 2024-12-18 03:00:11 +00:00
Missing file
This commit is contained in:
parent
f414f9d960
commit
38f0f11983
1 changed files with 113 additions and 0 deletions
113
src/Material/Style.elm
Normal file
113
src/Material/Style.elm
Normal file
|
@ -0,0 +1,113 @@
|
||||||
|
module Material.Style
|
||||||
|
( Style
|
||||||
|
, styled
|
||||||
|
, cs, cs', css, css'
|
||||||
|
) where
|
||||||
|
|
||||||
|
|
||||||
|
{-| Styling Material components.
|
||||||
|
|
||||||
|
Use these to customize components and add your own classes and css to
|
||||||
|
Material container elements.
|
||||||
|
|
||||||
|
(This mechanism is necessary because Elm does not provide a good way to
|
||||||
|
add to or remove from the contents of an already constructed class Attribute.)
|
||||||
|
|
||||||
|
@docs Style
|
||||||
|
|
||||||
|
# Constructors
|
||||||
|
@docs cs, cs', css, css'
|
||||||
|
|
||||||
|
# Application
|
||||||
|
@docs styled
|
||||||
|
-}
|
||||||
|
|
||||||
|
|
||||||
|
import String
|
||||||
|
|
||||||
|
import Html exposing (Html, Attribute)
|
||||||
|
import Html.Attributes
|
||||||
|
|
||||||
|
|
||||||
|
-- STYLING
|
||||||
|
|
||||||
|
|
||||||
|
{-| Type of Style information.
|
||||||
|
-}
|
||||||
|
type Style
|
||||||
|
= Class String
|
||||||
|
| CSS (String, String)
|
||||||
|
| NOP
|
||||||
|
|
||||||
|
|
||||||
|
cssOf : Style -> Maybe (String, String)
|
||||||
|
cssOf style =
|
||||||
|
case style of
|
||||||
|
CSS css -> Just css
|
||||||
|
_ -> Nothing
|
||||||
|
|
||||||
|
|
||||||
|
classOf : Style -> Maybe String
|
||||||
|
classOf style =
|
||||||
|
case style of
|
||||||
|
Class c -> Just c
|
||||||
|
_ -> Nothing
|
||||||
|
|
||||||
|
|
||||||
|
{-| Handle the common case of setting attributes of a standard Html node
|
||||||
|
from a List Style. Use like this:
|
||||||
|
|
||||||
|
import Material.Style exposing (..)
|
||||||
|
|
||||||
|
myDiv : Html
|
||||||
|
myDiv =
|
||||||
|
styled div
|
||||||
|
[ css "classA", css "classB" ]
|
||||||
|
[ {- onClick ... (*) -} ]
|
||||||
|
[ text "This is my div with classes classA and classB!" ]
|
||||||
|
|
||||||
|
Note that if you do specify `style`, `class`, or `classList` attributes in
|
||||||
|
(*), they will be discarded.
|
||||||
|
-}
|
||||||
|
styled : (List Attribute -> a) -> List Style -> List Attribute -> a
|
||||||
|
styled ctor styles attrs =
|
||||||
|
ctor
|
||||||
|
( Html.Attributes.style (List.filterMap cssOf styles)
|
||||||
|
:: Html.Attributes.class (String.join " " (List.filterMap classOf styles))
|
||||||
|
:: attrs
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
{-| Add a HTML class to a component. (Name chosen to avoid clashing with
|
||||||
|
Html.Attributes.class.)
|
||||||
|
-}
|
||||||
|
cs : String -> Style
|
||||||
|
cs c = Class c
|
||||||
|
|
||||||
|
|
||||||
|
{-| Conditionally add a HTML class to a component.
|
||||||
|
-}
|
||||||
|
cs' : String -> Bool -> Style
|
||||||
|
cs' c b =
|
||||||
|
if b then Class c else NOP
|
||||||
|
|
||||||
|
|
||||||
|
{-| Add a CSS style to a component.
|
||||||
|
-}
|
||||||
|
css : String -> String -> Style
|
||||||
|
css key value =
|
||||||
|
CSS (key, value)
|
||||||
|
|
||||||
|
|
||||||
|
{-| Conditionally add a CSS style to a component
|
||||||
|
-}
|
||||||
|
css' : String -> String -> Bool -> Style
|
||||||
|
css' key value b =
|
||||||
|
if b then CSS (key, value) else NOP
|
||||||
|
|
||||||
|
|
||||||
|
{-| Add a style that does nothing.
|
||||||
|
-}
|
||||||
|
nop : Style
|
||||||
|
nop = NOP
|
Loading…
Reference in a new issue