mirror of
https://github.com/correl/elm-mdl.git
synced 2024-12-18 11:06:18 +00:00
Enables Style to handle recursive (Multiple) styles. Updated Badge implementation and demo
This commit is contained in:
parent
a17c53dfdd
commit
903091e625
3 changed files with 28 additions and 20 deletions
|
@ -9,10 +9,13 @@ import Material.Style exposing (..)
|
|||
|
||||
view : List Html
|
||||
view = [ div [][p [][]
|
||||
, styled span [Badge.withBadge "56", Badge.overlap] [ ] [ text "Span with badge" ]
|
||||
, styled span [Badge.withBadge "2"] [ ] [ text "Span with badge" ]
|
||||
, p [][]
|
||||
, styled span [Badge.withBadge "22", Badge.noBackground] [ ] [ text "Span with no background badge" ]
|
||||
, p [][]
|
||||
, styled span [Badge.withBadge "33", Badge.overlap] [ ] [ text "Span with badge overlap" ]
|
||||
, p [][]
|
||||
, styled span [Badge.withBadge "99", Badge.overlap, Badge.noBackground] [ ] [ text "Span with badge overlap and no background" ]
|
||||
, p [][]
|
||||
-- , styled span (Badge.badgeStyle { overlap = True, noBackground = False} "7") [ ] [ text "Span with no background badge" ]
|
||||
-- , p [][]
|
||||
-- , styled span (Badge.badgeStyle { overlap = True, noBackground = False} "14") [ ] [ text "Span with badge overlap" ]
|
||||
]
|
||||
]
|
|
@ -27,7 +27,7 @@ module Material.Badge
|
|||
> discover additional relevant content. Their design and use is therefore an important
|
||||
> factor in the overall user experience.
|
||||
|
||||
@docs viewDefault, view, BadgeInfo, Options
|
||||
@docs withBadge, noBackground, overlap
|
||||
-}
|
||||
|
||||
import String
|
||||
|
@ -36,28 +36,25 @@ import Html.Attributes exposing (attribute)
|
|||
import Material.Style exposing (Style, cs, attrib, multiple)
|
||||
|
||||
|
||||
{-| No background for badge
|
||||
{-| Optional style for Badge. No background for badge
|
||||
-}
|
||||
noBackground : Style
|
||||
noBackground =
|
||||
cs "mdl-badge--no-background"
|
||||
|
||||
{-| Overlap Badge
|
||||
{-| Optional style for Badge. Overlap Badge
|
||||
-}
|
||||
overlap : Style
|
||||
overlap =
|
||||
cs "mdl-badge--overlap"
|
||||
|
||||
|
||||
{-| Style function for Badge
|
||||
|
||||
First parameter will set Badge options. See Options for more info.
|
||||
Last parameter will set a value to data-badge="value". Assigns string value to badge
|
||||
{-| Main style for Badge
|
||||
The parameter will set a value to data-badge="value". Assigns string value to badge
|
||||
|
||||
import Material.Badge as Badge
|
||||
|
||||
badgeStyleList : List Style
|
||||
badgeStyleList = Badge.badgeStyle { overlap = False, noBackground = False} "3"
|
||||
badgeStyle : Style
|
||||
badgeStyle = Badge.withBadge "3"
|
||||
-}
|
||||
withBadge : String -> Style
|
||||
withBadge databadge =
|
||||
|
|
|
@ -72,6 +72,14 @@ classOf style =
|
|||
_ -> Nothing
|
||||
|
||||
|
||||
flatten : Style -> List Style -> List Style
|
||||
flatten style styles =
|
||||
case style of
|
||||
Multiple styles' ->
|
||||
List.foldl flatten styles' styles
|
||||
style ->
|
||||
style :: styles
|
||||
|
||||
{-| Handle the common case of setting attributes of a standard Html node
|
||||
from a List Style. Use like this:
|
||||
|
||||
|
@ -90,16 +98,16 @@ Note that if you do specify `style`, `class`, or `classList` attributes in
|
|||
styled : (List Attribute -> a) -> List Style -> List Attribute -> a
|
||||
styled ctor styles attrs =
|
||||
let
|
||||
multipleStyles = (List.filterMap multipleOf styles)
|
||||
-- multipleStyles = (List.filterMap multipleOf styles)
|
||||
-- could need some help on how to proceed here
|
||||
|
||||
-- (List.filterMap multipleOf styles)
|
||||
styleAttrs = (List.filterMap attrOf styles)
|
||||
flatStyles = List.foldl flatten [] styles
|
||||
-- (List.filterMap multipleOf styles)
|
||||
styleAttrs = (List.filterMap attrOf flatStyles)
|
||||
|> List.map (\attrib -> Html.Attributes.attribute (fst attrib) ( snd attrib))
|
||||
in
|
||||
ctor
|
||||
( Html.Attributes.style (List.filterMap cssOf styles)
|
||||
:: Html.Attributes.class (String.join " " (List.filterMap classOf styles))
|
||||
( Html.Attributes.style (List.filterMap cssOf flatStyles)
|
||||
:: Html.Attributes.class (String.join " " (List.filterMap classOf flatStyles))
|
||||
:: List.append attrs styleAttrs
|
||||
)
|
||||
|
||||
|
|
Loading…
Reference in a new issue