{% include "@Components/listing-navigation/listing-navigation.twig" with {props: {
button: {
title: "Načíst více tašek",
url: "https://www.google.com/",
},
pagination: {
prev: {
title: "Předchozí",
url: "#prev"
},
next: {
title: "Další",
url: "#next"
},
items: [
{
title: "1",
url: "#1"
},
{
title: "2",
url: "#2"
},
{
title: "3",
active: true
},
{
title: "...",
blank: true,
},
{
title: "6",
url: "#15"
}
],
compact: true,
},
loading_target: "test-loading-target",
scroll_target: "test-scroll-target",
}} %}
<div class="c-listing-navigation row gx-0">
<div class="col-xl-4 offset-xl-4 text-center px-xl-2">
<a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline js-fetch" href='https://www.google.com/'>
<span class="btn__title u-z-index-1">
Načíst více tašek
</span>
</a>
</div>
<div class="col-xl-4 d-flex justify-content-center justify-content-xl-end align-content-center pt-3 pt-xl-0">
<div class="c-pagination d-flex align-items-center flex-wrap justify-content-center justify-content-xxl-end --compact">
<a class="link d-inline-flex u-fw-600 align-items-center --icon-before c-pagination__link --prev" href="#prev" title="Předchozí" data-page="" data-loading-target="test-loading-target" data-scroll-target="test-scroll-target">
<span class="link__title">Předchozí</span>
<span class="link__icon d-flex align-items-center justify-content-center flex-shrink-0">
<span class="icon d-flex align-items-center justify-content-center --colored --text --xs">
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 320 512"><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg> </span>
</span>
</a>
<div class="c-pagination__items d-flex gap-1 align-items-center">
<a class="link d-inline-flex u-fw-600 align-items-center c-pagination__link --page-number justify-content-center" href="#1" title="1" data-page="" data-loading-target="test-loading-target" data-scroll-target="test-scroll-target">
<span class="link__title">1</span>
</a>
<a class="link d-inline-flex u-fw-600 align-items-center c-pagination__link --page-number justify-content-center" href="#2" title="2" data-page="" data-loading-target="test-loading-target" data-scroll-target="test-scroll-target">
<span class="link__title">2</span>
</a>
<a class="link d-inline-flex u-fw-600 align-items-center --active c-pagination__link --page-number justify-content-center" href="#" title="3" data-page="" data-loading-target="test-loading-target" data-scroll-target="test-scroll-target">
<span class="link__title">3</span>
</a>
<a class="link d-inline-flex u-fw-600 align-items-center --blank c-pagination__link --page-number justify-content-center" href="#" title="..." data-page="" data-loading-target="test-loading-target" data-scroll-target="test-scroll-target">
<span class="link__title">...</span>
</a>
<a class="link d-inline-flex u-fw-600 align-items-center c-pagination__link --page-number justify-content-center" href="#15" title="6" data-page="" data-loading-target="test-loading-target" data-scroll-target="test-scroll-target">
<span class="link__title">6</span>
</a>
</div>
<a class="link d-inline-flex u-fw-600 align-items-center c-pagination__link --next" href="#next" title="Další" data-page="" data-loading-target="test-loading-target" data-scroll-target="test-scroll-target">
<span class="link__title">Další</span>
<span class="link__icon d-flex align-items-center justify-content-center flex-shrink-0">
<span class="icon d-flex align-items-center justify-content-center --colored --text --xs">
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 320 512"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg> </span>
</span>
</a>
</div>
</div>
</div>