diff --git a/examples/Demo/Badges.elm b/examples/Demo/Badges.elm index 720cf89..422085e 100644 --- a/examples/Demo/Badges.elm +++ b/examples/Demo/Badges.elm @@ -10,7 +10,7 @@ view : List Html view = [ h1 [][text "Badges"], - Icon.viewWithOptions "add" Icon.S18 [] { badgeInfo = Just (Badge.viewDefault "16")}, + Icon.viewWithOptions "face" Icon.S18 [] { badgeInfo = Just (Badge.viewDefault "16")}, Icon.viewWithOptions "add" Icon.S18 [] { badgeInfo = Just (Badge.view { overlap = False, noBackground = False} "99")}, Icon.viewWithOptions "add" Icon.S18 [] { badgeInfo = Just (Badge.view { overlap = False, noBackground = True} "4")}, Icon.view "add" Icon.S18 [], diff --git a/src/Material/Badge.elm b/src/Material/Badge.elm index b1eeb0e..bb1ecb1 100644 --- a/src/Material/Badge.elm +++ b/src/Material/Badge.elm @@ -1,5 +1,5 @@ module Material.Badge - ( Options + ( Model , view , viewDefault , BadgeInfo @@ -7,16 +7,26 @@ module Material.Badge {-| From the [Material Design Lite documentation](http://www.getmdl.io/components/#badges-section): -The Material Design Lite (MDL) badge component is an onscreen notification element. A badge consists of a small circle, typically containing a number or other characters, that appears in proximity to another object. A badge can be both a notifier that there are additional items associated with an object and an indicator of how many items there are. - -You can use a badge to unobtrusively draw the user's attention to items they might not otherwise notice, or to emphasize that items may need their attention. For example: - -A "New messages" notification might be followed by a badge containing the number of unread messages. -A "You have unpurchased items in your shopping cart" reminder might include a badge showing the number of items in the cart. -A "Join the discussion!" button might have an accompanying badge indicating the number of users currently participating in the discussion. -A badge is almost always positioned near a link so that the user has a convenient way to access the additional information indicated by the badge. However, depending on the intent, the badge itself may or may not be part of the link. - -Badges are a new feature in user interfaces, and provide users with a visual clue to help them discover additional relevant content. Their design and use is therefore an important factor in the overall user experience. +> The Material Design Lite (MDL) badge component is an onscreen notification element. +> A badge consists of a small circle, typically containing a number or other characters, +> that appears in proximity to another object. A badge can be both a notifier that there +> are additional items associated with an object and an indicator of how many items there are. +> +> You can use a badge to unobtrusively draw the user's attention to items they might not +> otherwise notice, or to emphasize that items may need their attention. For example: +> +> A "New messages" notification might be followed by a badge containing the number of unread messages. +> A "You have unpurchased items in your shopping cart" reminder might include a badge +> showing the number of items in the cart. +> A "Join the discussion!" button might have an accompanying badge indicating the number of +> users currently participating in the discussion. +> A badge is almost always positioned near a link so that the user has a convenient way to access +> the additional information indicated by the badge. However, depending on the intent, the +> badge itself may or may not be part of the link. +> +> Badges are a new feature in user interfaces, and provide users with a visual clue to help them +> discover additional relevant content. Their design and use is therefore an important +> factor in the overall user experience. @docs viewDefault, view, BadgeInfo, Options -} @@ -33,19 +43,18 @@ type alias BadgeInfo = , dataBadge : Attribute } -{-| Options for Badge +{-| 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 -} -type alias Options = +type alias Model = { overlap : Bool , noBackground : Bool } -defaultOptions : Options -defaultOptions = - { - overlap = True +model : Model +model = + { overlap = True , noBackground = False } @@ -59,13 +68,13 @@ defaultOptions = badgeInfo : Badge.BadgeInfo badgeInfo = Badge.view { overlap = False, noBackground = False} "3" -} -view : Options -> String -> BadgeInfo -view options databadge = +view : Model -> String -> BadgeInfo +view model databadge = let classes = [ {css = " mdl-badge", show = True} - , {css = " mdl-badge--no-background", show = options.noBackground} - , {css = " mdl-badge--overlap", show = options.overlap} + , {css = " mdl-badge--no-background", show = model.noBackground} + , {css = " mdl-badge--overlap", show = model.overlap} ] |> List.filter .show |> List.map .css @@ -84,4 +93,4 @@ view options databadge = badgeInfo = Badge.viewDefault "3" -} viewDefault : String -> BadgeInfo -viewDefault databadge = view defaultOptions databadge +viewDefault databadge = view model databadge diff --git a/src/Material/Icon.elm b/src/Material/Icon.elm index 43202be..bfb3570 100644 --- a/src/Material/Icon.elm +++ b/src/Material/Icon.elm @@ -37,6 +37,9 @@ type alias Options = badgeInfo : Maybe Badge.BadgeInfo } +{-| default options +See Badge on how to create a badge. +-} defaultOptions : Options defaultOptions = {