Pagination
Important notice: The pagination component will not remove pages from the index if it overflows. Please trtuncate your array before sending it into list parameter.
Pagination
<!-- pagination.blade.php -->
<nav class="c-pagination" role="navigation" aria-label="Pagination Navigation" data-uid="6629a0ff2b0bf">
<ul class="c-pagination__list">
<li class="c-pagination__item--previous c-pagination__item">
<a class="c-button c-button__filled c-button__filled--default c-button--sm c-button--icon-only" target="_top" disabled="false" data-js-pagination-prev="" aria-label="chevron_left" type="button" href="?p=components%2Forganisms%2Fpagination&pagination=5&%3Fpagination%3D=4" data-uid="6629a0ff2b11d">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--chevron-left c-icon--material c-icon--material-chevron_left material-symbols-outlined material-symbols-outlined--filled c-icon--size-sm" aria-hidden="true" material-symbol="chevron_left" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="6629a0ff2b17b">
</span>
</span>
</span> </a> </li>
<li class="c-pagination__item u-display--none@xs">
<br />
<b>Warning</b>: The parameter <b>"text"</b> in the <b>button</b> component should be of type <b>"string"</b> but was recieved as type <b>"integer"</b>. in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>228</b><br />
<a class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--sm" target="_top" aria-label="1" type="button" href="/components/organisms/pagination?pagination=1" data-uid="6629a0ff2b248">
<span class="c-button__label">
<span class="c-button__label-text ">
1
</span>
</span> </a></li>
<li class="c-pagination__item u-display--none@xs">
<!-- icon.blade.php -->
<span class="c-icon c-icon--more-horiz c-icon--material c-icon--material-more_horiz material-symbols-outlined material-symbols-outlined--filled c-icon--size-sm" material-symbol="more_horiz" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" aria-hidden="true" data-uid="6629a0ff2b2b4">
</span>
</li>
<li class="c-pagination__page-wrapper">
<ul class="c-pagination__pages" js-table-pagination--links>
<li class="c-pagination__item" data-js-pagination-index="3">
<br />
<b>Warning</b>: The parameter <b>"text"</b> in the <b>button</b> component should be of type <b>"string"</b> but was recieved as type <b>"integer"</b>. in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>228</b><br />
<a class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--sm" target="_top" type="button" href="/components/organisms/pagination?pagination=3" aria-label="3" data-uid="6629a0ff2b35f">
<span class="c-button__label">
<span class="c-button__label-text ">
3
</span>
</span> </a> </li>
<li class="c-pagination__item" data-js-pagination-index="4">
<br />
<b>Warning</b>: The parameter <b>"text"</b> in the <b>button</b> component should be of type <b>"string"</b> but was recieved as type <b>"integer"</b>. in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>228</b><br />
<a class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--sm" target="_top" type="button" href="/components/organisms/pagination?pagination=4" aria-label="4" data-uid="6629a0ff2b3f5">
<span class="c-button__label">
<span class="c-button__label-text ">
4
</span>
</span> </a> </li>
<li class="c-pagination__item" data-js-pagination-index="5">
<br />
<b>Warning</b>: The parameter <b>"text"</b> in the <b>button</b> component should be of type <b>"string"</b> but was recieved as type <b>"integer"</b>. in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>228</b><br />
<a class="c-button c-pagination__link c-pagination__item--is-active c-button__filled c-button__filled--primary c-button--sm" target="_top" type="button" href="/components/organisms/pagination?pagination=5" aria-label="5" data-uid="6629a0ff2b488">
<span class="c-button__label">
<span class="c-button__label-text ">
5
</span>
</span> </a> </li>
<li class="c-pagination__item" data-js-pagination-index="6">
<br />
<b>Warning</b>: The parameter <b>"text"</b> in the <b>button</b> component should be of type <b>"string"</b> but was recieved as type <b>"integer"</b>. in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>228</b><br />
<a class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--sm" target="_top" type="button" href="/components/organisms/pagination?pagination=6" aria-label="6" data-uid="6629a0ff2b51c">
<span class="c-button__label">
<span class="c-button__label-text ">
6
</span>
</span> </a> </li>
<li class="c-pagination__item" data-js-pagination-index="7">
<br />
<b>Warning</b>: The parameter <b>"text"</b> in the <b>button</b> component should be of type <b>"string"</b> but was recieved as type <b>"integer"</b>. in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>228</b><br />
<a class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--sm" target="_top" type="button" href="/components/organisms/pagination?pagination=7" aria-label="7" data-uid="6629a0ff2b5aa">
<span class="c-button__label">
<span class="c-button__label-text ">
7
</span>
</span> </a> </li>
</ul>
</li>
<li class="c-pagination__item u-display--none@xs">
<!-- icon.blade.php -->
<span class="c-icon c-icon--more-horiz c-icon--material c-icon--material-more_horiz material-symbols-outlined material-symbols-outlined--filled c-icon--size-sm" material-symbol="more_horiz" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" aria-hidden="true" data-uid="6629a0ff2b648">
</span>
</li>
<li class="c-pagination__item u-display--none@xs">
<br />
<b>Warning</b>: The parameter <b>"text"</b> in the <b>button</b> component should be of type <b>"string"</b> but was recieved as type <b>"integer"</b>. in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>228</b><br />
<a class="c-button c-pagination__link c-button__filled c-button__filled--default c-button--sm" target="_top" aria-label="15" type="button" href="/components/organisms/pagination?pagination=15" data-uid="6629a0ff2b6dd">
<span class="c-button__label">
<span class="c-button__label-text ">
15
</span>
</span> </a></li>
<li class="c-pagination__item--next c-pagination__item">
<a class="c-button c-button__filled c-button__filled--default c-button--sm c-button--icon-only" target="_top" disabled="false" data-js-pagination-next="" aria-label="chevron_right" type="button" href="?p=components%2Forganisms%2Fpagination&pagination=5&%3Fpagination%3D=6" data-uid="6629a0ff2b74c">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--chevron-right c-icon--material c-icon--material-chevron_right material-symbols-outlined material-symbols-outlined--filled c-icon--size-sm" aria-hidden="true" material-symbol="chevron_right" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="6629a0ff2b7a6">
</span>
</span>
</span> </a> </li>
</ul>
</nav>
@pagination([
'list' => [
['href' => '/components/organisms/pagination?pagination=1', 'label' => 'Page 1'],
['href' => '/components/organisms/pagination?pagination=2', 'label' => 'Page 2'],
['href' => '/components/organisms/pagination?pagination=3', 'label' => 'Page 3'],
['href' => '/components/organisms/pagination?pagination=4', 'label' => 'Page 4'],
['href' => '/components/organisms/pagination?pagination=5', 'label' => 'Page 5'],
['href' => '/components/organisms/pagination?pagination=6', 'label' => 'Page 6'],
['href' => '/components/organisms/pagination?pagination=7', 'label' => 'Page 7'],
['href' => '/components/organisms/pagination?pagination=8', 'label' => 'Page 8'],
['href' => '/components/organisms/pagination?pagination=9', 'label' => 'Page 9'],
['href' => '/components/organisms/pagination?pagination=10', 'label' => 'Page 10'],
['href' => '/components/organisms/pagination?pagination=11', 'label' => 'Page 11'],
['href' => '/components/organisms/pagination?pagination=12', 'label' => 'Page 12'],
['href' => '/components/organisms/pagination?pagination=13', 'label' => 'Page 13'],
['href' => '/components/organisms/pagination?pagination=14', 'label' => 'Page 14'],
['href' => '/components/organisms/pagination?pagination=15', 'label' => 'Page 15'],
],
'current' => isset($_GET['pagination']) ? $_GET['pagination'] : 1
])
@endpagination
Using JS
Easier pagination
Simple pagination
Showing all pages in the pagination at the same time.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Pagination with pagesToShow attribute.
Takes an even number (or closest even number) and only show that amount of pages (in addition to the current page).
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Pagination with pagesToShow attribute.
Takes an even number (or closest even number) and only show that amount of pages (in addition to the current page).
Item 8
Item 9
Item 3
Item 4
Item 5
Item 1
Item 2
Item 6
Item 7
<!-- card.blade.php -->
<div class="c-card u-margin__bottom--8 c-card--default c-card--image-first c-card--ratio-4-3" data-js-pagination-target="" data-uid="6629a0ff2bf25">
<div class="c-card__header">
<!-- typography.blade.php original: h4 -->
<h2 class="c-typography c-typography__variant--h2" data-uid="6629a0ff2b89c">
Simple pagination
</h2> <!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6629a0ff2b8e6">
Showing all pages in the pagination at the same time.
</p> </div>
<!-- collection.blade.php -->
<div class="c-collection" data-js-pagination-container="" data-uid="6629a0ff2bc04">
<!-- collection__item.blade.php -->
<div class="c-collection__item" data-js-pagination-item="" data-uid="6629a0ff2b971">
<div class="c-collection__content">
Item 1
</div>
</div>
<!-- collection__item.blade.php -->
<div class="c-collection__item" data-js-pagination-item="" data-uid="6629a0ff2b9c4">
<div class="c-collection__content">
Item 2
</div>
</div>
<!-- collection__item.blade.php -->
<div class="c-collection__item" data-js-pagination-item="" data-uid="6629a0ff2ba08">
<div class="c-collection__content">
Item 3
</div>
</div> <!-- collection__item.blade.php -->
<div class="c-collection__item" data-js-pagination-item="" data-uid="6629a0ff2ba49">
<div class="c-collection__content">
Item 4
</div>
</div> <!-- collection__item.blade.php -->
<div class="c-collection__item" data-js-pagination-item="" data-uid="6629a0ff2ba87">
<div class="c-collection__content">
Item 5
</div>
</div> <!-- collection__item.blade.php -->
<div class="c-collection__item" data-js-pagination-item="" data-uid="6629a0ff2bad4">
<div class="c-collection__content">
Item 6
</div>
</div> <!-- collection__item.blade.php -->
<div class="c-collection__item" data-js-pagination-item="" data-uid="6629a0ff2bb13">
<div class="c-collection__content">
Item 7
</div>
</div> <!-- collection__item.blade.php -->
<div class="c-collection__item" data-js-pagination-item="" data-uid="6629a0ff2bb4f">
<div class="c-collection__content">
Item 8
</div>
</div> <!-- collection__item.blade.php -->
<div class="c-collection__item" data-js-pagination-item="" data-uid="6629a0ff2bb89">
<div class="c-collection__content">
Item 9
</div>
</div>
</div>
<!-- pagination.blade.php -->
<nav class="c-pagination" role="navigation" aria-label="Pagination Navigation" data-js-pagination="" data-js-pagination-per-page="1" data-js-pagination-max-pages="" data-js-pagination-pages-to-show="" data-js-pagination-keep-dom="" data-uid="6629a0ff2bc59">
<ul class="c-pagination__list">
<li class="c-pagination__item--previous c-pagination__item">
<button class="c-button c-button__filled c-button__filled--default c-button--sm c-button--icon-only" target="_top" disabled="true" data-js-pagination-prev="" aria-label="chevron_left" type="button" data-uid="6629a0ff2bcb3">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--chevron-left c-icon--material c-icon--material-chevron_left material-symbols-outlined material-symbols-outlined--filled c-icon--size-sm" aria-hidden="true" material-symbol="chevron_left" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="6629a0ff2bd09">
</span>
</span>
</span> </button> </li>
<li class="c-pagination__page-wrapper">
<ul class="c-pagination__pages" js-table-pagination--links>
<li class="c-pagination__item" data-js-pagination-index="1">
<br />
<b>Warning</b>: The parameter <b>"text"</b> in the <b>button</b> component should be of type <b>"string"</b> but was recieved as type <b>"integer"</b>. in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>228</b><br />
<button class="c-button c-pagination__link c-pagination__item--is-active c-button__filled c-button__filled--primary c-button--sm" target="_top" type="button" aria-label="1" data-uid="6629a0ff2bdb1">
<span class="c-button__label">
<span class="c-button__label-text ">
1
</span>
</span> </button> </li>
</ul>
</li>
<li class="c-pagination__item--next c-pagination__item">
<button class="c-button c-button__filled c-button__filled--default c-button--sm c-button--icon-only" target="_top" disabled="true" data-js-pagination-next="" aria-label="chevron_right" type="button" data-uid="6629a0ff2be1a">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--chevron-right c-icon--material c-icon--material-chevron_right material-symbols-outlined material-symbols-outlined--filled c-icon--size-sm" aria-hidden="true" material-symbol="chevron_right" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="6629a0ff2be75">
</span>
</span>
</span> </button> </li>
</ul>
</nav>
</div>
<!-- card.blade.php -->
<div class="c-card u-margin__bottom--8 c-card--default c-card--image-first c-card--ratio-4-3" data-js-pagination-target="" data-uid="6629a0ff2c54b">
<div class="c-card__header">
<!-- typography.blade.php original: h4 -->
<h3 class="c-typography c-typography__variant--h3" data-uid="6629a0ff2bf8d">
Pagination with pagesToShow attribute.
</h3> <!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6629a0ff2bfd8">
Takes an even number (or closest even number) and only show that amount of pages (in addition to the current page).
</p> </div>
<!-- collection.blade.php -->
<div class="c-collection" data-js-pagination-container="" data-uid="6629a0ff2c262">
<!-- collection__item.blade.php -->
<div class="c-collection__item" data-js-pagination-item="" data-uid="6629a0ff2c026">
<div class="c-collection__content">
Item 1
</div>
</div>
<!-- collection__item.blade.php -->
<div class="c-collection__item" data-js-pagination-item="" data-uid="6629a0ff2c06e">
<div class="c-collection__content">
Item 2
</div>
</div>
<!-- collection__item.blade.php -->
<div class="c-collection__item" data-js-pagination-item="" data-uid="6629a0ff2c0b1">
<div class="c-collection__content">
Item 3
</div>
</div> <!-- collection__item.blade.php -->
<div class="c-collection__item" data-js-pagination-item="" data-uid="6629a0ff2c0f1">
<div class="c-collection__content">
Item 4
</div>
</div> <!-- collection__item.blade.php -->
<div class="c-collection__item" data-js-pagination-item="" data-uid="6629a0ff2c130">
<div class="c-collection__content">
Item 5
</div>
</div> <!-- collection__item.blade.php -->
<div class="c-collection__item" data-js-pagination-item="" data-uid="6629a0ff2c16c">
<div class="c-collection__content">
Item 6
</div>
</div> <!-- collection__item.blade.php -->
<div class="c-collection__item" data-js-pagination-item="" data-uid="6629a0ff2c1a9">
<div class="c-collection__content">
Item 7
</div>
</div> <!-- collection__item.blade.php -->
<div class="c-collection__item" data-js-pagination-item="" data-uid="6629a0ff2c1e6">
<div class="c-collection__content">
Item 8
</div>
</div> <!-- collection__item.blade.php -->
<div class="c-collection__item" data-js-pagination-item="" data-uid="6629a0ff2c222">
<div class="c-collection__content">
Item 9
</div>
</div>
</div>
<!-- pagination.blade.php -->
<nav class="c-pagination" role="navigation" aria-label="Pagination Navigation" data-js-pagination="" data-js-pagination-per-page="1" data-js-pagination-max-pages="" data-js-pagination-pages-to-show="4" data-js-pagination-keep-dom="" data-uid="6629a0ff2c2b9">
<ul class="c-pagination__list">
<li class="c-pagination__item--previous c-pagination__item">
<button class="c-button c-button__filled c-button__filled--default c-button--sm c-button--icon-only" target="_top" disabled="true" data-js-pagination-prev="" aria-label="chevron_left" type="button" data-uid="6629a0ff2c312">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--chevron-left c-icon--material c-icon--material-chevron_left material-symbols-outlined material-symbols-outlined--filled c-icon--size-sm" aria-hidden="true" material-symbol="chevron_left" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="6629a0ff2c368">
</span>
</span>
</span> </button> </li>
<li class="c-pagination__page-wrapper">
<ul class="c-pagination__pages" js-table-pagination--links>
<li class="c-pagination__item" data-js-pagination-index="1">
<br />
<b>Warning</b>: The parameter <b>"text"</b> in the <b>button</b> component should be of type <b>"string"</b> but was recieved as type <b>"integer"</b>. in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>228</b><br />
<button class="c-button c-pagination__link c-pagination__item--is-active c-button__filled c-button__filled--primary c-button--sm" target="_top" type="button" aria-label="1" data-uid="6629a0ff2c410">
<span class="c-button__label">
<span class="c-button__label-text ">
1
</span>
</span> </button> </li>
</ul>
</li>
<li class="c-pagination__item--next c-pagination__item">
<button class="c-button c-button__filled c-button__filled--default c-button--sm c-button--icon-only" target="_top" disabled="true" data-js-pagination-next="" aria-label="chevron_right" type="button" data-uid="6629a0ff2c486">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--chevron-right c-icon--material c-icon--material-chevron_right material-symbols-outlined material-symbols-outlined--filled c-icon--size-sm" aria-hidden="true" material-symbol="chevron_right" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="6629a0ff2c4e0">
</span>
</span>
</span> </button> </li>
</ul>
</nav>
</div>
<!-- card.blade.php -->
<div class="c-card c-card--default c-card--image-first c-card--ratio-4-3" data-js-pagination-target="" data-uid="6629a0ff2d1e9">
<div class="c-card__header">
<!-- typography.blade.php original: h4 -->
<h4 class="c-typography c-typography__variant--h4" data-uid="6629a0ff2c5a8">
Pagination with pagesToShow attribute.
</h4> <!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6629a0ff2c5f1">
Takes an even number (or closest even number) and only show that amount of pages (in addition to the current page).
</p> </div>
<div class="c-field c-select u-margin__bottom--4 c-select--sm c-select--singleselect is-required" data-js-pagination-sort="" id="6629a0ff2c683" data-js-toggle-item="6629a0ff2c683-open-dropdown" data-js-toggle-class="is-open" data-js-select-component="true" data-js-click-away="is-open" data-js-is-empty-select="true" data-js-device-detect="true" data-js-select-type="single" data-uid="6629a0ff2c69f">
<label class="c-field__label" for="select_6629a0ff2c683">
Sort by
<span class="u-color__text--danger" aria-hidden="true">*</span>
</label>
<div class="c-select__field-container">
<select id="select_6629a0ff2c683" data-js-select-element="1" required="required" aria-hidden="true" data-required="1" aria-required="1" data-js-required="" class="c-select__select-element" tabindex="-1">
<option class="c-select__select-option" value=""></option>
<option class="c-select__select-option" value="default" >
Default order
</option>
<option class="c-select__select-option" value="alphabetical" >
Alphabetical
</option>
<option class="c-select__select-option" value="random" selected>
Random
</option>
</select>
<div class="c-select_focus-styler u-level-top"></div> <div class="c-select__expand-button" role="button" >
<!-- icon.blade.php -->
<span class="c-icon c-select__expand-less-icon c-icon--expand-less c-icon--material c-icon--material-expand_less material-symbols-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="expand_less" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="6629a0ff2c77d">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__expand-more-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="expand_more" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="6629a0ff2c7de">
</span>
</div> <div class="c-field__inner">
<div class="c-select__action-overlay" tabindex="0" data-js-select-action-overlay data-js-toggle-trigger="6629a0ff2c683-open-dropdown" data-js-placeholder="">
</div>
</div> </div>
<!-- Visual dropdown list -->
<div class="c-select__dropdown" data-js-dropdown-element="true" aria-hidden="true">
<ul class="c-select__options u-unlist u-padding--0 u-margin--0" role="listbox">
<li class="c-select__option " data-js-dropdown-option="default" role="option" aria-selected="false" tabindex="0">
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--radio-button-unchecked c-icon--material c-icon--material-radio_button_unchecked material-symbols-outlined material-symbols-outlined--filled c-icon--size-sm" aria-hidden="true" material-symbol="radio_button_unchecked" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="6629a0ff2c8d0">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__checked-icon c-icon--radio-button-checked c-icon--material c-icon--material-radio_button_checked material-symbols-outlined material-symbols-outlined--filled c-icon--size-sm" aria-hidden="true" material-symbol="radio_button_checked" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="6629a0ff2c930">
</span>
<span class="c-select__option-label">Default order</span>
</li> <li class="c-select__option " data-js-dropdown-option="alphabetical" role="option" aria-selected="false" tabindex="0">
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--radio-button-unchecked c-icon--material c-icon--material-radio_button_unchecked material-symbols-outlined material-symbols-outlined--filled c-icon--size-sm" aria-hidden="true" material-symbol="radio_button_unchecked" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="6629a0ff2c9b0">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__checked-icon c-icon--radio-button-checked c-icon--material c-icon--material-radio_button_checked material-symbols-outlined material-symbols-outlined--filled c-icon--size-sm" aria-hidden="true" material-symbol="radio_button_checked" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="6629a0ff2ca0d">
</span>
<span class="c-select__option-label">Alphabetical</span>
</li> <li class="c-select__option is-selected" data-js-dropdown-option="random" role="option" aria-selected="true" tabindex="0">
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--radio-button-unchecked c-icon--material c-icon--material-radio_button_unchecked material-symbols-outlined material-symbols-outlined--filled c-icon--size-sm" aria-hidden="true" material-symbol="radio_button_unchecked" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="6629a0ff2cab2">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__checked-icon c-icon--radio-button-checked c-icon--material c-icon--material-radio_button_checked material-symbols-outlined material-symbols-outlined--filled c-icon--size-sm" aria-hidden="true" material-symbol="radio_button_checked" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="6629a0ff2cb0d">
</span>
<span class="c-select__option-label">Random</span>
</li> </ul>
</div> <div class="c-select__select-invalid-message" id="error_input_6629a0ff2c683_message">
<!-- icon.blade.php -->
<span class="c-icon c-icon--error c-icon--material c-icon--material-error material-symbols-outlined material-symbols-outlined--filled c-icon--size-sm" material-symbol="error" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" aria-hidden="true" data-uid="6629a0ff2cb9b">
</span>
<span class="errorText"></span>
</div>
<template>
<li class="c-select__option " data-js-dropdown-option="false" role="option" aria-selected="false" tabindex="0">
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--radio-button-unchecked c-icon--material c-icon--material-radio_button_unchecked material-symbols-outlined material-symbols-outlined--filled c-icon--size-sm" aria-hidden="true" material-symbol="radio_button_unchecked" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="6629a0ff2cc19">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__checked-icon c-icon--radio-button-checked c-icon--material c-icon--material-radio_button_checked material-symbols-outlined material-symbols-outlined--filled c-icon--size-sm" aria-hidden="true" material-symbol="radio_button_checked" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="6629a0ff2cc71">
</span>
<span class="c-select__option-label">{OPTION_NAME}</span>
</li> </template>
</div>
<!-- collection.blade.php -->
<div class="c-collection" data-js-pagination-container="" data-uid="6629a0ff2cf0e">
<!-- collection__item.blade.php -->
<div class="c-collection__item" data-js-pagination-item="" data-js-pagination-item-title="8" data-uid="6629a0ff2cccc">
<div class="c-collection__content">
Item 8
</div>
</div> <!-- collection__item.blade.php -->
<div class="c-collection__item" data-js-pagination-item="" data-js-pagination-item-title="9" data-uid="6629a0ff2cd14">
<div class="c-collection__content">
Item 9
</div>
</div> <!-- collection__item.blade.php -->
<div class="c-collection__item" data-js-pagination-item="" data-js-pagination-item-title="3" data-uid="6629a0ff2cd55">
<div class="c-collection__content">
Item 3
</div>
</div> <!-- collection__item.blade.php -->
<div class="c-collection__item" data-js-pagination-item="" data-js-pagination-item-title="4" data-uid="6629a0ff2cd95">
<div class="c-collection__content">
Item 4
</div>
</div> <!-- collection__item.blade.php -->
<div class="c-collection__item" data-js-pagination-item="" data-js-pagination-item-title="5" data-uid="6629a0ff2cdd3">
<div class="c-collection__content">
Item 5
</div>
</div> <!-- collection__item.blade.php -->
<div class="c-collection__item" data-js-pagination-item="" data-js-pagination-item-title="1" data-uid="6629a0ff2ce10">
<div class="c-collection__content">
Item 1
</div>
</div>
<!-- collection__item.blade.php -->
<div class="c-collection__item" data-js-pagination-item="" data-js-pagination-item-title="2" data-uid="6629a0ff2ce57">
<div class="c-collection__content">
Item 2
</div>
</div> <!-- collection__item.blade.php -->
<div class="c-collection__item" data-js-pagination-item="" data-js-pagination-item-title="6" data-uid="6629a0ff2ce95">
<div class="c-collection__content">
Item 6
</div>
</div> <!-- collection__item.blade.php -->
<div class="c-collection__item" data-js-pagination-item="" data-js-pagination-item-title="7" data-uid="6629a0ff2ced0">
<div class="c-collection__content">
Item 7
</div>
</div>
</div>
<!-- pagination.blade.php -->
<nav class="c-pagination" role="navigation" aria-label="Pagination Navigation" data-js-pagination="" data-js-pagination-per-page="1" data-js-pagination-max-pages="" data-js-pagination-pages-to-show="4" data-js-pagination-keep-dom="" data-uid="6629a0ff2cf59">
<ul class="c-pagination__list">
<li class="c-pagination__item--previous c-pagination__item">
<button class="c-button c-button__filled c-button__filled--default c-button--sm c-button--icon-only" target="_top" disabled="true" data-js-pagination-prev="" aria-label="chevron_left" type="button" data-uid="6629a0ff2cfaf">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--chevron-left c-icon--material c-icon--material-chevron_left material-symbols-outlined material-symbols-outlined--filled c-icon--size-sm" aria-hidden="true" material-symbol="chevron_left" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="6629a0ff2d005">
</span>
</span>
</span> </button> </li>
<li class="c-pagination__page-wrapper">
<ul class="c-pagination__pages" js-table-pagination--links>
<li class="c-pagination__item" data-js-pagination-index="1">
<br />
<b>Warning</b>: The parameter <b>"text"</b> in the <b>button</b> component should be of type <b>"string"</b> but was recieved as type <b>"integer"</b>. in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>228</b><br />
<button class="c-button c-pagination__link c-pagination__item--is-active c-button__filled c-button__filled--primary c-button--sm" target="_top" type="button" aria-label="1" data-uid="6629a0ff2d0b0">
<span class="c-button__label">
<span class="c-button__label-text ">
1
</span>
</span> </button> </li>
</ul>
</li>
<li class="c-pagination__item--next c-pagination__item">
<button class="c-button c-button__filled c-button__filled--default c-button--sm c-button--icon-only" target="_top" disabled="true" data-js-pagination-next="" aria-label="chevron_right" type="button" data-uid="6629a0ff2d121">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--chevron-right c-icon--material c-icon--material-chevron_right material-symbols-outlined material-symbols-outlined--filled c-icon--size-sm" aria-hidden="true" material-symbol="chevron_right" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="6629a0ff2d17b">
</span>
</span>
</span> </button> </li>
</ul>
</nav>
</div>
@card([
'attributeList' => [
'data-js-pagination-target' => ''
],
'classList' => ['u-margin__bottom--8']
])
<div class="c-card__header">
@typography([
'element' => "h4"
])
Simple pagination
@endtypography
@typography([
])
Showing all pages in the pagination at the same time.
@endtypography
</div>
@collection(['attributeList' => ['data-js-pagination-container' => '']])
@collection__item(['attributeList' => ['data-js-pagination-item' => '']])
Item 1
@endcollection__item
@collection__item(['attributeList' => ['data-js-pagination-item' => '']])
Item 2
@endcollection__item
@collection__item(['attributeList' => ['data-js-pagination-item' => '']])
Item 3
@endcollection__item
@collection__item(['attributeList' => ['data-js-pagination-item' => '']])
Item 4
@endcollection__item
@collection__item(['attributeList' => ['data-js-pagination-item' => '']])
Item 5
@endcollection__item
@collection__item(['attributeList' => ['data-js-pagination-item' => '']])
Item 6
@endcollection__item
@collection__item(['attributeList' => ['data-js-pagination-item' => '']])
Item 7
@endcollection__item
@collection__item(['attributeList' => ['data-js-pagination-item' => '']])
Item 8
@endcollection__item
@collection__item(['attributeList' => ['data-js-pagination-item' => '']])
Item 9
@endcollection__item
@endcollection
@pagination([
'current' => 1,
'useJS' => true,
'perPage' => 1,
'keepDOM' => true,
])
@endpagination
@endcard
@card([
'attributeList' => [
'data-js-pagination-target' => ''
],
'classList' => [
'u-margin__bottom--8'
]
])
<div class="c-card__header">
@typography([
'element' => "h4"
])
Pagination with pagesToShow attribute.
@endtypography
@typography([
])
Takes an even number (or closest even number) and only show that amount of pages (in addition to the current page).
@endtypography
</div>
@collection(['attributeList' => ['data-js-pagination-container' => '']])
@collection__item(['attributeList' => ['data-js-pagination-item' => '']])
Item 1
@endcollection__item
@collection__item(['attributeList' => ['data-js-pagination-item' => '']])
Item 2
@endcollection__item
@collection__item(['attributeList' => ['data-js-pagination-item' => '']])
Item 3
@endcollection__item
@collection__item(['attributeList' => ['data-js-pagination-item' => '']])
Item 4
@endcollection__item
@collection__item(['attributeList' => ['data-js-pagination-item' => '']])
Item 5
@endcollection__item
@collection__item(['attributeList' => ['data-js-pagination-item' => '']])
Item 6
@endcollection__item
@collection__item(['attributeList' => ['data-js-pagination-item' => '']])
Item 7
@endcollection__item
@collection__item(['attributeList' => ['data-js-pagination-item' => '']])
Item 8
@endcollection__item
@collection__item(['attributeList' => ['data-js-pagination-item' => '']])
Item 9
@endcollection__item
@endcollection
@pagination([
'current' => 1,
'useJS' => true,
'perPage' => 1,
'pagesToShow' => 4,
'keepDOM' => true,
])
@endpagination
@endcard
@card([
'attributeList' => [
'data-js-pagination-target' => ''
]
])
<div class="c-card__header">
@typography([
'element' => "h4"
])
Pagination with pagesToShow attribute.
@endtypography
@typography([
])
Takes an even number (or closest even number) and only show that amount of pages (in addition to the current page).
@endtypography
</div>
@select([
'label' => 'Sort by',
'hidePlaceholder' => true,
'required' => true,
'preselected' => 'random',
'size' => 'sm',
'limitWidth' => true,
'options' => [
'default' => 'Default order',
'alphabetical' => 'Alphabetical',
'random' => 'Random',
],
'attributeList' => [
'data-js-pagination-sort' => '',
],
'classList' => [
'u-margin__bottom--4',
],
])
@endselect
@collection(['attributeList' => ['data-js-pagination-container' => '']])
@collection__item(['attributeList' => ['data-js-pagination-item' => '', 'data-js-pagination-item-title' => '8']])
Item 8
@endcollection__item
@collection__item(['attributeList' => ['data-js-pagination-item' => '', 'data-js-pagination-item-title' => '9']])
Item 9
@endcollection__item
@collection__item(['attributeList' => ['data-js-pagination-item' => '', 'data-js-pagination-item-title' => '3']])
Item 3
@endcollection__item
@collection__item(['attributeList' => ['data-js-pagination-item' => '', 'data-js-pagination-item-title' => '4']])
Item 4
@endcollection__item
@collection__item(['attributeList' => ['data-js-pagination-item' => '', 'data-js-pagination-item-title' => '5']])
Item 5
@endcollection__item
@collection__item(['attributeList' => ['data-js-pagination-item' => '', 'data-js-pagination-item-title' => '1']])
Item 1
@endcollection__item
@collection__item(['attributeList' => ['data-js-pagination-item' => '', 'data-js-pagination-item-title' => '2']])
Item 2
@endcollection__item
@collection__item(['attributeList' => ['data-js-pagination-item' => '', 'data-js-pagination-item-title' => '6']])
Item 6
@endcollection__item
@collection__item(['attributeList' => ['data-js-pagination-item' => '', 'data-js-pagination-item-title' => '7']])
Item 7
@endcollection__item
@endcollection
@pagination([
'current' => 1,
'useJS' => true,
'perPage' => 1,
'pagesToShow' => 4,
'keepDOM' => true,
])
@endpagination
@endcard
Blade component parameters
Key | Default value | Type | Available values | Description |
list | [] | array | - | Array with pages |
current | 1 | integer | - | current page as index number |
currentClass | --is-active | string | - | The current classname |
componentElement | nav | string | - | The tag for the component |
listElement | ul | string | - | List element tag |
listItem | li | string | - | List item tag |
linkPrefix | ?pagination= | string | - | Pagination uses a link prefix on prev next buttons before the numeric index, add it here. |
anchorTag | string | - | Adds the ability to add an anchor tag in the end of every link. | |
previousDisabled | false | string | - | - |
nextDisabled | false | string | - | - |
useJS | false | boolean | - | If the item should use default JS to supply pagination |
randomizeOrder | false | boolean | - | When useJS is true, this option randomize the order of the items. |
perPage | 10 | integer | - | How many items per page |
maxPages | false | boolean | - | Maximum amount of pages |
buttonStyle | filled | string | - | The style of button to display |
buttonSize | sm | string | - | Size of the buttons |
pagesToShow | false | boolean | - | Amount of pages that is shown to the user at one time. |
keepDOM | false | boolean | - | - |
id | string | - | The DOM id of the component. | |
classList | [] | array | - | Array containing wrapping classes array |
attributeList | [] | array | - | Array containing keys and values rendered as attributes |
containerAware | false | boolean | true/false | Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component. |