2016-03-25 22:52:49 +00:00
|
|
|
module Demo.Badges (..) where
|
2016-03-17 21:30:49 +00:00
|
|
|
|
|
|
|
|
import Html exposing (..)
|
2016-03-23 09:34:40 +00:00
|
|
|
import Material.Badge as Badge
|
2016-03-31 19:58:30 +00:00
|
|
|
import Material.Style exposing (styled)
|
2016-03-24 20:15:14 +00:00
|
|
|
import Material.Icon as Icon
|
2016-03-25 22:52:49 +00:00
|
|
|
|
|
|
|
|
|
2016-03-23 09:34:40 +00:00
|
|
|
-- VIEW
|
2016-03-17 21:30:49 +00:00
|
|
|
|
2016-03-25 22:52:49 +00:00
|
|
|
|
2016-03-17 21:30:49 +00:00
|
|
|
view : List Html
|
2016-03-25 22:52:49 +00:00
|
|
|
view =
|
|
|
|
|
[ div
|
|
|
|
|
[]
|
|
|
|
|
[ p [] []
|
|
|
|
|
, 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.withBadge "♥" ] [] [ text "Span with HTML symbol - Black heart suit" ]
|
|
|
|
|
, p [] []
|
|
|
|
|
, styled span [ Badge.withBadge "→" ] [] [ text "Span with HTML symbol - Rightwards arrow" ]
|
|
|
|
|
, p [] []
|
|
|
|
|
, styled span [ Badge.withBadge "Δ" ] [] [ text "Span with HTML symbol - Delta" ]
|
|
|
|
|
, p [] []
|
|
|
|
|
, span [] [ text "Icon with badge" ]
|
|
|
|
|
, Icon.view "face" [ Icon.size24, Badge.withBadge "33", Badge.overlap ] []
|
|
|
|
|
, Icon.view "face" [ Icon.size48, Badge.withBadge "33", Badge.overlap ] []
|
|
|
|
|
]
|
|
|
|
|
]
|
