UI.Paginator is a component for helping navigation in a large sample of elements. It provides navigation buttons and current location information.

A paginator does not include the logic required for taking/dropping the source of elements, and neither does the rendering of these elements. The following code applies the paginator to some simple list, and also applies paginating logic on it:

Element.column
    [ Element.width fill
    , Element.height (px 600)
    ]
    [ model.options
        |> List.drop model.pageOffset
        |> List.take 20
        |> List.map itemView
        |> Element.column
            [ Element.width fill
            , Element.height fill
            ]
    , Paginator.nonNumeric
        { onNextButtonClicked = Msg.NextPage
        , onPreviousButtonClicked = Msg.PreviousPage
        , totalCount = List.length model.options
        , offset = model.pageOffset
        , first = 0
        }
        renderConfig
    ]

Building

Rendering