Pagination Component

[muratcorlu]

Figma

Implementation

General usage example:

<bl-pagination current-page=1 total-items=200 items-per-page=5 ></bl-pagination>

API Reference:

bl-pagination component

Pagination component is for listing the pages to the users and redirecting them between pages.

Attributes

Attribute	Description	Default Value
current-page (number)	Sets the current page	1
total-items (number)	Total number of data to be paginated	-
items-per-page (number)	Sets the number of items per page	100
has-jumper (boolean)	Adds a jumper input to the pagination	false
has-select (boolean)	Adds select component to let users choose the result per page	false
jumper-label (string)	Sets the jumper label	Go To
select-label (string)	Sets select label	Show
option-text (string)	Sets the option texts of the select element	Items

Events

Event	Description	Data
bl-change	Fires everytime user selects a page	( {selectedPage,prevPage})

[muratcorlu]

Hi @olkeoguz!

Please use kebab-case for attribute names (like current-page instead of currentPage).

"Rules" sections is for listing the behavioural rules (if we have any) about this component. If we don't have any rules, you can omit that part.

I assume bl-change event will contain the new page number in the event data. If so please mention it. And maybe we can consider to include previous page number in that event too. In some cases it would be helpful to track user interaction.

And what about labels for "results per page" select and "jumper" input? Do we consider to set them inside the component and not give a chance to customize them?

[olkeoguz]

Hi @muratcorlu ,

• Excellent idea to the add previous page in the event. Thank you.

• About the last suggestion you made, I thought, we were considering to add the multi-language option to Baklava and these areas were supposed to be static. But it makes sence to allow users for the labels. If that's the final decision, i can add it.

• I will update the rules part after we decide the result-per-page options.