mirror of
https://github.com/Orasund/elm-ui-widgets.git
synced 2024-11-22 04:58:49 +03:00
finished lists #10
This commit is contained in:
Lucas Payr
parent
6c1bada865
commit
2390c2810c
BIN
docs/assets/elm.png
Normal file
BIN
docs/assets/elm.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
@ -15,7 +15,7 @@ import Example.Switch as Switch
|
||||
import Example.Tab as Tab
|
||||
import Example.TextInput as TextInput
|
||||
import Framework.Grid as Grid
|
||||
import View.Test as Test
|
||||
import View.States as States
|
||||
|
||||
|
||||
type Example
|
||||
@ -178,40 +178,40 @@ toTests : Example -> msg -> Style msg -> List ( String, Element msg )
|
||||
toTests example =
|
||||
case example of
|
||||
ButtonExample ->
|
||||
Test.button
|
||||
States.button
|
||||
|
||||
SwitchExample ->
|
||||
Test.switch
|
||||
States.switch
|
||||
|
||||
SelectExample ->
|
||||
Test.select
|
||||
States.select
|
||||
|
||||
MultiSelectExample ->
|
||||
Test.multiSelect
|
||||
States.multiSelect
|
||||
|
||||
TabExample ->
|
||||
Test.tab
|
||||
States.tab
|
||||
|
||||
SortTableExample ->
|
||||
Test.sortTable
|
||||
States.sortTable
|
||||
|
||||
ModalExample ->
|
||||
Test.modal
|
||||
States.modal
|
||||
|
||||
DialogExample ->
|
||||
Test.dialog
|
||||
States.dialog
|
||||
|
||||
TextInputExample ->
|
||||
Test.textInput
|
||||
States.textInput
|
||||
|
||||
ListExample ->
|
||||
Test.list
|
||||
States.list
|
||||
|
||||
ProgressIndicatorExample ->
|
||||
Test.progressIndicator
|
||||
States.progressIndicator
|
||||
|
||||
IconExample ->
|
||||
Test.icon
|
||||
States.icon
|
||||
|
||||
|
||||
type Msg
|
||||
|
||||
@ -33,6 +33,7 @@ import Widget
|
||||
, TextInputStyle
|
||||
, HeaderStyle
|
||||
, TextItemStyle
|
||||
, ImageItemStyle
|
||||
, ExpansionItemStyle
|
||||
)
|
||||
import Widget.Snackbar exposing (SnackbarStyle)
|
||||
@ -63,6 +64,7 @@ style palette =
|
||||
, insetHeader = Material.insetHeader palette
|
||||
, fullBleedHeader = Material.fullBleedHeader palette
|
||||
, textItem = Material.textItem palette
|
||||
, imageItem = Material.imageItem palette
|
||||
, expansionItem = Material.expansionItem Material.defaultPalette
|
||||
}
|
||||
|
||||
@ -86,11 +88,12 @@ type alias Style msg =
|
||||
, selectButton : ButtonStyle msg
|
||||
, progressIndicator : ProgressIndicatorStyle msg
|
||||
, layout : LayoutStyle msg
|
||||
, insetDivider : ItemStyle (DividerStyle msg)
|
||||
, middleDivider : ItemStyle (DividerStyle msg)
|
||||
, fullBleedDivider : ItemStyle (DividerStyle msg)
|
||||
, insetHeader : ItemStyle (HeaderStyle msg)
|
||||
, fullBleedHeader : ItemStyle (HeaderStyle msg)
|
||||
, textItem : ItemStyle (TextItemStyle msg)
|
||||
, insetDivider : ItemStyle (DividerStyle msg) msg
|
||||
, middleDivider : ItemStyle (DividerStyle msg) msg
|
||||
, fullBleedDivider : ItemStyle (DividerStyle msg) msg
|
||||
, insetHeader : ItemStyle (HeaderStyle msg) msg
|
||||
, fullBleedHeader : ItemStyle (HeaderStyle msg) msg
|
||||
, textItem : ItemStyle (TextItemStyle msg) msg
|
||||
, imageItem : ItemStyle (ImageItemStyle msg) msg
|
||||
, expansionItem : ExpansionItemStyle msg
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@ module Example.List exposing (Model, Msg, init, subscriptions, update, view)
|
||||
import Browser
|
||||
import Element exposing (Element)
|
||||
import Widget
|
||||
import Widget exposing (ColumnStyle, DividerStyle,ExpansionItemStyle, ItemStyle, HeaderStyle,TextItemStyle)
|
||||
import Widget exposing (ColumnStyle,SwitchStyle, DividerStyle,ExpansionItemStyle,ImageItemStyle, ItemStyle, HeaderStyle,TextItemStyle)
|
||||
import Widget.Style.Material as Material
|
||||
import FeatherIcons
|
||||
import Widget.Icon as Icon
|
||||
@ -13,13 +13,15 @@ import Widget.Style.Material.Color as MaterialColor
|
||||
type alias Style style msg =
|
||||
{ style
|
||||
| cardColumn : ColumnStyle msg
|
||||
, insetDivider : ItemStyle (DividerStyle msg)
|
||||
, middleDivider : ItemStyle (DividerStyle msg)
|
||||
, fullBleedDivider : ItemStyle (DividerStyle msg)
|
||||
, insetHeader : ItemStyle (HeaderStyle msg)
|
||||
, fullBleedHeader : ItemStyle (HeaderStyle msg)
|
||||
, textItem : ItemStyle (TextItemStyle msg)
|
||||
, insetDivider : ItemStyle (DividerStyle msg) msg
|
||||
, middleDivider : ItemStyle (DividerStyle msg) msg
|
||||
, fullBleedDivider : ItemStyle (DividerStyle msg) msg
|
||||
, insetHeader : ItemStyle (HeaderStyle msg) msg
|
||||
, fullBleedHeader : ItemStyle (HeaderStyle msg) msg
|
||||
, textItem : ItemStyle (TextItemStyle msg) msg
|
||||
, imageItem : ItemStyle (ImageItemStyle msg) msg
|
||||
, expansionItem : ExpansionItemStyle msg
|
||||
, switch : SwitchStyle msg
|
||||
}
|
||||
|
||||
|
||||
@ -32,7 +34,9 @@ materialStyle =
|
||||
, insetHeader = Material.insetHeader Material.defaultPalette
|
||||
, fullBleedHeader = Material.fullBleedHeader Material.defaultPalette
|
||||
, textItem = Material.textItem Material.defaultPalette
|
||||
, imageItem = Material.imageItem Material.defaultPalette
|
||||
, expansionItem = Material.expansionItem Material.defaultPalette
|
||||
, switch = Material.switch Material.defaultPalette
|
||||
}
|
||||
|
||||
|
||||
@ -63,6 +67,8 @@ subscriptions : Model -> Sub Msg
|
||||
subscriptions _ =
|
||||
Sub.none
|
||||
|
||||
|
||||
|
||||
{-| You can remove the msgMapper. But by doing so, make sure to also change `msg` to `Msg` in the line below.
|
||||
-}
|
||||
view : (Msg -> msg) -> Style style msg -> Model -> Element msg
|
||||
@ -80,6 +86,16 @@ view msgMapper style (IsExpanded isExpanded) =
|
||||
FeatherIcons.triangle
|
||||
|> Icon.elmFeather FeatherIcons.toHtml
|
||||
, text = "Item with Icon"
|
||||
, content = \{size,color} ->
|
||||
Element.none
|
||||
}
|
||||
, Widget.imageItem style.imageItem
|
||||
{ onPress = Nothing
|
||||
, image = Element.image [Element.width <| Element.px <| 40, Element.height <| Element.px <| 40]
|
||||
{ src = "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Elm_logo.svg/1024px-Elm_logo.svg.png"
|
||||
, description = "Elm logo"
|
||||
}
|
||||
, text = "Item with Image"
|
||||
, content = \{size,color} ->
|
||||
"1."
|
||||
|> Element.text
|
||||
@ -102,6 +118,23 @@ view msgMapper style (IsExpanded isExpanded) =
|
||||
,Font.size size
|
||||
]
|
||||
}
|
||||
, Widget.textItem style.textItem
|
||||
{ onPress = Nothing
|
||||
, icon =
|
||||
FeatherIcons.triangle
|
||||
|> Icon.elmFeather FeatherIcons.toHtml
|
||||
, text = "Clickable Item with Switch"
|
||||
, content = \{size,color} ->
|
||||
Widget.switch style.switch
|
||||
{ description = "Click Me"
|
||||
, active = isExpanded
|
||||
, onPress =
|
||||
not isExpanded
|
||||
|> ToggleCollapsable
|
||||
|> msgMapper
|
||||
|> Just
|
||||
}
|
||||
}
|
||||
, Widget.divider style.fullBleedDivider
|
||||
]++ (Widget.expansionItem style.expansionItem
|
||||
{ onToggle = ToggleCollapsable >> msgMapper
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
module View.Test exposing (button, dialog, icon, list, modal, multiSelect, progressIndicator, select, sortTable, switch, tab, textInput)
|
||||
module View.States exposing (button, dialog, icon, list, modal, multiSelect, progressIndicator, select, sortTable, switch, tab, textInput)
|
||||
|
||||
import Data.Style exposing (Style)
|
||||
import Element exposing (Element)
|
||||
@ -28,7 +28,7 @@ type alias ButtonStyle msg =
|
||||
type alias Button msg =
|
||||
{ text : String
|
||||
, onPress : Maybe msg
|
||||
, icon : Icon
|
||||
, icon : Icon msg
|
||||
}
|
||||
|
||||
|
||||
@ -59,7 +59,6 @@ iconButton style { onPress, text, icon } =
|
||||
else
|
||||
style.content.content.icon.otherwise
|
||||
)
|
||||
|> Element.map never
|
||||
|> Element.el style.content.elementRow
|
||||
}
|
||||
|
||||
@ -97,7 +96,6 @@ button style { onPress, text, icon } =
|
||||
else
|
||||
style.content.content.icon.otherwise
|
||||
)
|
||||
|> Element.map never
|
||||
, Element.text text |> Element.el style.content.content.text.contentText
|
||||
]
|
||||
}
|
||||
|
||||
@ -25,8 +25,8 @@ type alias ExpansionPanelStyle msg =
|
||||
, text : { elementText : List (Attribute msg) }
|
||||
}
|
||||
}
|
||||
, expandIcon : Icon
|
||||
, collapseIcon : Icon
|
||||
, expandIcon : Icon msg
|
||||
, collapseIcon : Icon msg
|
||||
, icon : IconStyle
|
||||
}
|
||||
}
|
||||
@ -37,7 +37,7 @@ type alias ExpansionPanelStyle msg =
|
||||
|
||||
type alias ExpansionPanel msg =
|
||||
{ onToggle : Bool -> msg
|
||||
, icon : Icon
|
||||
, icon : Icon msg
|
||||
, text : String
|
||||
, content : Element msg
|
||||
, isExpanded : Bool
|
||||
@ -57,13 +57,11 @@ expansionPanel style model =
|
||||
[ Element.row style.content.panel.content.label.elementRow
|
||||
[ model.icon
|
||||
style.content.panel.content.label.content.icon
|
||||
|> Element.map never
|
||||
, model.text
|
||||
|> Element.text
|
||||
|> Element.el style.content.panel.content.label.content.text.elementText
|
||||
]
|
||||
, Element.map never <|
|
||||
if model.isExpanded then
|
||||
, if model.isExpanded then
|
||||
style.content.panel.content.collapseIcon
|
||||
style.content.panel.content.icon
|
||||
|
||||
@ -80,10 +78,10 @@ expansionPanel style model =
|
||||
|
||||
|
||||
expansionPanelItem :
|
||||
ItemStyle (ExpansionPanelStyle msg)
|
||||
ItemStyle (ExpansionPanelStyle msg) msg
|
||||
->
|
||||
{ onToggle : Bool -> msg
|
||||
, icon : Icon
|
||||
, icon : Icon msg
|
||||
, text : String
|
||||
, content : Element msg
|
||||
, isExpanded : Bool
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
module Internal.Item exposing (DividerStyle, HeaderStyle, ExpansionItemStyle,ExpansionItem, Item, ItemStyle, TextItem, TextItemStyle,expansionItem, divider, headerItem, item, textItem, toItem)
|
||||
module Internal.Item exposing (DividerStyle, HeaderStyle, ImageItemStyle, ImageItem, imageItem, ExpansionItemStyle,ExpansionItem, Item, ItemStyle, TextItem, TextItemStyle,expansionItem, divider, headerItem, item, textItem, toItem)
|
||||
|
||||
import Element exposing (Attribute, Element)
|
||||
import Element.Input as Input
|
||||
@ -6,20 +6,17 @@ import Widget.Icon as Icon exposing (Icon, IconStyle)
|
||||
import Widget.Style.Customize exposing (content)
|
||||
|
||||
|
||||
{-| -}
|
||||
type alias ItemStyle content =
|
||||
{ element : List (Attribute Never)
|
||||
type alias ItemStyle content msg =
|
||||
{ element : List (Attribute msg)
|
||||
, content : content
|
||||
}
|
||||
|
||||
|
||||
{-| -}
|
||||
type alias DividerStyle msg =
|
||||
{ element : List (Attribute msg)
|
||||
}
|
||||
|
||||
|
||||
{-| -}
|
||||
type alias HeaderStyle msg =
|
||||
{ elementColumn : List (Attribute msg)
|
||||
, content :
|
||||
@ -29,7 +26,6 @@ type alias HeaderStyle msg =
|
||||
}
|
||||
|
||||
|
||||
{-| -}
|
||||
type alias TextItemStyle msg =
|
||||
{ elementButton : List (Attribute msg)
|
||||
, ifDisabled : List (Attribute msg)
|
||||
@ -47,6 +43,19 @@ type alias TextItemStyle msg =
|
||||
}
|
||||
}
|
||||
|
||||
type alias ImageItemStyle msg =
|
||||
{ elementButton : List (Attribute msg)
|
||||
, ifDisabled : List (Attribute msg)
|
||||
, otherwise : List (Attribute msg)
|
||||
, content :
|
||||
{ elementRow : List (Attribute msg)
|
||||
, content :
|
||||
{ text : { elementText : List (Attribute msg) }
|
||||
, image : { element : List (Attribute msg) }
|
||||
, content : IconStyle
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
type alias Item msg =
|
||||
List (Attribute msg) -> Element msg
|
||||
@ -55,10 +64,16 @@ type alias Item msg =
|
||||
type alias TextItem msg =
|
||||
{ text : String
|
||||
, onPress : Maybe msg
|
||||
, icon : Icon
|
||||
, content : Icon
|
||||
, icon : Icon msg
|
||||
, content : Icon msg
|
||||
}
|
||||
|
||||
type alias ImageItem msg =
|
||||
{ text : String
|
||||
, onPress : Maybe msg
|
||||
, image : Element msg
|
||||
, content : Icon msg
|
||||
}
|
||||
|
||||
item : Element msg -> Item msg
|
||||
item element =
|
||||
@ -69,12 +84,12 @@ item element =
|
||||
(always element)
|
||||
|
||||
|
||||
divider : ItemStyle (DividerStyle msg) -> Item msg
|
||||
divider : ItemStyle (DividerStyle msg) msg -> Item msg
|
||||
divider style =
|
||||
toItem style (\{ element } -> Element.none |> Element.el element)
|
||||
|
||||
|
||||
headerItem : ItemStyle (HeaderStyle msg) -> String -> Item msg
|
||||
headerItem : ItemStyle (HeaderStyle msg) msg -> String -> Item msg
|
||||
headerItem style title =
|
||||
toItem style
|
||||
(\{ elementColumn, content } ->
|
||||
@ -88,7 +103,7 @@ headerItem style title =
|
||||
)
|
||||
|
||||
|
||||
textItem : ItemStyle (TextItemStyle msg) -> TextItem msg -> Item msg
|
||||
textItem : ItemStyle (TextItemStyle msg) msg -> TextItem msg -> Item msg
|
||||
textItem s { onPress, text, icon, content } =
|
||||
toItem s
|
||||
(\style ->
|
||||
@ -101,7 +116,6 @@ textItem s { onPress, text, icon, content } =
|
||||
{ onPress = onPress
|
||||
, label =
|
||||
[ icon style.content.content.icon.content
|
||||
|> Element.map never
|
||||
|> Element.el style.content.content.icon.element
|
||||
, text
|
||||
|> Element.text
|
||||
@ -109,20 +123,44 @@ textItem s { onPress, text, icon, content } =
|
||||
|> Element.paragraph []
|
||||
|> Element.el style.content.content.text.elementText
|
||||
, content style.content.content.content
|
||||
|> Element.map never
|
||||
]
|
||||
|> Element.row style.content.elementRow
|
||||
}
|
||||
)
|
||||
|
||||
imageItem : ItemStyle (ImageItemStyle msg) msg -> ImageItem msg -> Item msg
|
||||
imageItem s { onPress, text, image, content } =
|
||||
toItem s
|
||||
(\style ->
|
||||
Input.button (style.elementButton ++ (if onPress == Nothing then
|
||||
style.ifDisabled
|
||||
|
||||
else
|
||||
style.otherwise
|
||||
))
|
||||
{ onPress = onPress
|
||||
, label =
|
||||
[ image
|
||||
|> Element.el style.content.content.image.element
|
||||
, text
|
||||
|> Element.text
|
||||
|> List.singleton
|
||||
|> Element.paragraph []
|
||||
|> Element.el style.content.content.text.elementText
|
||||
, content style.content.content.content
|
||||
]
|
||||
|> Element.row style.content.elementRow
|
||||
}
|
||||
)
|
||||
|
||||
type alias ExpansionItemStyle msg =
|
||||
{ item : ItemStyle (TextItemStyle msg)
|
||||
, expandIcon : Icon
|
||||
, collapseIcon : Icon
|
||||
{ item : ItemStyle (TextItemStyle msg) msg
|
||||
, expandIcon : Icon msg
|
||||
, collapseIcon : Icon msg
|
||||
}
|
||||
|
||||
type alias ExpansionItem msg =
|
||||
{ icon : Icon
|
||||
{ icon : Icon msg
|
||||
, text : String
|
||||
, onToggle : Bool -> msg
|
||||
, content : List (Item msg)
|
||||
@ -146,9 +184,9 @@ expansionItem s { icon, text,onToggle,content,isExpanded} =
|
||||
)
|
||||
:: (if isExpanded then content else [])
|
||||
|
||||
toItem : ItemStyle style -> (style -> Element msg) -> Item msg
|
||||
toItem : ItemStyle style msg -> (style -> Element msg) -> Item msg
|
||||
toItem style element =
|
||||
\attr ->
|
||||
element style.content
|
||||
|> Element.el
|
||||
(attr ++ (style.element |> List.map (Element.mapAttribute never)))
|
||||
(attr ++ (style.element))
|
||||
@ -11,11 +11,11 @@ import Widget.Style.Customize as Customize
|
||||
type alias RowStyle msg =
|
||||
{ elementRow : List (Attribute msg)
|
||||
, content :
|
||||
{ element : List (Attribute Never)
|
||||
, ifFirst : List (Attribute Never)
|
||||
, ifLast : List (Attribute Never)
|
||||
, ifSingleton : List (Attribute Never)
|
||||
, otherwise : List (Attribute Never)
|
||||
{ element : List (Attribute msg)
|
||||
, ifFirst : List (Attribute msg)
|
||||
, ifLast : List (Attribute msg)
|
||||
, ifSingleton : List (Attribute msg)
|
||||
, otherwise : List (Attribute msg)
|
||||
}
|
||||
}
|
||||
|
||||
@ -24,21 +24,21 @@ type alias RowStyle msg =
|
||||
type alias ColumnStyle msg =
|
||||
{ elementColumn : List (Attribute msg)
|
||||
, content :
|
||||
{ element : List (Attribute Never)
|
||||
, ifFirst : List (Attribute Never)
|
||||
, ifLast : List (Attribute Never)
|
||||
, ifSingleton : List (Attribute Never)
|
||||
, otherwise : List (Attribute Never)
|
||||
{ element : List (Attribute msg)
|
||||
, ifFirst : List (Attribute msg)
|
||||
, ifLast : List (Attribute msg)
|
||||
, ifSingleton : List (Attribute msg)
|
||||
, otherwise : List (Attribute msg)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
internal :
|
||||
{ element : List (Attribute Never)
|
||||
, ifFirst : List (Attribute Never)
|
||||
, ifLast : List (Attribute Never)
|
||||
, ifSingleton : List (Attribute Never)
|
||||
, otherwise : List (Attribute Never)
|
||||
{ element : List (Attribute msg)
|
||||
, ifFirst : List (Attribute msg)
|
||||
, ifLast : List (Attribute msg)
|
||||
, ifSingleton : List (Attribute msg)
|
||||
, otherwise : List (Attribute msg)
|
||||
}
|
||||
-> List (Item msg)
|
||||
-> List (Element msg)
|
||||
@ -60,7 +60,6 @@ internal style list =
|
||||
else
|
||||
style.otherwise
|
||||
)
|
||||
|> List.map (Element.mapAttribute never)
|
||||
)
|
||||
)
|
||||
|
||||
@ -142,19 +141,14 @@ buttonRow style =
|
||||
internalButton
|
||||
{ element =
|
||||
style.elementRow.content.element
|
||||
|> List.map (Element.mapAttribute never)
|
||||
, ifSingleton =
|
||||
style.elementRow.content.ifSingleton
|
||||
|> List.map (Element.mapAttribute never)
|
||||
, ifFirst =
|
||||
style.elementRow.content.ifFirst
|
||||
|> List.map (Element.mapAttribute never)
|
||||
, ifLast =
|
||||
style.elementRow.content.ifLast
|
||||
|> List.map (Element.mapAttribute never)
|
||||
, otherwise =
|
||||
style.elementRow.content.otherwise
|
||||
|> List.map (Element.mapAttribute never)
|
||||
, content = style.content
|
||||
}
|
||||
>> Element.row style.elementRow.elementRow
|
||||
@ -170,19 +164,14 @@ buttonColumn style =
|
||||
internalButton
|
||||
{ element =
|
||||
style.elementColumn.content.element
|
||||
|> List.map (Element.mapAttribute never)
|
||||
, ifSingleton =
|
||||
style.elementColumn.content.ifSingleton
|
||||
|> List.map (Element.mapAttribute never)
|
||||
, ifFirst =
|
||||
style.elementColumn.content.ifFirst
|
||||
|> List.map (Element.mapAttribute never)
|
||||
, ifLast =
|
||||
style.elementColumn.content.ifLast
|
||||
|> List.map (Element.mapAttribute never)
|
||||
, otherwise =
|
||||
style.elementColumn.content.otherwise
|
||||
|> List.map (Element.mapAttribute never)
|
||||
, content = style.content
|
||||
}
|
||||
>> Element.column style.elementColumn.elementColumn
|
||||
|
||||
@ -6,7 +6,7 @@ import Svg.Attributes
|
||||
import Color exposing (Color)
|
||||
import Widget.Icon exposing (Icon)
|
||||
|
||||
icon : {viewBox:String,size:Int,color:Color} -> List (Svg Never) -> Element Never
|
||||
icon : {viewBox:String,size:Int,color:Color} -> List (Svg msg) -> Element msg
|
||||
icon {viewBox,size,color} =
|
||||
Svg.svg
|
||||
[ Svg.Attributes.height <| String.fromInt size
|
||||
@ -22,7 +22,7 @@ icon {viewBox,size,color} =
|
||||
>> Element.html
|
||||
>> Element.el []
|
||||
|
||||
expand_less : Icon
|
||||
expand_less : Icon msg
|
||||
expand_less { size, color } =
|
||||
icon {viewBox = "0 0 48 48"
|
||||
, size = size
|
||||
@ -36,7 +36,7 @@ expand_less { size, color } =
|
||||
]
|
||||
|
||||
|
||||
expand_more : Icon
|
||||
expand_more : Icon msg
|
||||
expand_more { size, color } =
|
||||
icon {viewBox = "0 0 48 48"
|
||||
, size = size
|
||||
|
||||
@ -6,6 +6,7 @@ module Internal.Material.Item exposing
|
||||
, insetHeader
|
||||
, middleDivider
|
||||
, textItem
|
||||
, imageItem
|
||||
)
|
||||
|
||||
import Color
|
||||
@ -14,7 +15,7 @@ import Element.Background as Background
|
||||
import Element.Border as Border
|
||||
import Element.Font as Font
|
||||
import Html.Attributes as Attributes
|
||||
import Internal.Item exposing (DividerStyle, ExpansionItemStyle, HeaderStyle, ItemStyle, TextItemStyle)
|
||||
import Internal.Item exposing (DividerStyle, ImageItemStyle , ExpansionItemStyle, HeaderStyle, ItemStyle, TextItemStyle)
|
||||
import Internal.Material.Icon as Icon
|
||||
import Internal.Material.Palette exposing (Palette)
|
||||
import Svg
|
||||
@ -23,7 +24,7 @@ import Widget.Icon exposing (Icon)
|
||||
import Widget.Style.Material.Color as MaterialColor
|
||||
import Widget.Style.Material.Typography as Typography
|
||||
|
||||
fullBleedDivider : Palette -> ItemStyle (DividerStyle msg)
|
||||
fullBleedDivider : Palette -> ItemStyle (DividerStyle msg) msg
|
||||
fullBleedDivider _ =
|
||||
{ element =
|
||||
[ Element.width <| Element.fill
|
||||
@ -48,7 +49,7 @@ fullBleedDivider _ =
|
||||
}
|
||||
|
||||
|
||||
insetDivider : Palette -> ItemStyle (DividerStyle msg)
|
||||
insetDivider : Palette -> ItemStyle (DividerStyle msg) msg
|
||||
insetDivider _ =
|
||||
{ element =
|
||||
[ Element.width <| Element.fill
|
||||
@ -78,7 +79,7 @@ insetDivider _ =
|
||||
}
|
||||
|
||||
|
||||
middleDivider : Palette -> ItemStyle (DividerStyle msg)
|
||||
middleDivider : Palette -> ItemStyle (DividerStyle msg) msg
|
||||
middleDivider _ =
|
||||
{ element =
|
||||
[ Element.width <| Element.fill
|
||||
@ -108,7 +109,7 @@ middleDivider _ =
|
||||
}
|
||||
|
||||
|
||||
insetHeader : Palette -> ItemStyle (HeaderStyle msg)
|
||||
insetHeader : Palette -> ItemStyle (HeaderStyle msg) msg
|
||||
insetHeader palette =
|
||||
{ element =
|
||||
[ Element.width <| Element.fill
|
||||
@ -146,7 +147,7 @@ insetHeader palette =
|
||||
}
|
||||
|
||||
|
||||
fullBleedHeader : Palette -> ItemStyle (HeaderStyle msg)
|
||||
fullBleedHeader : Palette -> ItemStyle (HeaderStyle msg) msg
|
||||
fullBleedHeader palette =
|
||||
{ element =
|
||||
[ Element.width <| Element.fill
|
||||
@ -180,7 +181,7 @@ fullBleedHeader palette =
|
||||
}
|
||||
|
||||
|
||||
textItem : Palette -> ItemStyle (TextItemStyle msg)
|
||||
textItem : Palette -> ItemStyle (TextItemStyle msg) msg
|
||||
textItem _ =
|
||||
{ element = [ Element.padding 0 ]
|
||||
, content =
|
||||
@ -237,6 +238,59 @@ textItem _ =
|
||||
}
|
||||
}
|
||||
|
||||
imageItem : Palette -> ItemStyle (ImageItemStyle msg) msg
|
||||
imageItem _ =
|
||||
{ element = [ Element.padding 0 ]
|
||||
, content =
|
||||
{ elementButton =
|
||||
[ Element.width Element.fill
|
||||
, Element.paddingXY 16 8
|
||||
]
|
||||
, ifDisabled =
|
||||
[ Element.mouseDown []
|
||||
, Element.mouseOver []
|
||||
, Element.focused []
|
||||
, Element.htmlAttribute <| Attributes.style "cursor" "default"
|
||||
]
|
||||
, otherwise =
|
||||
[ Element.mouseDown <|
|
||||
[ MaterialColor.gray
|
||||
|> MaterialColor.scaleOpacity MaterialColor.buttonPressedOpacity
|
||||
|> MaterialColor.fromColor
|
||||
|> Background.color
|
||||
]
|
||||
, Element.focused <|
|
||||
[ MaterialColor.gray
|
||||
|> MaterialColor.scaleOpacity MaterialColor.buttonFocusOpacity
|
||||
|> MaterialColor.fromColor
|
||||
|> Background.color
|
||||
]
|
||||
, Element.mouseOver <|
|
||||
[ MaterialColor.gray
|
||||
|> MaterialColor.scaleOpacity MaterialColor.buttonHoverOpacity
|
||||
|> MaterialColor.fromColor
|
||||
|> Background.color
|
||||
]
|
||||
]
|
||||
, content =
|
||||
{ elementRow = [ Element.spacing 16, Element.width Element.fill ]
|
||||
, content =
|
||||
{ text = { elementText = [ Element.width Element.fill
|
||||
] }
|
||||
, image =
|
||||
{ element =
|
||||
[ Element.width <| Element.px 40
|
||||
, Element.height <| Element.px 40
|
||||
]
|
||||
}
|
||||
, content =
|
||||
{ size = 24
|
||||
, color = MaterialColor.gray
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -20,7 +20,7 @@ import Widget.Style.Material.Color as MaterialColor
|
||||
import Widget.Style.Material.Typography as Typography
|
||||
|
||||
|
||||
more_vert : Icon
|
||||
more_vert : Icon msg
|
||||
more_vert { size, color } =
|
||||
Icon.icon {viewBox = "0 0 48 48"
|
||||
, size = size
|
||||
@ -33,7 +33,7 @@ more_vert { size, color } =
|
||||
]
|
||||
|
||||
|
||||
search : Icon
|
||||
search : Icon msg
|
||||
search { size, color } =
|
||||
Icon.icon {viewBox = "0 0 48 48"
|
||||
, size = size
|
||||
@ -46,7 +46,7 @@ search { size, color } =
|
||||
]
|
||||
|
||||
|
||||
menu : Icon
|
||||
menu : Icon msg
|
||||
menu { size, color } =
|
||||
Icon.icon {viewBox = "0 0 48 48"
|
||||
, size = size
|
||||
|
||||
@ -12,7 +12,7 @@ type alias Select msg =
|
||||
, options :
|
||||
List
|
||||
{ text : String
|
||||
, icon : Icon
|
||||
, icon : Icon msg
|
||||
}
|
||||
, onSelect : Int -> Maybe msg
|
||||
}
|
||||
@ -23,7 +23,7 @@ type alias MultiSelect msg =
|
||||
, options :
|
||||
List
|
||||
{ text : String
|
||||
, icon : Icon
|
||||
, icon : Icon msg
|
||||
}
|
||||
, onSelect : Int -> Maybe msg
|
||||
}
|
||||
@ -59,7 +59,6 @@ selectButton style ( selected, b ) =
|
||||
else
|
||||
style.content.content.icon.otherwise
|
||||
)
|
||||
|> Element.map never
|
||||
, Element.text b.text |> Element.el style.content.content.text.contentText
|
||||
]
|
||||
}
|
||||
|
||||
@ -27,9 +27,9 @@ type alias SortTableStyle msg =
|
||||
{ elementTable : List (Attribute msg)
|
||||
, content :
|
||||
{ header : ButtonStyle msg
|
||||
, ascIcon : Icon
|
||||
, descIcon : Icon
|
||||
, defaultIcon : Icon
|
||||
, ascIcon : Icon msg
|
||||
, descIcon : Icon msg
|
||||
, defaultIcon : Icon msg
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
123
src/Widget.elm
123
src/Widget.elm
@ -10,7 +10,8 @@ module Widget exposing
|
||||
, SortTableStyle, SortTable, Column, sortTable, floatColumn, intColumn, stringColumn, unsortableColumn
|
||||
, TextInputStyle, TextInput, textInput
|
||||
, TabStyle, Tab, tab
|
||||
, ProgressIndicatorStyle, ProgressIndicator, circularProgressIndicator
|
||||
, ProgressIndicatorStyle, ProgressIndicator, circularProgressIndicator, imageItem
|
||||
, ImageItemStyle
|
||||
)
|
||||
|
||||
{-| This module contains different stateless view functions. No wiring required.
|
||||
@ -96,7 +97,7 @@ You can create you own widgets by sticking widgets types together.
|
||||
|
||||
## Item
|
||||
|
||||
@docs ItemStyle, DividerStyle, HeaderStyle, TextItemStyle, ExpansionItemStyle, Item, ExpansionItem, itemList, item, divider, headerItem, buttonDrawer, textItem, expansionItem
|
||||
@docs ItemStyle, DividerStyle, HeaderStyle, TextItemStyle,ImageItemStyle, ExpansionItemStyle, Item, ExpansionItem, itemList, item, divider, headerItem, buttonDrawer, textItem,imageItem, expansionItem
|
||||
|
||||
|
||||
# Sort Table
|
||||
@ -143,7 +144,7 @@ import Html exposing (Html)
|
||||
import Internal.Button as Button
|
||||
import Internal.Dialog as Dialog
|
||||
import Internal.ExpansionPanel as ExpansionPanel
|
||||
import Internal.Item as Item exposing (TextItem, TextItemStyle)
|
||||
import Internal.Item as Item
|
||||
import Internal.List as List
|
||||
import Internal.ProgressIndicator as ProgressIndicator
|
||||
import Internal.Select as Select
|
||||
@ -168,11 +169,11 @@ type alias IconStyle =
|
||||
}
|
||||
|
||||
|
||||
type alias Icon =
|
||||
type alias Icon msg =
|
||||
{ size : Int
|
||||
, color : Color
|
||||
}
|
||||
-> Element Never
|
||||
-> Element msg
|
||||
|
||||
|
||||
|
||||
@ -205,7 +206,7 @@ type alias ButtonStyle msg =
|
||||
-}
|
||||
type alias Button msg =
|
||||
{ text : String
|
||||
, icon : Icon
|
||||
, icon : Icon msg
|
||||
, onPress : Maybe msg
|
||||
}
|
||||
|
||||
@ -224,7 +225,7 @@ iconButton :
|
||||
ButtonStyle msg
|
||||
->
|
||||
{ text : String
|
||||
, icon : Icon
|
||||
, icon : Icon msg
|
||||
, onPress : Maybe msg
|
||||
}
|
||||
-> Element msg
|
||||
@ -265,7 +266,7 @@ button :
|
||||
ButtonStyle msg
|
||||
->
|
||||
{ text : String
|
||||
, icon : Icon
|
||||
, icon : Icon msg
|
||||
, onPress : Maybe msg
|
||||
}
|
||||
-> Element msg
|
||||
@ -354,7 +355,7 @@ type alias Select msg =
|
||||
, options :
|
||||
List
|
||||
{ text : String
|
||||
, icon : Icon
|
||||
, icon : Icon msg
|
||||
}
|
||||
, onSelect : Int -> Maybe msg
|
||||
}
|
||||
@ -372,7 +373,7 @@ type alias MultiSelect msg =
|
||||
, options :
|
||||
List
|
||||
{ text : String
|
||||
, icon : Icon
|
||||
, icon : Icon msg
|
||||
}
|
||||
, onSelect : Int -> Maybe msg
|
||||
}
|
||||
@ -536,8 +537,8 @@ textInput =
|
||||
|
||||
|
||||
{-| -}
|
||||
type alias ItemStyle content =
|
||||
{ element : List (Attribute Never)
|
||||
type alias ItemStyle content msg=
|
||||
{ element : List (Attribute msg)
|
||||
, content : content
|
||||
}
|
||||
|
||||
@ -562,11 +563,11 @@ type alias HeaderStyle msg =
|
||||
type alias RowStyle msg =
|
||||
{ elementRow : List (Attribute msg)
|
||||
, content :
|
||||
{ element : List (Attribute Never)
|
||||
, ifFirst : List (Attribute Never)
|
||||
, ifLast : List (Attribute Never)
|
||||
, ifSingleton : List (Attribute Never)
|
||||
, otherwise : List (Attribute Never)
|
||||
{ element : List (Attribute msg)
|
||||
, ifFirst : List (Attribute msg)
|
||||
, ifLast : List (Attribute msg)
|
||||
, ifSingleton : List (Attribute msg)
|
||||
, otherwise : List (Attribute msg)
|
||||
}
|
||||
}
|
||||
|
||||
@ -575,11 +576,11 @@ type alias RowStyle msg =
|
||||
type alias ColumnStyle msg =
|
||||
{ elementColumn : List (Attribute msg)
|
||||
, content :
|
||||
{ element : List (Attribute Never)
|
||||
, ifFirst : List (Attribute Never)
|
||||
, ifLast : List (Attribute Never)
|
||||
, ifSingleton : List (Attribute Never)
|
||||
, otherwise : List (Attribute Never)
|
||||
{ element : List (Attribute msg)
|
||||
, ifFirst : List (Attribute msg)
|
||||
, ifLast : List (Attribute msg)
|
||||
, ifSingleton : List (Attribute msg)
|
||||
, otherwise : List (Attribute msg)
|
||||
}
|
||||
}
|
||||
|
||||
@ -602,16 +603,47 @@ type alias TextItemStyle msg =
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
type alias ExpansionItemStyle msg =
|
||||
{ item : ItemStyle (TextItemStyle msg)
|
||||
, expandIcon : Icon
|
||||
, collapseIcon : Icon
|
||||
{-| -}
|
||||
type alias ImageItemStyle msg =
|
||||
{ elementButton : List (Attribute msg)
|
||||
, ifDisabled : List (Attribute msg)
|
||||
, otherwise : List (Attribute msg)
|
||||
, content :
|
||||
{ elementRow : List (Attribute msg)
|
||||
, content :
|
||||
{ text : { elementText : List (Attribute msg) }
|
||||
, image : { element : List (Attribute msg) }
|
||||
, content : IconStyle
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
{-| -}
|
||||
type alias ExpansionItemStyle msg =
|
||||
{ item : ItemStyle (TextItemStyle msg) msg
|
||||
, expandIcon : Icon msg
|
||||
, collapseIcon : Icon msg
|
||||
}
|
||||
|
||||
{-| -}
|
||||
type alias TextItem msg =
|
||||
{ text : String
|
||||
, onPress : Maybe msg
|
||||
, icon : Icon msg
|
||||
, content : Icon msg
|
||||
}
|
||||
|
||||
{-| -}
|
||||
type alias ImageItem msg =
|
||||
{ text : String
|
||||
, onPress : Maybe msg
|
||||
, image : Element msg
|
||||
, content : Icon msg
|
||||
}
|
||||
|
||||
{-| -}
|
||||
type alias ExpansionItem msg =
|
||||
{ icon : Icon
|
||||
{ icon : Icon msg
|
||||
, text : String
|
||||
, onToggle : Bool -> msg
|
||||
, content : List (Item msg)
|
||||
@ -637,28 +669,49 @@ item =
|
||||
|
||||
{-| A divider.
|
||||
-}
|
||||
divider : ItemStyle (DividerStyle msg) -> Item msg
|
||||
divider : ItemStyle (DividerStyle msg) msg -> Item msg
|
||||
divider =
|
||||
Item.divider
|
||||
|
||||
|
||||
{-| A header for a part of a list.
|
||||
-}
|
||||
headerItem : ItemStyle (HeaderStyle msg) -> String -> Item msg
|
||||
headerItem : ItemStyle (HeaderStyle msg) msg -> String -> Item msg
|
||||
headerItem =
|
||||
Item.headerItem
|
||||
|
||||
|
||||
{-| A clickable item that contains two spots for icons or additional information and a single line of text.
|
||||
-}
|
||||
textItem : ItemStyle (TextItemStyle msg) -> TextItem msg -> Item msg
|
||||
textItem : ItemStyle (TextItemStyle msg) msg
|
||||
-> { text : String
|
||||
, onPress : Maybe msg
|
||||
, icon : Icon msg
|
||||
, content : Icon msg
|
||||
} -> Item msg
|
||||
textItem =
|
||||
Item.textItem
|
||||
|
||||
{-| A clickable item that contains a image , a line of text and some additonal information
|
||||
-}
|
||||
imageItem : ItemStyle (ImageItemStyle msg) msg
|
||||
-> { text : String
|
||||
, onPress : Maybe msg
|
||||
, image : Element msg
|
||||
, content : Icon msg
|
||||
} -> Item msg
|
||||
imageItem =
|
||||
Item.imageItem
|
||||
|
||||
{-| An expandable Item
|
||||
-}
|
||||
expansionItem : ExpansionItemStyle msg -> ExpansionItem msg -> List (Item msg)
|
||||
expansionItem : ExpansionItemStyle msg
|
||||
-> { icon : Icon msg
|
||||
, text : String
|
||||
, onToggle : Bool -> msg
|
||||
, content : List (Item msg)
|
||||
, isExpanded : Bool
|
||||
} -> List (Item msg)
|
||||
expansionItem =
|
||||
Item.expansionItem
|
||||
|
||||
@ -739,9 +792,9 @@ type alias SortTableStyle msg =
|
||||
{ elementTable : List (Attribute msg)
|
||||
, content :
|
||||
{ header : ButtonStyle msg
|
||||
, ascIcon : Icon
|
||||
, descIcon : Icon
|
||||
, defaultIcon : Icon
|
||||
, ascIcon : Icon msg
|
||||
, descIcon : Icon msg
|
||||
, defaultIcon : Icon msg
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -14,11 +14,11 @@ type alias IconStyle =
|
||||
}
|
||||
|
||||
|
||||
type alias Icon =
|
||||
type alias Icon msg =
|
||||
{ size : Int
|
||||
, color : Color
|
||||
}
|
||||
-> Element Never
|
||||
-> Element msg
|
||||
|
||||
|
||||
{-| For using [icidasset/elm-material-icons](https://dark.elm.dmy.fr/packages/icidasset/elm-material-icons/latest/)
|
||||
@ -33,7 +33,7 @@ type alias Icon =
|
||||
|> Widget.Icon.elmMaterialIcons Color
|
||||
|
||||
-}
|
||||
elmMaterialIcons : (Color -> coloring) -> (Int -> coloring -> Html Never) -> Icon
|
||||
elmMaterialIcons : (Color -> coloring) -> (Int -> coloring -> Html msg) -> Icon msg
|
||||
elmMaterialIcons wrapper fun =
|
||||
\{ size, color } ->
|
||||
fun size (wrapper color)
|
||||
@ -52,7 +52,7 @@ elmMaterialIcons wrapper fun =
|
||||
|> Widget.Icon.materialIcons
|
||||
|
||||
-}
|
||||
materialIcons : (Color -> Int -> Svg Never) -> Icon
|
||||
materialIcons : (Color -> Int -> Svg msg) -> Icon msg
|
||||
materialIcons fun =
|
||||
\{ size, color } ->
|
||||
fun color size
|
||||
@ -76,7 +76,7 @@ materialIcons fun =
|
||||
|> Widget.Icon.elmFeather FeatherIcons.toHtml
|
||||
|
||||
-}
|
||||
elmFeather : (List (Svg.Attribute Never) -> icon -> Html Never) -> icon -> Icon
|
||||
elmFeather : (List (Svg.Attribute msg) -> icon -> Html msg) -> icon -> Icon msg
|
||||
elmFeather fun icon =
|
||||
\{ size, color } ->
|
||||
icon
|
||||
@ -102,7 +102,7 @@ elmFeather fun icon =
|
||||
|> Widget.Icon.elmFontawesome FontAwesome.Svg.viewIcon
|
||||
|
||||
-}
|
||||
elmFontawesome : (icon -> Svg Never) -> icon -> Icon
|
||||
elmFontawesome : (icon -> Svg msg) -> icon -> Icon msg
|
||||
elmFontawesome fun icon =
|
||||
\{ size, color } ->
|
||||
icon
|
||||
@ -137,9 +137,9 @@ elmIonicons :
|
||||
, blue : Float
|
||||
, alpha : Float
|
||||
}
|
||||
-> Html Never
|
||||
-> Html msg
|
||||
)
|
||||
-> Icon
|
||||
-> Icon msg
|
||||
elmIonicons fun =
|
||||
\{ size, color } ->
|
||||
fun size (Color.toRgba color)
|
||||
@ -167,8 +167,8 @@ elmOcticons :
|
||||
, withColor : String -> options -> options
|
||||
, defaultOptions : options
|
||||
}
|
||||
-> (options -> Html Never)
|
||||
-> Icon
|
||||
-> (options -> Html msg)
|
||||
-> Icon msg
|
||||
elmOcticons { withSize, withColor, defaultOptions } fun =
|
||||
\{ size, color } ->
|
||||
(defaultOptions
|
||||
@ -191,7 +191,7 @@ elmOcticons { withSize, withColor, defaultOptions } fun =
|
||||
|> Widget.Icon.elmHeroicons
|
||||
|
||||
-}
|
||||
elmHeroicons : (List (Svg.Attribute Never) -> Html Never) -> Icon
|
||||
elmHeroicons : (List (Svg.Attribute msg) -> Html msg) -> Icon msg
|
||||
elmHeroicons fun =
|
||||
\{ size, color } ->
|
||||
fun
|
||||
@ -214,7 +214,7 @@ elmHeroicons fun =
|
||||
|> Widget.Icon.antDesignIconsElm
|
||||
|
||||
-}
|
||||
antDesignIconsElm : (List (Svg.Attribute Never) -> Html Never) -> Icon
|
||||
antDesignIconsElm : (List (Svg.Attribute msg) -> Html msg) -> Icon msg
|
||||
antDesignIconsElm fun =
|
||||
\{ size, color } ->
|
||||
fun
|
||||
@ -237,7 +237,7 @@ antDesignIconsElm fun =
|
||||
|> Widget.Icon.elmZondicons
|
||||
|
||||
-}
|
||||
elmZondicons : (List (Svg.Attribute Never) -> Html Never) -> Icon
|
||||
elmZondicons : (List (Svg.Attribute msg) -> Html msg) -> Icon msg
|
||||
elmZondicons fun =
|
||||
\{ size, color } ->
|
||||
fun
|
||||
|
||||
@ -80,11 +80,11 @@ type alias LayoutStyle msg =
|
||||
, sheetButton : ButtonStyle msg
|
||||
, menuButton : ButtonStyle msg
|
||||
, menuTabButton : ButtonStyle msg
|
||||
, menuIcon : Icon
|
||||
, moreVerticalIcon : Icon
|
||||
, menuIcon : Icon msg
|
||||
, moreVerticalIcon : Icon msg
|
||||
, spacing : Int
|
||||
, title : List (Attribute msg)
|
||||
, searchIcon : Icon
|
||||
, searchIcon : Icon msg
|
||||
, search : TextInputStyle msg
|
||||
, searchFill : TextInputStyle msg
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@ module Widget.Style.Material exposing
|
||||
, alertDialog
|
||||
, row, column
|
||||
, fullBleedDivider, insetDivider, middleDivider, insetHeader, fullBleedHeader, textItem, expansionItem
|
||||
, progressIndicator
|
||||
, progressIndicator,imageItem
|
||||
, sortTable
|
||||
, snackbar
|
||||
, tab, tabButton
|
||||
@ -85,7 +85,7 @@ The [List widget](https://material.io/components/lists) is a very complex widget
|
||||
A List is build from items.
|
||||
You way want to use special items to visually organize the content of your list.
|
||||
|
||||
@docs fullBleedDivider, insetDivider, middleDivider, insetHeader, fullBleedHeader, textItem, expansionItem
|
||||
@docs fullBleedDivider, insetDivider, middleDivider, insetHeader, fullBleedHeader, textItem,imageItem, expansionItem
|
||||
|
||||
|
||||
# Progress Indicator
|
||||
@ -123,7 +123,7 @@ Note that you might want to checkout the [file on GitHub](https://github.com/Ora
|
||||
import Color exposing (Color)
|
||||
import Internal.Button exposing (ButtonStyle)
|
||||
import Internal.Dialog exposing (DialogStyle)
|
||||
import Internal.Item exposing (DividerStyle, ExpansionItemStyle, HeaderStyle, ItemStyle, TextItemStyle)
|
||||
import Internal.Item exposing (DividerStyle, ExpansionItemStyle,ImageItemStyle, HeaderStyle, ItemStyle, TextItemStyle)
|
||||
import Internal.List exposing (ColumnStyle, RowStyle)
|
||||
import Internal.Material.Button as Button
|
||||
import Internal.Material.Chip as Chip
|
||||
@ -322,35 +322,35 @@ column =
|
||||
|
||||
{-| A divider covering the full length
|
||||
-}
|
||||
fullBleedDivider : Palette -> ItemStyle (DividerStyle msg)
|
||||
fullBleedDivider : Palette -> ItemStyle (DividerStyle msg) msg
|
||||
fullBleedDivider =
|
||||
Item.fullBleedDivider
|
||||
|
||||
|
||||
{-| A divider covering only parts of the width
|
||||
-}
|
||||
insetDivider : Palette -> ItemStyle (DividerStyle msg)
|
||||
insetDivider : Palette -> ItemStyle (DividerStyle msg) msg
|
||||
insetDivider =
|
||||
Item.insetDivider
|
||||
|
||||
|
||||
{-| A divider in the center
|
||||
-}
|
||||
middleDivider : Palette -> ItemStyle (DividerStyle msg)
|
||||
middleDivider : Palette -> ItemStyle (DividerStyle msg) msg
|
||||
middleDivider =
|
||||
Item.middleDivider
|
||||
|
||||
|
||||
{-| A header of a section of a list. Comes with a inset divider.
|
||||
-}
|
||||
insetHeader : Palette -> ItemStyle (HeaderStyle msg)
|
||||
insetHeader : Palette -> ItemStyle (HeaderStyle msg) msg
|
||||
insetHeader =
|
||||
Item.insetHeader
|
||||
|
||||
|
||||
{-| A header of a section of a list. Comes with a full bleed divider.
|
||||
-}
|
||||
fullBleedHeader : Palette -> ItemStyle (HeaderStyle msg)
|
||||
fullBleedHeader : Palette -> ItemStyle (HeaderStyle msg) msg
|
||||
fullBleedHeader =
|
||||
Item.fullBleedHeader
|
||||
|
||||
@ -398,11 +398,17 @@ There are some conflicting informations about the height of an element in the [S
|
||||
A normal item should be 48 height, but a item with an icon should be 56. This is confusing, because a normal item can also have an additional icon that is the same size.
|
||||
|
||||
-}
|
||||
textItem : Palette -> ItemStyle (TextItemStyle msg)
|
||||
textItem : Palette -> ItemStyle (TextItemStyle msg) msg
|
||||
textItem =
|
||||
Item.textItem
|
||||
|
||||
{-| Similar to a textItem but with an image instead of the icon.
|
||||
|
||||
If the image is bigger then 40x40, the size of the item will change.
|
||||
-}
|
||||
imageItem : Palette -> ItemStyle (ImageItemStyle msg) msg
|
||||
imageItem =
|
||||
Item.imageItem
|
||||
|
||||
{-------------------------------------------------------------------------------
|
||||
-- D I A L O G
|
||||
|
||||
BIN
src/elm.png
Normal file
BIN
src/elm.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
Loading…
Reference in New Issue
Block a user