https://github.com/tesk9/elm-tabs

Accessible tab widget using tesk9/accessible-html
https://github.com/tesk9/elm-tabs

accessibility elm elm-lang tabs

Last synced: 26 days ago
JSON representation

Accessible tab widget using tesk9/accessible-html

• Host: GitHub
• URL: https://github.com/tesk9/elm-tabs
• Owner: tesk9
• Created: 2017-03-28T06:13:30.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-09-25T07:05:06.000Z (over 7 years ago)
• Last Synced: 2024-10-21T18:46:39.661Z (2 months ago)
• Topics: accessibility, elm, elm-lang, tabs
• Language: Elm
• Homepage: https://tesk9.github.io/elm-tabs/
• Size: 96.7 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# elm-tabs

![](https://travis-ci.org/tesk9/elm-tabs.svg?branch=master)

Accessible tab widget using [`accessible-html`](package.elm-lang.org/packages/tesk9/accessible-html/latest).

#### Example:

```

import Html exposing (beginnerProgram)

import Accessibility as Html exposing (..)

import List.Zipper exposing (Zipper)

import Tabs.Model exposing (Model)

import Tabs.Update exposing (update)

import Tabs.View exposing (view)

main : Program Never Model Tabs.Update.Msg

main =

    beginnerProgram

        { model = model

        , update = update

        , view = view

        }

model : Model

model =

    { groupId = "test-view-container"

    , tabPanels = initZipper

    }

initZipper : Zipper ( Int, Html Never, Html Never )

initZipper =

    List.Zipper.Zipper

        []

        ( 0, header "Tab1", panel "Panel1" )

        [ ( 1, header "Tab2", panel "Panel2" )

        , ( 2, header "Tab3", panel "Panel3" )

        , ( 3, header "Tab4", panel "Panel4" )

        , ( 4, header "Tab5", panel "Panel5" )

        ]

header : String -> Html msg

header tabContent =

    h2 [] [ text tabContent ]

panel : String -> Html msg

panel panelContent =

    div []

        [ h3 [] [ text panelContent ]

        , text panelContent

        ]

```