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
]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
}
renderConfigThe current item, most probably the first one displayed in your list.
Paginator.withCurrentItem 11 somePaginatorThe current page. Similar to withCurrentItem, but considering pageAmount.
Paginator.withCurrentPage 2 somePaginatorEnd of the builder's life. The result of this function is a ready-to-insert Elm UI's Element.
The
Paginator msgtype is used for describing the component for later rendering.