Module for creating a Boostrap Pagination control, to indicate a series of related content exists across multiple pages.
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
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.
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.Attribute msg) -> Config msg -> Config msg
Customize the root nav element with std. Html.Attribute(s) for the pagination.
listAttrs : List (Html.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.
Opaque type holding the configuration options for a pagination widget.
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)
}
{ attributes : List (Html.Attribute msg)
, children : List (Html msg)
}
Record alias for describing a pagination page item.
{ 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/