mirror of
https://github.com/correl/elm-mdl.git
synced 2024-12-18 03:00:11 +00:00
Using separate size Style values
This commit is contained in:
parent
abd5fdf1b8
commit
1ad2eb9d3f
1 changed files with 22 additions and 19 deletions
|
@ -1,6 +1,5 @@
|
||||||
module Material.Icon
|
module Material.Icon
|
||||||
( Size(..)
|
( size18, size24, size36, size48
|
||||||
, iconSize
|
|
||||||
, view
|
, view
|
||||||
, i
|
, i
|
||||||
) where
|
) where
|
||||||
|
@ -16,7 +15,7 @@ This implementation assumes that you have
|
||||||
|
|
||||||
or an equivalent means of loading the icons in your HTML header.
|
or an equivalent means of loading the icons in your HTML header.
|
||||||
|
|
||||||
@docs i, view, Size, iconSize
|
@docs i, view, size18, size24, size36, size48
|
||||||
-}
|
-}
|
||||||
|
|
||||||
|
|
||||||
|
@ -24,25 +23,29 @@ import Html exposing (i, text, Html, Attribute)
|
||||||
import Html.Attributes exposing (class)
|
import Html.Attributes exposing (class)
|
||||||
import Material.Style exposing (Style, cs, styled)
|
import Material.Style exposing (Style, cs, styled)
|
||||||
|
|
||||||
|
{-| Icon size styling to indicate their pixel size. This style gives a size of 18px.
|
||||||
{-| Size of an icon. Constructors indicate their pixel size, i.e.,
|
|
||||||
`S18` is 18px. The constructor `S` gives you the default size, 24px.
|
|
||||||
-}
|
-}
|
||||||
type Size
|
size18 : Style
|
||||||
= S18 | S24 | S36 | S48 | S
|
size18 =
|
||||||
|
cs "md-18"
|
||||||
|
|
||||||
|
{-| Icon size styling to indicate their pixel size. This style gives a size of 24px.
|
||||||
{-| Icon size styling. This style can be omitted for the default size style `S`.
|
|
||||||
-}
|
-}
|
||||||
iconSize : Size -> Style
|
size24 : Style
|
||||||
iconSize size =
|
size24 =
|
||||||
case size of
|
cs "md-24"
|
||||||
S18 -> cs "md-18"
|
|
||||||
S24 -> cs "md-24"
|
|
||||||
S36 -> cs "md-36"
|
|
||||||
S48 -> cs "md-48"
|
|
||||||
S -> cs ""
|
|
||||||
|
|
||||||
|
{-| Icon size styling to indicate their pixel size. This style gives a size of 36px.
|
||||||
|
-}
|
||||||
|
size36 : Style
|
||||||
|
size36 =
|
||||||
|
cs "md-36"
|
||||||
|
|
||||||
|
{-| Icon size styling to indicate their pixel size. This style gives a size of 48px.
|
||||||
|
-}
|
||||||
|
size48 : Style
|
||||||
|
size48 =
|
||||||
|
cs "md-48"
|
||||||
|
|
||||||
{-| View function for icons. Supply the
|
{-| View function for icons. Supply the
|
||||||
[Material Icons Library](https://design.google.com/icons/) name as
|
[Material Icons Library](https://design.google.com/icons/) name as
|
||||||
|
@ -59,7 +62,7 @@ no attributes:
|
||||||
import Material.Icon as Icon
|
import Material.Icon as Icon
|
||||||
|
|
||||||
icon : Html
|
icon : Html
|
||||||
icon = Icon.view "trending_flat" [Icon.iconSize Icon.S48] []
|
icon = Icon.view "trending_flat" [Icon.size48] []
|
||||||
|
|
||||||
This function will override any `class` set in `List Attribute`.
|
This function will override any `class` set in `List Attribute`.
|
||||||
-}
|
-}
|
||||||
|
|
Loading…
Reference in a new issue