PaackEng / paack-ui / UI.Paginator

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
        { onForwardClicked = Msg.NextPage
        , onPreviousClicked = Msg.PreviousPage
        , totalAmount = List.length model.options
        , pageAmount = model.pageOffset
        }
        |> Paginator.withCurrentItem model.current
        |> Paginator.renderElement renderConfig
    ]

Building


type Paginator msg

The Paginator msg type is used for describing the component for later rendering.

nonNumeric : { onForwardClicked : msg, onPreviousClicked : msg, totalAmount : Basics.Int, pageAmount : Basics.Int } -> Paginator msg

This paginator style has a label, followed by the previous and next buttons.

The label looks like: {{current + 1}} - {{min (pageAmount + current) max)}} of {{max}}

Paginator.nonNumeric
    { onForwardClicked = Msg.Forward
    , onPreviousClicked = Msg.Previous
    , totalAmount = 999
    , pageAmount = 10
    }
    renderConfig

Options

withCurrentItem : Basics.Int -> Paginator msg -> Paginator msg

The current item, most probably the first one displayed in your list.

Paginator.withCurrentItem 11 somePaginator

withCurrentPage : Basics.Int -> Paginator msg -> Paginator msg

The current page. Similar to withCurrentItem, but considering pageAmount.

Paginator.withCurrentPage 2 somePaginator

Rendering

renderElement : UI.RenderConfig.RenderConfig -> Paginator msg -> Element msg

End of the builder's life. The result of this function is a ready-to-insert Elm UI's Element.