frandibar / elm-bootstrap / 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.Styled.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 (Html.Styled.Attribute msg) -> Config msg -> Config msg

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

listAttrs : List (Html.Styled.Attribute msg) -> Config msg -> Config msg

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

align : Bootstrap.General.HAlign.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 (Html.Styled.Attribute msg)
, children : List (Html.Styled.Html msg) 
}

Record alias for describing a pagination page item.


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

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