158 lines
3.7 KiB
Vue
158 lines
3.7 KiB
Vue
<script setup>
|
|
import * as demoCode from '@/views/demos/components/pagination/demoCodePagination'
|
|
</script>
|
|
|
|
<template>
|
|
<VRow class="match-height">
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<!-- 👉 Basic -->
|
|
<AppCardCode
|
|
title="Basic"
|
|
:code="demoCode.basic"
|
|
>
|
|
<p>The <code>v-pagination</code> component is used to separate long sets of data.</p>
|
|
|
|
<DemoPaginationBasic />
|
|
</AppCardCode>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<!-- 👉 outline basic variant -->
|
|
<AppCardCode
|
|
title="Outline"
|
|
:code="demoCode.outline"
|
|
>
|
|
<p>The <code>variant='outline'</code> prop is used to give outline to pagination item.</p>
|
|
|
|
<DemoPaginationOutline />
|
|
</AppCardCode>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<!-- 👉 Circle -->
|
|
<AppCardCode
|
|
title="Circle"
|
|
:code="demoCode.circle"
|
|
>
|
|
<p>The <code>rounded</code> prop allows you to render pagination buttons with alternative styles.</p>
|
|
|
|
<DemoPaginationCircle />
|
|
</AppCardCode>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<!-- 👉 outline circle variant -->
|
|
<AppCardCode
|
|
title="Outline Circle"
|
|
:code="demoCode.outlineCircle"
|
|
>
|
|
<p>The <code>variant='outline'</code> and <code>rounded</code> prop is used to give rounded outline to pagination item.</p>
|
|
|
|
<DemoPaginationOutlineCircle />
|
|
</AppCardCode>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<!-- 👉 Disabled -->
|
|
<AppCardCode
|
|
title="Disabled"
|
|
:code="demoCode.disabled"
|
|
>
|
|
<p>Pagination items can be manually deactivated using the <code>disabled</code> prop.</p>
|
|
|
|
<DemoPaginationDisabled />
|
|
</AppCardCode>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<!-- 👉 Icons -->
|
|
<AppCardCode
|
|
title="Icons"
|
|
:code="demoCode.icons"
|
|
>
|
|
<p>Previous and next page icons can be customized with the <code>prev-icon</code> and <code>next-icon</code> props.</p>
|
|
|
|
<DemoPaginationIcons />
|
|
</AppCardCode>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<!-- 👉 Length -->
|
|
<AppCardCode
|
|
title="Length"
|
|
:code="demoCode.length"
|
|
>
|
|
<p>Using the <code>length</code> prop you can set the length of <code>v-pagination</code>, if the number of page buttons exceeds the parent container, it will truncate the list.</p>
|
|
|
|
<DemoPaginationLength />
|
|
</AppCardCode>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<!-- 👉 Total visible -->
|
|
<AppCardCode
|
|
title="Total visible"
|
|
:code="demoCode.totalVisible"
|
|
>
|
|
<p>You can also manually set the maximum number of visible page buttons with the <code>total-visible</code> prop.</p>
|
|
|
|
<DemoPaginationTotalVisible />
|
|
</AppCardCode>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<!-- 👉 Color -->
|
|
<AppCardCode
|
|
title="Color"
|
|
:code="demoCode.color"
|
|
>
|
|
<p>Use <code>color</code> prop for create different color pagination.</p>
|
|
|
|
<DemoPaginationColor />
|
|
</AppCardCode>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<!-- 👉 Size -->
|
|
<AppCardCode
|
|
title="Size"
|
|
:code="demoCode.size"
|
|
>
|
|
<p>Use <code>size</code> prop to sets the height and width of the component. Default unit is px. Can also use the following predefined sizes: <strong>x-small</strong>, <strong>small</strong>, <strong>default</strong>, <strong>large</strong>, and <strong>x-large</strong>.</p>
|
|
|
|
<DemoPaginationSize />
|
|
</AppCardCode>
|
|
</VCol>
|
|
</VRow>
|
|
</template>
|