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
]
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
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
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.