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