github/elm-mdl
1
0
Fork 0
mirror of https://github.com/correl/elm-mdl.git synced 2024-12-18 03:00:11 +00:00
Code Issues Projects Releases Packages Wiki Activity

Updates badge to use Style implementation

Browse source
This commit is contained in:
Håkon Rossebø 2016-03-23 10:31:31 +01:00
parent d05ca57a00
commit ced0d21dcb
1 changed files with 20 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
src/Material/Badge.elm
View file

@ -1,8 +1,7 @@
module Material.Badge module Material.Badge
( Model ( Model
, view , badgeStyle
, viewDefault , badgeStyleDefault
, BadgeInfo
) where ) where
{-| From the [Material Design Lite documentation](http://www.getmdl.io/components/#badges-section): {-| From the [Material Design Lite documentation](http://www.getmdl.io/components/#badges-section):
@ -31,18 +30,12 @@ module Material.Badge
@docs viewDefault, view, BadgeInfo, Options @docs viewDefault, view, BadgeInfo, Options
-} -}
import String
import Html exposing (Attribute) import Html exposing (Attribute)
import Html.Attributes exposing (attribute) import Html.Attributes exposing (attribute)
import Material.Style exposing (Style, cs, cs', styled, attrib)
{-| Internal Type used by other elements. Not sure if this should be documented.
-}
type alias BadgeInfo =
{ classes : String
, dataBadge : Attribute
}
{-| Model for Badge {-| Model for Badge
ovelap: Bool to set css class - mdl-badge--overlap. Make the badge overlap with its container ovelap: Bool to set css class - mdl-badge--overlap. Make the badge overlap with its container
noBackground: Bool to set css class - mdl-badge--no-background. Applies open-circle effect to badge noBackground: Bool to set css class - mdl-badge--no-background. Applies open-circle effect to badge
@ -58,39 +51,40 @@ model =
, noBackground = False , noBackground = False
} }
{-| View function for Badge
{-| Style function for Badge
First parameter will set Badge options. See Options for more info. 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 Last parameter will set a value to data-badge="value". Assigns string value to badge
import Material.Badge as Badge import Material.Badge as Badge
badgeInfo : Badge.BadgeInfo badgeStyleList : List Style
badgeInfo = Badge.view { overlap = False, noBackground = False} "3" badgeStyleList = Badge.badgeStyle { overlap = False, noBackground = False} "3"
-} -}
view : Model -> String -> BadgeInfo badgeStyle : Model -> String -> List Style
view model databadge = badgeStyle model databadge =
let classes = let classes =
[ [
{css = " mdl-badge", show = True} {css = "mdl-badge", show = True}
, {css = " mdl-badge--no-background", show = model.noBackground} , {css = "mdl-badge--no-background", show = model.noBackground}
, {css = " mdl-badge--overlap", show = model.overlap} , {css = "mdl-badge--overlap", show = model.overlap}
] ]
|> List.filter .show |> List.filter .show
|> List.map .css |> List.map .css
|> List.foldl (++) "" |> String.join " "
in in
{ classes = " mdl-badge" ++ classes, dataBadge = attribute "data-badge" databadge} [cs classes, attrib "data-badge" databadge]
{-| Create BadgeInfo with default values {-| Create Badge Style List with default values
Parameter will set a value to data-badge="value". Assigns string value to badge Parameter will set a value to data-badge="value". Assigns string value to badge
import Material.Badge as Badge import Material.Badge as Badge
badgeInfo : Badge.BadgeInfo badgeStyleListDefault : List Style
badgeInfo = Badge.viewDefault "3" badgeStyleListDefault = Badge.badgeStyleDefault "3"
-} -}
viewDefault : String -> BadgeInfo badgeStyleDefault : String -> List Style
viewDefault databadge = view model databadge badgeStyleDefault databadge = badgeStyle model databadge