diff --git a/docs/2.0.0/index.html b/docs/2.0.0/index.html
index 6a99ca8..47ebdc8 100644
--- a/docs/2.0.0/index.html
+++ b/docs/2.0.0/index.html
@@ -15923,7 +15923,8 @@
button: $author$project$Widget$Style$Material$tabButton(palette),
containerColumn: _List_fromArray(
[
- $mdgriffith$elm_ui$Element$spacing(8)
+ $mdgriffith$elm_ui$Element$spacing(8),
+ $mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
]),
content: _List_fromArray(
[
diff --git a/docs/index.html b/docs/index.html
index f26dd12..7612d8e 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -16371,7 +16371,8 @@ var $author$project$Widget$Style$Material$tab = function (palette) {
button: $author$project$Widget$Style$Material$tabButton(palette),
containerColumn: _List_fromArray(
[
- $mdgriffith$elm_ui$Element$spacing(8)
+ $mdgriffith$elm_ui$Element$spacing(8),
+ $mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
]),
content: _List_fromArray(
[
diff --git a/src/Widget.elm b/src/Widget.elm
index 374c0e6..fd32029 100644
--- a/src/Widget.elm
+++ b/src/Widget.elm
@@ -1,10 +1,11 @@
module Widget exposing
( Button, TextButton, iconButton, textButton, button
- , Select, MultiSelect, selectButton, select, multiSelect
+ , Select, selectButton, select
+ , MultiSelect, multiSelect
, Dialog, modal, dialog
, ExpansionPanel, expansionPanel
, row, column, buttonRow, buttonColumn
- , SortTable,Column, sortTable, floatColumn, intColumn, stringColumn, unsortableColumn
+ , SortTable, Column, sortTable, floatColumn, intColumn, stringColumn, unsortableColumn
, TextInput, textInput
, Tab, tab
)
@@ -13,32 +14,33 @@ module Widget exposing
These widgets should be used by defining the styling seperately:
-```
-Widget.button Material.primaryButton
- { text = "disable me"
- , icon =
- FeatherIcons.slash
- |> FeatherIcons.withSize 16
- |> FeatherIcons.toHtml []
- |> Element.html
- |> Element.el []
- , onPress =
- if isButtonEnabled then
- ChangedButtonStatus False
- |> Just
+ Widget.button Material.primaryButton
+ { text = "disable me"
+ , icon =
+ FeatherIcons.slash
+ |> FeatherIcons.withSize 16
+ |> FeatherIcons.toHtml []
+ |> Element.html
+ |> Element.el []
+ , onPress =
+ if isButtonEnabled then
+ ChangedButtonStatus False
+ |> Just
- else
- Nothing
- }
-```
+ else
+ Nothing
+ }
Every widgets comes with a type. You can think of the widgets as building blocks.
You can create you own widgets by sticking widgets types together.
+
# Buttons
+[Open in Ellie](https://ellie-app.com/8XDrHsxYkKNa1)
+
@docs Button, TextButton, iconButton, textButton, button
@@ -46,45 +48,59 @@ You can create you own widgets by sticking widgets types together.
+[Open in Ellie](https://ellie-app.com/8XDsBDB92Dfa1)
+
@docs Select, selectButton, select
-
+
+
+[Open in Ellie](https://ellie-app.com/8XDtW5gVnB3a1)
@docs MultiSelect, multiSelect
# Dialog
-
+
+
+[Open in Ellie](https://ellie-app.com/8XDvDKrm8R4a1)
@docs Dialog, modal, dialog
# Expansion Panel
-
+
+
+[Open in Ellie](https://ellie-app.com/8XDwr7pCZ3Ca1)
@docs ExpansionPanel, expansionPanel
# List
-
+
+
+[Open in Ellie](https://ellie-app.com/8XDxbpZZbFMa1)
@docs row, column, buttonRow, buttonColumn
# Sort Table
-
+
-@docs SortTable,Column, sortTable, floatColumn, intColumn, stringColumn, unsortableColumn
+[Open in Ellie](https://ellie-app.com/8XDy5mGRd4Xa1)
+
+@docs SortTable, Column, sortTable, floatColumn, intColumn, stringColumn, unsortableColumn
# Text Input
+[Open in Ellie](https://ellie-app.com/8XDyZD5VBd6a1)
+
@docs TextInput, textInput
@@ -92,6 +108,8 @@ You can create you own widgets by sticking widgets types together.
+[Open in Ellie](https://ellie-app.com/8XDzMBgC36wa1)
+
@docs Tab, tab
-}
@@ -107,7 +125,7 @@ import Internal.SortTable as SortTable
import Internal.Tab as Tab
import Internal.TextInput as TextInput
import Set exposing (Set)
-import Widget.Style exposing (ButtonStyle,TextInputStyle, ColumnStyle, DialogStyle, ExpansionPanelStyle, RowStyle, SortTableStyle, TabStyle)
+import Widget.Style exposing (ButtonStyle, ColumnStyle, DialogStyle, ExpansionPanelStyle, RowStyle, SortTableStyle, TabStyle, TextInputStyle)
@@ -188,7 +206,7 @@ button =
Technical Remark:
-* A more suitable name would be "Choice"
+ - A more suitable name would be "Choice"
-}
type alias Select msg =
@@ -206,7 +224,7 @@ type alias Select msg =
Technical Remark:
-* A more suitable name would be "Options"
+ - A more suitable name would be "Options"
-}
type alias MultiSelect msg =
@@ -268,7 +286,7 @@ type alias Dialog msg =
Technical Remark:
-* To stop the screen from scrolling, set the height of the layout to the height of the screen.
+ - To stop the screen from scrolling, set the height of the layout to the height of the screen.
-}
modal : { onDismiss : Maybe msg, content : Element msg } -> List (Attribute msg)
@@ -296,6 +314,7 @@ dialog =
- EXPANSION PANEL
----------------------------------------------------------}
+
{-| Expansion Panel widget type
-}
type alias ExpansionPanel msg =
@@ -308,6 +327,7 @@ type alias ExpansionPanel msg =
, isExpanded : Bool
}
+
{-| An expansion Panel
-}
expansionPanel :
@@ -329,6 +349,7 @@ expansionPanel =
- TEXT INPUT
----------------------------------------------------------}
+
{-| Text Input widget type
-}
type alias TextInput msg =
@@ -339,7 +360,9 @@ type alias TextInput msg =
, onChange : String -> msg
}
-{-| A text Input that allows to include chips. -}
+
+{-| A text Input that allows to include chips.
+-}
textInput :
TextInputStyle msg
->
@@ -359,18 +382,21 @@ textInput =
- LIST
----------------------------------------------------------}
+
{-| Replacement of `Element.row`
-}
row : RowStyle msg -> List (Element msg) -> Element msg
row =
List.row
+
{-| Replacement of `Element.column`
-}
column : ColumnStyle msg -> List (Element msg) -> Element msg
column =
List.column
+
{-| A row of buttons
-}
buttonRow :
@@ -382,6 +408,7 @@ buttonRow :
buttonRow =
List.buttonRow
+
{-| A column of buttons
-}
buttonColumn :
@@ -405,9 +432,10 @@ buttonColumn =
type alias Column a =
SortTable.Column a
-{-| Sort Table widget type
+
+{-| Sort Table widget type
-}
-type alias SortTable a msg=
+type alias SortTable a msg =
{ content : List a
, columns : List (Column a)
, sortBy : String
@@ -415,6 +443,7 @@ type alias SortTable a msg=
, onChange : String -> msg
}
+
{-| An unsortable Column, when trying to sort by this column, nothing will change.
-}
unsortableColumn :
@@ -487,6 +516,7 @@ sortTable =
- TAB
----------------------------------------------------------}
+
{-| Tab widget type
-}
type alias Tab msg =
diff --git a/src/Widget/Style/Material.elm b/src/Widget/Style/Material.elm
index 811d775..b156359 100644
--- a/src/Widget/Style/Material.elm
+++ b/src/Widget/Style/Material.elm
@@ -1349,8 +1349,10 @@ tab palette =
, optionRow =
[ Element.spaceEvenly
, Border.shadow <| shadow 4
+ , Element.spacing 8
+ , Element.width <| Element.fill
]
- , containerColumn = [ Element.spacing 8 ]
+ , containerColumn = [ Element.spacing 8, Element.width <| Element.fill ]
, content = [ Element.width <| Element.fill ]
}