mirror of
https://github.com/correl/elm-mdl.git
synced 2024-12-18 03:00:11 +00:00
Updates badge to use Style implementation
This commit is contained in:
parent
d05ca57a00
commit
ced0d21dcb
1 changed files with 20 additions and 26 deletions
|
@ -1,8 +1,7 @@
|
|||
module Material.Badge
|
||||
( Model
|
||||
, view
|
||||
, viewDefault
|
||||
, BadgeInfo
|
||||
, badgeStyle
|
||||
, badgeStyleDefault
|
||||
) where
|
||||
|
||||
{-| 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
|
||||
-}
|
||||
|
||||
|
||||
import String
|
||||
import Html 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
|
||||
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
|
||||
|
@ -58,18 +51,19 @@ model =
|
|||
, noBackground = False
|
||||
}
|
||||
|
||||
{-| View function for Badge
|
||||
|
||||
{-| 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
|
||||
|
||||
import Material.Badge as Badge
|
||||
|
||||
badgeInfo : Badge.BadgeInfo
|
||||
badgeInfo = Badge.view { overlap = False, noBackground = False} "3"
|
||||
badgeStyleList : List Style
|
||||
badgeStyleList = Badge.badgeStyle { overlap = False, noBackground = False} "3"
|
||||
-}
|
||||
view : Model -> String -> BadgeInfo
|
||||
view model databadge =
|
||||
badgeStyle : Model -> String -> List Style
|
||||
badgeStyle model databadge =
|
||||
let classes =
|
||||
[
|
||||
{css = "mdl-badge", show = True}
|
||||
|
@ -78,19 +72,19 @@ view model databadge =
|
|||
]
|
||||
|> List.filter .show
|
||||
|> List.map .css
|
||||
|> List.foldl (++) ""
|
||||
|> String.join " "
|
||||
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
|
||||
|
||||
import Material.Badge as Badge
|
||||
|
||||
badgeInfo : Badge.BadgeInfo
|
||||
badgeInfo = Badge.viewDefault "3"
|
||||
badgeStyleListDefault : List Style
|
||||
badgeStyleListDefault = Badge.badgeStyleDefault "3"
|
||||
-}
|
||||
viewDefault : String -> BadgeInfo
|
||||
viewDefault databadge = view model databadge
|
||||
badgeStyleDefault : String -> List Style
|
||||
badgeStyleDefault databadge = badgeStyle model databadge
|
||||
|
|
Loading…
Reference in a new issue