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
        ]

defaultConfig : Config msg

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

rundis/elm-bootstrap/5.2.0

Bootstrap.Pagination

Simple list example

Customization

Modules