This commit is contained in:
Anthony Scopatz 2019-10-16 19:00:51 -04:00
parent 8c96cb1da8
commit d6017af708

View file

@ -1,23 +1,32 @@
import Browser
import Html exposing (..)
import Html.Events exposing (onClick)
import String
import Json.Decode
import Json.Decode as Decode
import Json.Encode as Encode
import Bootstrap.Tab as Tab
import Bootstrap.CDN as CDN
import Bootstrap.Grid as Grid
import Bootstrap.ListGroup as ListGroup
-- example with animation, you can drop the subscription part when not using animations
type alias Model =
{ tabState : Tab.State }
{ tabState : Tab.State
, promptValue : String
}
init : ( Model, Cmd Msg )
init =
( { tabState = Tab.initialState }, Cmd.none )
( { tabState = Tab.initialState
, promptValue = "$"
}
, Cmd.none )
type Msg
= TabMsg Tab.State
| PromptSelect String
update : Msg -> Model -> ( Model, Cmd msg )
update msg model =
@ -26,18 +35,36 @@ update msg model =
( { model | tabState = state }
, Cmd.none
)
PromptSelect value ->
( { model | promptValue = value }
, Cmd.none
)
view : Model -> Html Msg
view model =
Tab.config TabMsg
--|> Tab.withAnimation
-- remember to wire up subscriptions when using this option
|> Tab.right
|> Tab.center
|> Tab.items
[ Tab.item
{ id = "tabItem1"
, link = Tab.link [] [ text "Tab 1" ]
, pane = Tab.pane [] [ text "Tab 1 Content" ]
{ id = "tabItemPrompt"
, link = Tab.link [] [ text "Prompt" ]
, pane = Tab.pane [] [
text ("Current Prompt: " ++ model.promptValue)
, ListGroup.custom [
ListGroup.button
[ ListGroup.attrs [ onClick (PromptSelect "$") ]
, ListGroup.info
]
[ text "List item 1" ]
, ListGroup.button
[ ListGroup.attrs [ onClick (PromptSelect "#") ]
, ListGroup.warning
]
[ text "List item 2" ]
]
]
}
, Tab.item
{ id = "tabItem2"