Added Tabs

elm.json

@@ -8,7 +8,9 @@
         "View",
         "View.FilterSelect",
         "View.ValidatedInput",
-        "View.WrappedColumn"
+        "View.ScrollingNav",
+        "View.Snackbar",
+        "View.SortTable"
     ],
     "elm-version": "0.19.0 <= v < 0.20.0",
     "dependencies": {
@@ -26,4 +28,4 @@
     "test-dependencies": {
         "elm-explorations/test": "1.2.1 <= v < 2.0.0"
     }
-}
+}

example/src/Component.elm

@@ -91,7 +91,7 @@ update msg model =
 
 filterSelect : FilterSelect.Model -> Element Msg
 filterSelect model =
-    Element.column (Grid.simple ++ Card.small) <|
+    Element.column (Grid.simple ++ Card.large) <|
         [ Element.el Heading.h3 <| Element.text "Filter Select"
         , case model.selected of
             Just selected ->
@@ -129,7 +129,7 @@ filterSelect model =
 
 validatedInput : ValidatedInput.Model () ( ( String, String )) -> Element Msg
 validatedInput model =
-    Element.column (Grid.simple ++ Card.small) <|
+    Element.column (Grid.simple ++ Card.large) <|
         [ Element.el Heading.h3 <| Element.text "Validated Input"
         , ValidatedInput.view Input.simple
             model
@@ -160,7 +160,7 @@ scrollingNavCard  =
         |> List.singleton
         |> Element.paragraph []
     ]
-    |> Element.column (Grid.simple ++ Card.small)
+    |> Element.column (Grid.simple ++ Card.large)
 
 view : Model -> Element Msg
 view model =

example/src/Example.elm

@@ -130,19 +130,16 @@ view model =
                                         Nothing
                         , label = Element.text 
                         , msgMapper = ScrollingNavSpecific
+                        , attributes = \selected -> Button.simple
+                            ++ Group.center
+                            ++ (if selected then
+                                    Color.primary
+
+                                else
+                                    Color.dark
+                                )
                         }
                     |> Widget.select
-                    |> List.map (\(config,selected) ->
-                    Input.button (Button.simple
-                                        ++ Group.center
-                                         ++ (if selected then
-                                                Color.primary
-
-                                            else
-                                                Color.dark
-                                           ))
-                                           config
-                    )
                     |> Element.row
                         (Color.dark ++ Grid.compact)
                     |> Element.el
@@ -260,7 +257,7 @@ subscriptions model=
     Sub.batch
     [ScrollingNav.subscriptions
         |> Sub.map ScrollingNavSpecific
-    , Time.every 500 (always ( TimePassed 500))
+    , Time.every 50 (always ( TimePassed 50))
     ]
 
 

example/src/Reusable.elm

@@ -59,7 +59,7 @@ snackbar addSnackbar =
             |> Element.paragraph []
         }
     ]
-    |> Element.column (Grid.simple ++ Card.small)
+    |> Element.column (Grid.simple ++ Card.large)
 
 sortTable : SortTable.Model -> Element Msg
 sortTable model =
@@ -124,7 +124,7 @@ sortTable model =
             })
         |> Element.table Grid.simple
     ]
-    |> Element.column (Grid.simple ++ Card.small)
+    |> Element.column (Grid.simple ++ Card.large)
 
 view : { addSnackbar : String -> msg
     , msgMapper : Msg -> msg

example/src/Stateless.elm

@@ -3,6 +3,7 @@ module Stateless exposing (Model,Msg,init,update,view)
 import Element exposing (Element)
 import Element.Input as Input
 import Element.Background as Background
+import Element.Border as Border
 import Set exposing (Set)
 import Framework.Grid as Grid
 import Framework.Button as Button
@@ -23,12 +24,14 @@ type alias Model =
     , multiSelected : Set Int
     , isCollapsed : Bool
     , carousel : Int
+    , tab : Int
     }
 
 type Msg =
     ChangedSelected Int
     | ChangedMultiSelected Int
     | ToggleCollapsable Bool
+    | ChangedTab Int
     | SetCarousel Int
 
 init : Model
@@ -37,6 +40,7 @@ init =
     , multiSelected = Set.empty
     , isCollapsed = False
     , carousel = 0
+    , tab = 1
     }
 
 update : Msg -> Model -> (Model,Cmd Msg)
@@ -75,6 +79,9 @@ update msg model =
                 }
             , Cmd.none
             )
+        
+        ChangedTab int ->
+            ( {model | tab = int }, Cmd.none )
 
 select : Model -> Element Msg
 select model =
@@ -84,28 +91,19 @@ select model =
         , options = [ 1, 2, 42 ]
         , label = String.fromInt >> Element.text
         , onChange = ChangedSelected
-        }
+        , attributes = \selected ->
-        |> List.indexedMap (\i (config,selected)->
+            Button.simple
-            Input.button 
+            ++ Group.center
-            (Button.simple
-            ++ (if i == 0 then
-                    Group.left
-                else if i == 2 then
-                    Group.right
-                else
-                    Group.center)
             ++ (if selected then
-                                Color.primary
+                Color.primary
 
-                            else
+            else
-                                []
+                []
-                           )
             )
-            config
+        }
-        )
+        |> Element.row (Grid.compact)
-        |> Element.row Grid.compact
     ]
-        |> Element.column (Grid.simple ++ Card.small)
+        |> Element.column (Grid.simple ++ Card.large)
 
 multiSelect : Model -> Element Msg
 multiSelect model =
@@ -115,28 +113,19 @@ multiSelect model =
         , options = [ 1, 2, 42 ]
         , label = String.fromInt >> Element.text
         , onChange = ChangedMultiSelected
-        }
+        , attributes = \selected ->
-        |> List.indexedMap (\i (config,selected)->
-            Input.button 
             (Button.simple
-            ++ (if i == 0 then
+            ++ Group.center
-                    Group.left
+            ++ if selected then
-                else if i == 2 then
+                Color.primary
-                    Group.right
-                else
-                    Group.center)
-            ++ (if selected then
-                                Color.primary
 
-                            else
+            else
-                                []
+                []
-                           )
             )
-            config
+        }
-        )
         |> Element.row Grid.compact
     ]
-        |> Element.column (Grid.simple ++ Card.small)
+        |> Element.column (Grid.simple ++ Card.large)
     
 
 collapsable : Model -> Element Msg
@@ -156,7 +145,41 @@ collapsable model =
         ,content = Element.text <| "Hello World"
         }
     ]
-    |> Element.column (Grid.simple ++ Card.small)
+    |> Element.column (Grid.simple ++ Card.large)
+
+tab : Model -> Element Msg
+tab model =
+    [Element.el Heading.h3 <| Element.text "Tab"
+    ,Widget.tab Grid.simple
+        { selected = model.tab
+        , options = [1,2,3]
+        , onChange = ChangedTab
+        , label = \int -> "Tab " ++ String.fromInt int |> Element.text
+        , content = \selected ->
+            (case selected of
+                1 ->
+                    "This is Tab 1"
+                2 ->
+                    "This is the second tab"
+                3 ->
+                    "The thrid and last tab"
+                _ ->
+                    "Please select a tab"
+                )
+            |>Element.text
+            |> Element.el (Card.small ++ Group.bottom)
+        , attributes = \selected -> 
+            (Button.simple 
+              ++ Group.top
+              ++ if selected then
+                    Color.primary
+                 else
+                    []
+            )
+        }
+    ]
+    |> Element.column (Grid.simple ++ Card.large)
+
 
 dialog : msg -> Model -> Element msg
 dialog showDialog model =
@@ -166,7 +189,7 @@ dialog showDialog model =
         , label = Element.text <| "Show Dialog"
         }
     ]
-    |> Element.column (Grid.simple ++ Card.small)
+    |> Element.column (Grid.simple ++ Card.large)
 
 carousel : Model -> Element Msg
 carousel model =
@@ -196,7 +219,7 @@ carousel model =
                 |> Element.row (Grid.simple ++ [Element.centerX, Element.width<| Element.shrink])
             }
     ]
-    |> Element.column (Grid.simple ++ Card.small)
+    |> Element.column (Grid.simple ++ Card.large)
     
 
 view : { msgMapper : Msg -> msg, showDialog : msg} -> Model -> Element msg
@@ -215,5 +238,6 @@ view {msgMapper,showDialog} model =
             , collapsable model |> Element.map msgMapper
             , dialog showDialog model
             , carousel model |> Element.map msgMapper
+            , tab model |> Element.map msgMapper
             ]
         ]

src/Widget.elm

@@ -1,4 +1,7 @@
-module Widget exposing (select, multiSelect, collapsable, carousel, dialog)
+module Widget exposing
+    ( select, multiSelect, collapsable, carousel, dialog
+    , tab
+    )
 
 {-| This module contains functions for displaying data.
 
@@ -7,7 +10,7 @@ module Widget exposing (select, multiSelect, collapsable, carousel, dialog)
 -}
 
 import Array exposing (Array)
-import Element exposing (Element)
+import Element exposing (Attribute, Element)
 import Element.Background as Background
 import Element.Events as Events
 import Element.Input as Input
@@ -15,92 +18,45 @@ import Set exposing (Set)
 
 
 {-| Selects one out of multiple options. This can be used for radio buttons or Menus.
-
-```
-    Widget.select
-        { selected = model.selected
-        , options = [ 1, 2, 42 ]
-        , label = String.fromInt >> Element.text
-        , onChange = ChangedSelected
-        }
-        |> List.map (\(config,selected)->
-            Input.button (if selected then [Font.bold] else []) config
-          )
-        |> Element.row []
-```
-
 -}
 select :
     { selected : Maybe a
     , options : List a
     , label : a -> Element msg
     , onChange : a -> msg
+    , attributes : Bool -> List (Attribute msg)
     }
-    ->
+    -> List (Element msg)
-        List
+select { selected, options, label, onChange, attributes } =
-            ( { label : Element msg
-              , onPress : Maybe msg
-              }
-            , Bool
-            )
-select { selected, options, label, onChange } =
     options
         |> List.map
             (\a ->
-                ( { onPress = a |> onChange |> Just
+                Input.button (attributes (selected == Just a))
-                  , label = label a
+                    { onPress = a |> onChange |> Just
-                  }
+                    , label = label a
-                , selected == Just a
+                    }
-                )
             )
 
 
 {-| Selects multible options. This can be used for checkboxes.
-
-```
-    Widget.multiSelect
-        { selected = model.multiSelected
-        , options = [ 1, 2, 42 ]
-        , label = String.fromInt >> Element.text
-        , onChange = ChangedMultiSelected
-        }
-        |> List.map (\(config,selected)->
-            Input.button
-                (if selected then
-                    [Font.bold]
-
-                else
-                    []
-                )
-                config
-        )
-        |> Element.row []
-```
-
 -}
 multiSelect :
     { selected : Set comparable
     , options : List comparable
     , label : comparable -> Element msg
     , onChange : comparable -> msg
+    , attributes : Bool -> List (Attribute msg)
     }
-    ->
+    -> List (Element msg)
-        List
+multiSelect { selected, options, label, onChange, attributes } =
-            ( { label : Element msg
-              , onPress : Maybe msg
-              }
-            , Bool
-            )
-multiSelect { selected, options, label, onChange } =
     options
         |> List.map
             (\a ->
-                ( { onPress = a |> onChange |> Just
+                Input.button (attributes (selected |> Set.member a))
-                  , label =
+                    { onPress = a |> onChange |> Just
+                    , label =
                         label a
-                  }
+                    }
-                , selected |> Set.member a
-                )
             )
 
 
@@ -145,6 +101,31 @@ collapsable { onToggle, isCollapsed, label, content } =
                )
 
 
+tab :
+    List (Attribute msg)
+    ->
+        { selected : a
+        , options : List a
+        , onChange : a -> msg
+        , label : a -> Element msg
+        , content : a -> Element msg
+        , attributes : Bool -> List (Attribute msg)
+        }
+    -> Element msg
+tab atts { selected, options, onChange, label, content, attributes } =
+    [ select
+        { selected = Just selected
+        , options = options
+        , label = label
+        , onChange = onChange
+        , attributes = attributes
+        }
+        |> Element.row atts
+    , content selected
+    ]
+        |> Element.column []
+
+
 {-| A dialog element displaying important information.
 
 ```

src/Widget/ScrollingNav.elm

@@ -19,7 +19,7 @@ the page. Clicking on a navigation button will scroll directly to that section.
 -}
 
 import Browser.Dom as Dom
-import Element exposing (Element)
+import Element exposing (Attribute, Element)
 import Framework.Grid as Grid
 import Html.Attributes as Attributes
 import IntDict exposing (IntDict)
@@ -147,6 +147,7 @@ viewSections :
     { label : String -> Element msg
     , fromString : String -> Maybe elem
     , msgMapper : Msg elem -> msg
+    , attributes : Bool -> List (Attribute msg)
     }
     -> Model elem
     ->
@@ -154,8 +155,9 @@ viewSections :
         , options : List elem
         , label : elem -> Element msg
         , onChange : elem -> msg
+        , attributes : Bool -> List (Attribute msg)
         }
-viewSections { label, fromString, msgMapper } { arrangement, scrollPos, labels, positions } =
+viewSections { label, fromString, msgMapper, attributes } { arrangement, scrollPos, labels, positions } =
     let
         current =
             positions
@@ -169,6 +171,7 @@ viewSections { label, fromString, msgMapper } { arrangement, scrollPos, labels,
     , options = arrangement
     , label = \elem -> label (elem |> labels)
     , onChange = JumpTo >> msgMapper
+    , attributes = attributes
     }