This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.

Material.Badge

From the Material Design Lite documentation:

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.

Refer to this site for a live demo.

add : String -> Property c m

Add a badge to the containing element.

noBackground : Property c m

No background for badge.

overlap : Property c m

Badge overlaps text/contents.

module Material.Badge
    exposing
        ( noBackground
        , overlap
        , add
        )

{-| 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.

Refer to
[this site](https://debois.github.io/elm-mdl/#badges)
for a live demo.

@docs add, noBackground, overlap
-}

import Material.Options as Options exposing (Property, cs, many)


{-| No background for badge.
-}
noBackground : Property c m
noBackground =
    cs "mdl-badge--no-background"


{-| Badge overlaps text/contents.
-}
overlap : Property c m
overlap =
    cs "mdl-badge--overlap"


{-| Add a badge to the containing element.
-}
add : String -> Property c m
add str =
    Options.many
        [ Options.data "badge" str
        , cs "mdl-badge"
        ]