jaro/flowbite-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
a36e60b2ae65f0acf1298f8c30c1fb4db0a0d56c
flowbite-vue/docs/.vitepress/dist/assets/components_pagination.md.c228117a.js
Jaroslav Drzik a27c84b7a9 dist directory
2024-03-12 05:28:28 +01:00

150 lines
61 KiB
JavaScript
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
import{t as $}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{d as f,g,o as r,c,n as C,a as h,k as t,t as b,e as w,r as F,F as x,D as W,h as v,H as p,l as i,w as _,Q as q}from"./chunks/framework.3f630664.js";const O={"aria-label":"Navigation"},Y={class:"font-semibold text-gray-900 dark:text-white"},G={class:"font-semibold text-gray-900 dark:text-white"},H={class:"font-semibold text-gray-900 dark:text-white"},J=["disabled"],Q=["disabled"],K={key:0,stroke:"currentColor",fill:"currentColor","stroke-width":"0",viewBox:"0 0 20 20","aria-hidden":"true",class:"h-5 w-5",height:"1em",width:"1em",xmlns:"http://www.w3.org/2000/svg"},X=t("path",{"fill-rule":"evenodd",d:"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z","clip-rule":"evenodd"},null,-1),Z=[X],ss=["disabled","onClick"],as=["disabled"],ns={key:0,stroke:"currentColor",fill:"currentColor","stroke-width":"0",viewBox:"0 0 20 20","aria-hidden":"true",class:"h-5 w-5",height:"1em",width:"1em",xmlns:"http://www.w3.org/2000/svg"},ls=t("path",{"fill-rule":"evenodd",d:"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z","clip-rule":"evenodd"},null,-1),os=[ls],ts=["disabled"],d=f({__name:"FwbPagination",props:{modelValue:{default:1},totalPages:{default:void 0},perPage:{default:10},totalItems:{default:10},layout:{default:"pagination"},showIcons:{type:Boolean,default:!1},sliceLength:{default:2},previousLabel:{default:"Prev"},nextLabel:{default:"Next"},enableFirstAndLastButtons:{type:Boolean,default:!1},showLabels:{type:Boolean,default:!0},large:{type:Boolean,default:!1}},emits:["update:model-value","page-changed"],setup(u,{emit:n}){const e=n,s=u;function l(a){e("update:model-value",a),e("page-changed",a)}function m(){e("update:model-value",s.modelValue-1),e("page-changed",s.modelValue-1)}function k(){e("update:model-value",s.modelValue+1),e("page-changed",s.modelValue+1)}function S(){e("update:model-value",1),e("page-changed",1)}function I(){const a=y.value;e("update:model-value",a),e("page-changed",a)}const y=g(()=>s.totalPages?s.totalPages:Math.ceil(s.totalItems/s.perPage)),D=g(()=>s.modelValue<=1),V=g(()=>s.modelValue>=y.value),T=a=>a===s.modelValue,L=g(()=>{if(s.layout==="navigation")return[];if(s.layout==="table")return[];if(y.value<=s.sliceLength*2+1){const o=[];for(let E=1;E<=y.value;E++)o.push(E);return o}if(s.modelValue<=s.sliceLength){const o=[],E=Math.abs(s.modelValue-s.sliceLength)+s.modelValue+s.sliceLength+1;for(let B=1;B<=E;B++)o.push(B);return o}if(s.modelValue>=y.value-s.sliceLength){const o=[];for(let E=Math.abs(y.value-s.sliceLength*2);E<=y.value;E++)o.push(E);return o}const a=[],P=s.modelValue-s.sliceLength>0?s.modelValue-s.sliceLength:1;for(let o=P;o<s.modelValue+s.sliceLength+1&&!(o>=y.value);o++)a.push(o);return a}),N=g(()=>s.modelValue*s.perPage-s.perPage+1),j=g(()=>{const a=s.modelValue*s.perPage;return s.totalItems&&a>s.totalItems?s.totalItems:a}),U=g(()=>s.totalItems?s.totalItems:y.value*s.perPage),z=g(()=>s.modelValue===1),M=g(()=>s.modelValue===y.value);function R(a){const P="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white",o="text-blue-600 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:bg-gray-700 dark:text-white",E="px-4 h-10";return $(P,a&&o,s.large&&E)}function A(a){const P="flex items-center justify-center first:rounded-l-lg last:rounded-r-lg px-3 h-8 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white",o="bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-white cursor-not-allowed",E="px-4 h-10",B="border-none text-white hover:text-white bg-gray-800 rounded-none first:rounded-l last:rounded-r hover:bg-gray-900 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white";return $(P,a===s.modelValue&&o,s.large&&E,(a>y.value||a<1)&&o,s.layout==="navigation"&&"first:mr-3",(s.layout==="navigation"||s.layout==="table")&&"rounded-lg",s.layout==="table"&&B)}return(a,P)=>(r(),c("nav",O,[a.layout==="table"?(r(),c("div",{key:0,class:C(["text-gray-700 dark:text-gray-400 mb-2",a.large?"text-base":"text-sm"])},[h(" Showing "),t("span",Y,b(N.value),1),h(" to "),t("span",G,b(j.value),1),h(" of "),t("span",H,b(U.value),1)],2)):w("",!0),t("div",{class:C(["inline-flex",a.large&&"text-base h-10"])},[F(a.$slots,"start"),a.enableFirstAndLastButtons?F(a.$slots,"first-button",{key:0},()=>[t("button",{disabled:z.value,class:C(A(1)),onClick:S}," First ",10,J)]):w("",!0),F(a.$slots,"prev-button",{disabled:D.value,decreasePage:m},()=>[t("button",{disabled:D.value,class:C(A(a.modelValue-1)),onClick:m},[F(a.$slots,"prev-icon",{},()=>[a.showIcons||a.$slots["prev-icon"]?(r(),c("svg",K,Z)):w("",!0)]),a.showLabels?(r(),c(x,{key:0},[h(b(a.previousLabel),1)],64)):w("",!0)],10,Q)]),(r(!0),c(x,null,W(L.value,o=>F(a.$slots,"page-button",{key:o,page:o,setPage:l,disabled:T(o)},()=>[t("button",{disabled:T(o),class:C(R(o===a.modelValue)),onClick:E=>l(o)},b(o),11,ss)])),128)),F(a.$slots,"next-button",{disabled:V.value,increasePage:k},()=>[t("button",{disabled:V.value,class:C(A(a.modelValue+1)),onClick:k},[a.showLabels?(r(),c(x,{key:0},[h(b(a.nextLabel),1)],64)):w("",!0),F(a.$slots,"next-icon",{},()=>[a.showIcons||a.$slots["next-icon"]?(r(),c("svg",ns,os)):w("",!0)])],10,as)]),a.enableFirstAndLastButtons?F(a.$slots,"last-button",{key:1},()=>[t("button",{disabled:M.value,class:C(A(y.value)),onClick:I}," Last ",10,ts)]):w("",!0),F(a.$slots,"end")],2)]))}}),es={class:"vp-raw flex flex-col items-center"},ps=f({__name:"FwbPaginationExample",setup(u){const n=v(1);return(e,s)=>(r(),c("div",es,[p(i(d),{modelValue:n.value,"onUpdate:modelValue":s[0]||(s[0]=l=>n.value=l),"total-items":100,class:"mb-2"},null,8,["modelValue"]),p(i(d),{modelValue:n.value,"onUpdate:modelValue":s[1]||(s[1]=l=>n.value=l),"total-items":100,large:""},null,8,["modelValue"])]))}}),rs={class:"vp-raw flex justify-center"},cs=f({__name:"FwbPaginationExampleNavigation",setup(u){const n=v(1);return(e,s)=>(r(),c("div",rs,[p(i(d),{modelValue:n.value,"onUpdate:modelValue":s[0]||(s[0]=l=>n.value=l),layout:"navigation","total-pages":100},null,8,["modelValue"])]))}}),Es={class:"vp-raw flex flex-col items-center justify-center text-center"},ys=f({__name:"FwbPaginationExampleTable",setup(u){const n=v(1),e=v(1);return(s,l)=>(r(),c("div",Es,[p(i(d),{modelValue:n.value,"onUpdate:modelValue":l[0]||(l[0]=m=>n.value=m),layout:"table","per-page":20,"total-items":998,class:"mb-2"},null,8,["modelValue"]),p(i(d),{modelValue:e.value,"onUpdate:modelValue":l[1]||(l[1]=m=>e.value=m),layout:"table","per-page":100,"total-items":750,large:""},null,8,["modelValue"])]))}}),is={class:"vp-raw flex flex-col items-center"},ds=t("span",{class:"sr-only"},"Previous",-1),us=t("svg",{class:"w-2.5 h-2.5","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 6 10"},[t("path",{stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M5 1 1 5l4 4"})],-1),gs=t("span",{class:"sr-only"},"Next",-1),Fs=t("svg",{class:"w-2.5 h-2.5","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 6 10"},[t("path",{stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"m1 9 4-4-4-4"})],-1),hs=t("span",{class:"sr-only"},"Previous",-1),ms=t("svg",{class:"w-2.5 h-2.5","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 6 10"},[t("path",{stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M5 1 1 5l4 4"})],-1),bs=t("span",{class:"sr-only"},"Next",-1),vs=t("svg",{class:"w-2.5 h-2.5","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 6 10"},[t("path",{stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"m1 9 4-4-4-4"})],-1),fs=f({__name:"FwbPaginationExampleWithIcons",setup(u){const n=v(1);return(e,s)=>(r(),c("div",is,[p(i(d),{modelValue:n.value,"onUpdate:modelValue":s[0]||(s[0]=l=>n.value=l),"total-pages":100,"show-labels":!1,class:"mb-2"},{"prev-icon":_(()=>[ds,us]),"next-icon":_(()=>[gs,Fs]),_:1},8,["modelValue"]),p(i(d),{modelValue:n.value,"onUpdate:modelValue":s[1]||(s[1]=l=>n.value=l),"total-pages":100,"show-labels":!1,large:""},{"prev-icon":_(()=>[hs,ms]),"next-icon":_(()=>[bs,vs]),_:1},8,["modelValue"])]))}}),Cs={class:"vp-raw flex justify-center"},ws=f({__name:"FwbPaginationExampleWithCustomText",setup(u){const n=v(1);return(e,s)=>(r(),c("div",Cs,[p(i(d),{modelValue:n.value,"onUpdate:modelValue":s[0]||(s[0]=l=>n.value=l),"total-pages":100,"previous-label":"<<<","next-label":">>>"},null,8,["modelValue"])]))}}),_s={class:"vp-raw flex justify-center"},qs=f({__name:"FwbPaginationExampleWithCustomSlice",setup(u){const n=v(1);return(e,s)=>(r(),c("div",_s,[p(i(d),{modelValue:n.value,"onUpdate:modelValue":s[0]||(s[0]=l=>n.value=l),"slice-length":4,"total-pages":100},null,8,["modelValue"])]))}}),Ps={class:"vp-raw flex flex-col items-center"},Bs=["onClick"],As=f({__name:"FwbPaginationExampleSlots",setup(u){const n=v(1);return(e,s)=>(r(),c("div",Ps,[p(i(d),{modelValue:n.value,"onUpdate:modelValue":s[0]||(s[0]=l=>n.value=l),"total-items":100,"show-labels":!1},{"prev-icon":_(()=>[h(" ⬅️ ")]),"next-icon":_(()=>[h(" ➡️ ")]),"page-button":_(({page:l,setPage:m})=>[t("button",{class:"flex items-center justify-center first:rounded-l-lg last:rounded-r-lg px-3 h-8 ml-0 leading-tight text-gray-500 bg-purple-200 border border-purple-300 hover:bg-purple-300 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white",onClick:k=>m(l)},b(l),9,Bs)]),_:1},8,["modelValue"]),h(" Current page: "+b(n.value),1)]))}}),ks=q('<h1 id="vue-pagination-flowbite" tabindex="-1">Vue Pagination - Flowbite <a class="header-anchor" href="#vue-pagination-flowbite" aria-label="Permalink to &quot;Vue Pagination - Flowbite&quot;">​</a></h1><h4 id="use-the-tailwind-css-pagination-element-to-indicate-a-series-of-content-across-various-pages-based-on-multiple-styles-and-sizes" tabindex="-1">Use the Tailwind CSS pagination element to indicate a series of content across various pages based on multiple styles and sizes <a class="header-anchor" href="#use-the-tailwind-css-pagination-element-to-indicate-a-series-of-content-across-various-pages-based-on-multiple-styles-and-sizes" aria-label="Permalink to &quot;Use the Tailwind CSS pagination element to indicate a series of content across various pages based on multiple styles and sizes&quot;">​</a></h4><p>The pagination component can be used to navigate across a series of content and data sets for various pages such as blog posts, products, and more. You can use multiple variants of this component with or without icons and even for paginating table data entries.</p><h2 id="default-pagination" tabindex="-1">Default pagination <a class="header-anchor" href="#default-pagination" aria-label="Permalink to &quot;Default pagination&quot;">​</a></h2><p>Use the following list of pagination items based on two sizes powered by Tailwind CSS utility classes to indicate a series of content for your website.</p>',5),xs=q(`<div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbPagination } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { ref } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">currentPage</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">ref</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">1</span><span style="color:#E1E4E8;">)</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-pagination</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">v-model</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;currentPage&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:total-items</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;100&quot;</span><span style="color:#E1E4E8;">&gt;&lt;/</span><span style="color:#85E89D;">fwb-pagination</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-pagination</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">v-model</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;currentPage&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:total-items</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;100&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">large</span><span style="color:#E1E4E8;">&gt;&lt;/</span><span style="color:#85E89D;">fwb-pagination</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbPagination } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { ref } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">currentPage</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">ref</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">1</span><span style="color:#24292E;">)</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-pagination</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">v-model</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;currentPage&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:total-items</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;100&quot;</span><span style="color:#24292E;">&gt;&lt;/</span><span style="color:#22863A;">fwb-pagination</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-pagination</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">v-model</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;currentPage&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:total-items</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;100&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">large</span><span style="color:#24292E;">&gt;&lt;/</span><span style="color:#22863A;">fwb-pagination</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span></code></pre></div><h2 id="pagination-with-icons" tabindex="-1">Pagination with icons <a class="header-anchor" href="#pagination-with-icons" aria-label="Permalink to &quot;Pagination with icons&quot;">​</a></h2><p>The following pagination component example shows how you can use SVG icons instead of text to show the previous and next pages.</p>`,3),Ds=q(`<div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbPagination } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { ref } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">currentPage</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">ref</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">1</span><span style="color:#E1E4E8;">)</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-pagination</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">v-model</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;currentPage&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:total-pages</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;100&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">show-icons</span><span style="color:#E1E4E8;">&gt;&lt;/</span><span style="color:#85E89D;">fwb-pagination</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbPagination } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { ref } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">currentPage</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">ref</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">1</span><span style="color:#24292E;">)</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-pagination</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">v-model</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;currentPage&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:total-pages</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;100&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">show-icons</span><span style="color:#24292E;">&gt;&lt;/</span><span style="color:#22863A;">fwb-pagination</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span></code></pre></div><h2 id="default-with-custom-length" tabindex="-1">Default with custom length <a class="header-anchor" href="#default-with-custom-length" aria-label="Permalink to &quot;Default with custom length&quot;">​</a></h2><p>You can use your own pages count in the row by passing props: <code>slice-length</code> This prop means left side and right side pages row slicing. In the example it has value <code>4</code>. So row length will be 4 + 1 + 4 pages - 9 pages.</p><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbPagination } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { ref } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">currentPage</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">ref</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">1</span><span style="color:#E1E4E8;">)</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-pagination</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">v-model</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;currentPage&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:total-pages</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;100&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:slice-length</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;4&quot;</span><span style="color:#E1E4E8;">&gt;&lt;/</span><span style="color:#85E89D;">fwb-pagination</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbPagination } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { ref } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">currentPage</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">ref</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">1</span><span style="color:#24292E;">)</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-pagination</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">v-model</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;currentPage&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:total-pages</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;100&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:slice-length</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;4&quot;</span><span style="color:#24292E;">&gt;&lt;/</span><span style="color:#22863A;">fwb-pagination</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,4),Vs=q(`<h2 id="previous-and-next" tabindex="-1">Previous and next <a class="header-anchor" href="#previous-and-next" aria-label="Permalink to &quot;Previous and next&quot;">​</a></h2><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbPagination } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { ref } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">currentPage</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">ref</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">1</span><span style="color:#E1E4E8;">)</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;flex items-center justify-center text-center&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-pagination</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">v-model</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;currentPage&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:total-pages</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;10&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:layout</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;&#39;navigation&#39;&quot;</span><span style="color:#E1E4E8;">&gt;&lt;/</span><span style="color:#85E89D;">fwb-pagination</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbPagination } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { ref } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">currentPage</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">ref</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">1</span><span style="color:#24292E;">)</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">div</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;flex items-center justify-center text-center&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-pagination</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">v-model</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;currentPage&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:total-pages</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;10&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:layout</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;&#39;navigation&#39;&quot;</span><span style="color:#24292E;">&gt;&lt;/</span><span style="color:#22863A;">fwb-pagination</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,2),Ts=q(`<h2 id="pagination-with-table-layout" tabindex="-1">Pagination with table layout <a class="header-anchor" href="#pagination-with-table-layout" aria-label="Permalink to &quot;Pagination with table layout&quot;">​</a></h2><p>To use that layout you have to pass required props:</p><ul><li><code>per-page</code>: it&#39;s items count displayed on each page.</li><li><code>total-items</code>: it&#39;s the total items count.</li></ul><p>And there you don&#39;t need to use <code>total-pages</code> prop.</p><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbPagination } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { ref } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">currentPage</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">ref</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">1</span><span style="color:#E1E4E8;">)</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;flex items-center justify-center text-center&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-pagination</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">v-model</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;currentPage&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:layout</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;&#39;table&#39;&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:per-page</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;20&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:total-items</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;998&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;mb-2&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-pagination</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">v-model</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;currentPage&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:layout</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;&#39;table&#39;&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:per-page</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;20&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:total-items</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;998&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">large</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbPagination } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { ref } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">currentPage</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">ref</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">1</span><span style="color:#24292E;">)</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">div</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;flex items-center justify-center text-center&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-pagination</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">v-model</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;currentPage&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:layout</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;&#39;table&#39;&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:per-page</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;20&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:total-items</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;998&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;mb-2&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-pagination</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">v-model</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;currentPage&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:layout</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;&#39;table&#39;&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:per-page</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;20&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:total-items</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;998&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">large</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">div</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,5),$s=q(`<h2 id="pagination-with-custom-labels" tabindex="-1">Pagination with custom labels <a class="header-anchor" href="#pagination-with-custom-labels" aria-label="Permalink to &quot;Pagination with custom labels&quot;">​</a></h2><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbPagination } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { ref } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">currentPage</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">ref</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">1</span><span style="color:#E1E4E8;">)</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-pagination</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">v-model</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;currentPage&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:total-pages</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;100&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">previous-label</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;&lt;&lt;&lt;&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">next-label</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;&gt;&gt;&gt;&quot;</span><span style="color:#E1E4E8;">&gt;&lt;/</span><span style="color:#85E89D;">fwb-pagination</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbPagination } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { ref } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">currentPage</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">ref</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">1</span><span style="color:#24292E;">)</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-pagination</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">v-model</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;currentPage&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:total-pages</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;100&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">previous-label</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;&lt;&lt;&lt;&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">next-label</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;&gt;&gt;&gt;&quot;</span><span style="color:#24292E;">&gt;&lt;/</span><span style="color:#22863A;">fwb-pagination</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,2),Ss=t("h2",{id:"slots-example",tabindex:"-1"},[h("Slots example "),t("a",{class:"header-anchor",href:"#slots-example","aria-label":'Permalink to "Slots example"'},"​")],-1),Is=q(`<div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbPagination } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { ref } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">currentPage</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">ref</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">1</span><span style="color:#E1E4E8;">)</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-pagination</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">v-model</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;currentPage&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:total-items</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;100&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:show-labels</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;false&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;"> #</span><span style="color:#B392F0;">prev-icon</span><span style="color:#E1E4E8;">&gt;⬅️&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;"> #</span><span style="color:#B392F0;">next-icon</span><span style="color:#E1E4E8;">&gt;➡️&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">v-slot</span><span style="color:#E1E4E8;">:</span><span style="color:#B392F0;">page-button</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;</span><span style="color:#E1E4E8;">{ page, setPage }</span><span style="color:#9ECBFF;">&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">button</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">@click</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;setPage(page)&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;flex items-center justify-center first:rounded-l-lg last:rounded-r-lg px-3 h-8 ml-0 leading-tight text-gray-500 bg-purple-200 border border-purple-300 hover:bg-purple-300 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> {{ page }}</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">button</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-pagination</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Current page: {{ currentPage }}</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbPagination } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { ref } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">currentPage</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">ref</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">1</span><span style="color:#24292E;">)</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-pagination</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">v-model</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;currentPage&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:total-items</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;100&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:show-labels</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;false&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;"> #</span><span style="color:#6F42C1;">prev-icon</span><span style="color:#24292E;">&gt;⬅️&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;"> #</span><span style="color:#6F42C1;">next-icon</span><span style="color:#24292E;">&gt;➡️&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">v-slot</span><span style="color:#24292E;">:</span><span style="color:#6F42C1;">page-button</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;</span><span style="color:#24292E;">{ page, setPage }</span><span style="color:#032F62;">&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">button</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">@click</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;setPage(page)&quot;</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;flex items-center justify-center first:rounded-l-lg last:rounded-r-lg px-3 h-8 ml-0 leading-tight text-gray-500 bg-purple-200 border border-purple-300 hover:bg-purple-300 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white&quot;</span></span>
<span class="line"><span style="color:#24292E;"> &gt;</span></span>
<span class="line"><span style="color:#24292E;"> {{ page }}</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">button</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-pagination</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Current page: {{ currentPage }}</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span></code></pre></div><h2 id="api" tabindex="-1">API <a class="header-anchor" href="#api" aria-label="Permalink to &quot;API&quot;">​</a></h2><h3 id="props" tabindex="-1">Props <a class="header-anchor" href="#props" aria-label="Permalink to &quot;Props&quot;">​</a></h3><table><thead><tr><th>Name</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td>modelValue</td><td><code>number</code></td><td><code>1</code></td></tr><tr><td>totalPages</td><td><code>number</code></td><td><code>10</code></td></tr><tr><td>perPage</td><td><code>number</code></td><td><code>10</code></td></tr><tr><td>totalItems</td><td><code>number</code></td><td><code>10</code></td></tr><tr><td>layout</td><td><code>pagination</code>, <code>table</code>, <code>navigation</code></td><td><code>pagination</code></td></tr><tr><td>showIcons</td><td><code>boolean</code></td><td><code>false</code></td></tr><tr><td>sliceLength</td><td><code>number</code></td><td><code>2</code></td></tr><tr><td>previousLabel</td><td><code>string</code></td><td><code>Previous</code></td></tr><tr><td>nextLabel</td><td><code>string</code></td><td><code>Next</code></td></tr><tr><td>enableFirstAndLastButtons</td><td><code>boolean</code></td><td><code>false</code></td></tr><tr><td>showLabels</td><td><code>boolean</code></td><td><code>true</code></td></tr><tr><td>large</td><td><code>boolean</code></td><td><code>false</code></td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><table><thead><tr><th>Name</th><th>Description</th></tr></thead><tbody><tr><td><code>update:model-value</code></td><td>Current page changed</td></tr><tr><td><code>page-changed</code></td><td>Current page changed</td></tr></tbody></table><h3 id="slots" tabindex="-1">Slots <a class="header-anchor" href="#slots" aria-label="Permalink to &quot;Slots&quot;">​</a></h3><table><thead><tr><th>Name</th><th>Description</th></tr></thead><tbody><tr><td>start</td><td>content before buttons</td></tr><tr><td>end</td><td>content after buttons</td></tr><tr><td>first-button</td><td>first button content</td></tr><tr><td>last-button</td><td>last button content</td></tr><tr><td>prev-button</td><td>previous button content</td></tr><tr><td>next-button</td><td>next button content</td></tr><tr><td>prev-icon</td><td>previous icon slot</td></tr><tr><td>next-icon</td><td>next icon slot</td></tr><tr><td>page-button</td><td>page button slot</td></tr></tbody></table>`,8),Us=JSON.parse('{"title":"Vue Pagination - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/pagination.md","filePath":"components/pagination.md"}'),Ls={name:"components/pagination.md"},zs=Object.assign(Ls,{setup(u){return(n,e)=>(r(),c("div",null,[ks,p(ps),xs,p(fs),Ds,p(qs),Vs,p(cs),Ts,p(ys),$s,p(ws),Ss,p(As),Is]))}});export{Us as __pageData,zs as default};
Reference in New Issue View Git Blame Copy Permalink