nixCodeX/elm-bootstrap/2.0.1

NOTE: the latest version is 3.1.1

Renamed to aDifferentJT/elm-bootstrap. That is where the repository lives now. It has not been published as a package under the new name.

Versions published as nixCodeX/elm-bootstrap still install under that name. 13 versions of 13 come from the new location (see their notes).

Rerouted (renamed, verified). The GitHub user or repository was renamed. The tag is still there, at the new name. The Lamdera package server serves a copy recovered from https://github.com/aDifferentJT/elm-bootstrap.

What we checked: The repo moved to github.com/aDifferentJT/elm-bootstrap. Rebuilt with git archive from commit 77a30ed727b0 of https://github.com/aDifferentJT/elm-bootstrap (zip prefix nixCodeX-elm-bootstrap-77a30ed/, America/Los_Angeles times): the zip is byte-identical to the one package.elm-lang.org recorded, SHA-1 d4637469f6c86d5f9055b35cec2e56a92970c868.

The Lamdera compiler uses this copy and prints a one-line notice saying so. elm itself fails to download this version.

Details · package.elm-lang.org's zip: https://github.com/nixCodeX/elm-bootstrap/zipball/2.0.1/

Bootstrap.Pagination

Module for creating a Boostrap Pagination control, to indicate a series of related content exists across multiple pages.

Simple list example

import Bootstrap.HAlign as HAlign
import Bootstrap.Pagination as Pagination


simplePaginationList : Model -> Html Msg
simplePaginationList model =
    Pagination.defaultConfig
        |> Pagination.ariaLabel "Pagination"
        |> Pagination HAlign.centerXs
        |> Pagination.large
        |> Pagination.itemsList
            { selectedMsg = PaginationMsg
            , prevItem = Just <| Pagination.ListItem [] [ text "Previous" ]
            , nextItem = Just <| Pagination.ListItem [] [ text "Next" ]
            , activeIdx = model.activePageIdx
            , data = [ 1, 2, 3, 4, 5 ] -- You'd typically generate this from your model somehow !
            , itemFn = \idx _ -> Pagination.ListItem [] [ text <| toString (idx + 1) ]
            , urlFn = \idx _ -> "#/pages/" ++ toString (idx + 1)
            }
        |> Pagination.view

Customized pagination

import Bootstrap.HAlign as HAlign
import Bootstrap.Pagination as Item




-- Not you'll also need to fill in the pagination logic yourselves (not shown for brevity)
customPagination : Model -> Html Msg
customPagination model =
    let
        myData =
            [ { icon = "car", name = "Car" }
            , { icon = "bus", name = "Bus" }
            , { icon = "train", name = "Train" }
            ]
    in
    div []
        [ h1 [] [ text "Pagination" ]
        , Pagination.defaultConfig
            |> Pagination.ariaLabel "Pagination"
            |> Pagination.align HAlign.centerXs
            |> Pagination.large
            |> Pagination.items
                ([ Item.item
                    |> Item.span [ class "custom-page-item" ]
                        [ span
                            [ class "fa fa-fast-backward"
                            , attribute "aria-hidden" "true"
                            ]
                            []
                        , span [ class "sr-only" ]
                            [ text "First page" ]
                        ]
                 , Item.item
                    |> Item.span [ class "custom-page-item" ]
                        [ span
                            [ class "fa fa-arrow-left"
                            , attribute "aria-hidden" "true"
                            ]
                            []
                        , span [ class "sr-only" ] [ text "Previous" ]
                        ]
                 ]
                    ++ List.indexedMap
                        (\idx item ->
                            Item.item
                                |> Item.active (idx == model.activePageIdx)
                                |> Item.span [ class "custom-page-item" ]
                                    [ span
                                        [ class <| "fa fa-" ++ item.icon
                                        , attribute "aria-hidden" "true"
                                        ]
                                        []
                                    , span [ class "sr-only" ] [ text item.name ]
                                    ]
                        )
                        myData
                    ++ [ Item.item
                            |> Item.span [ class "custom-page-item" ]
                                [ span
                                    [ class "fa fa-arrow-right"
                                    , attribute "aria-hidden" "true"
                                    ]
                                    []
                                , span [ class "sr-only" ] [ text "Next" ]
                                ]
                       , Item.item
                            |> Item.span [ class "custom-page-item" ]
                                [ span
                                    [ class "fa fa-fast-forward"
                                    , attribute "aria-hidden" "true"
                                    ]
                                    []
                                , span [ class "sr-only" ] [ text "Last page" ]
                                ]
                       ]
                )
            |> Pagination.view
        ]

Provides a default configuration which you can configure further using the various customization functions.

view : Config msg -> Html msg

Takes a pagination config and renders it to std Elm Html.

Customization

ariaLabel : String -> Config msg -> Config msg

Provide screen readers a helpful descriptive text for your pagination widget.

small : Config msg -> Config msg

Configure the pagination and its control to be smaller.

large : Config msg -> Config msg

Configure the pagination and its control to be larger.

attrs : List (Attribute msg) -> Config msg -> Config msg

Customize the root nav element with std. Html.Attribute(s) for the pagination.

listAttrs : List (Attribute msg) -> Config msg -> Config msg

Customize the pagination ul element with std. Html.Attribute(s) for the pagination.

align : HAlign -> Config msg -> Config msg

Customize the horizontal alignment of the pagination components.

import Bootstrap.Pagination as Pagination
import Bootstrap.General.HAlign as HAlign




Pagination.defaultConfig
    |> Pagination.align HAlign.centerXs
items : List (Item msg) -> Config msg -> Config msg

Configure the items to be shown in the pagination.

type Config msg

Opaque type holding the configuration options for a pagination widget.

Simple pagination lists

itemsList : ListConfig a msg -> Config msg -> Config msg

Create a simple default pagination list.

import Bootstrap.Pagination as Pagination


viewPagination : Model -> Html Msg
viewPagination model =
    Pagination.defaultConfig
        |> Pagination.itemsList
            { selectedMsg = PaginationMsg
            , prevItem = Just <| Pagination.ListItem [] [ text "Previous" ]
            , nextItem = Just <| Pagination.ListItem [] [ text "Next" ]
            , activeIdx = model.activePageIdx
            , data = [ 1, 2, 3, 4, 5 ] -- You'd typically generate this from your model somehow !
            , itemFn = \idx _ -> Pagination.ListItem [] [ text <| toString (idx + 1) ]
            , urlFn = \idx _ -> "#/pages/" ++ toString (idx + 1)
            }
type alias ListItem msg =
{ attributes : List (Attribute msg)
, children : List (Html msg)
}

Record alias for describing a pagination page item.

type alias ListConfig a msg =
{ selectedMsg : Int -> msg
, prevItem : Maybe (ListItem msg)
, nextItem : Maybe (ListItem msg)
, activeIdx : Int
, data : List a
, itemFn : Int -> a -> ListItem msg
, urlFn : Int -> a -> String
}

Record type for providing configuration for a simple pagination list with default behaviours/

  • selectedMsg - A msg that you use to keep track of the activeIdx in your model
  • prevItem - When provided will render a previous item link before the individual page items.
  • nextItem - When provided will render a next item link after the individual page items.
  • activeIdx - Index of currently active item in the items list.
  • data - List of actual data items (of any type)
  • itemFn - Callback function to allow you to specify what's rendered for the paginations individual page items
  • urlFn - Callback function to allow you to specify the href url for an individual pagination item