Pagination

Basic usage

<script>
  let current
</script>

<CPagination pages={6} bind:current />

<script>
  let current
</script>

<CPagination pages={6} bind:current />

svelte

Shapes

<script>
  let current
</script>
<div class="c-column c-gutter-md">
  <CPagination pages={6} bind:current shape="square" />
  <CPagination pages={6} bind:current shape="rounded" />
  <CPagination pages={6} bind:current shape="circle" />
</div>

<script>
  let current
</script>
<div class="c-column c-gutter-md">
  <CPagination pages={6} bind:current shape="square" />
  <CPagination pages={6} bind:current shape="rounded" />
  <CPagination pages={6} bind:current shape="circle" />
</div>

svelte

Sizes

<script>
  let current
</script>
<div class="c-column c-gutter-md">
  <CPagination pages={6} bind:current size="xs" />
  <CPagination pages={6} bind:current size="sm" shape="rounded" />
  <CPagination pages={6} bind:current shape="circle" />
  <CPagination pages={6} bind:current size="lg" shape="rounded" />
  <CPagination pages={6} bind:current size="xl" />
</div>

<script>
  let current
</script>
<div class="c-column c-gutter-md">
  <CPagination pages={6} bind:current size="xs" />
  <CPagination pages={6} bind:current size="sm" shape="rounded" />
  <CPagination pages={6} bind:current shape="circle" />
  <CPagination pages={6} bind:current size="lg" shape="rounded" />
  <CPagination pages={6} bind:current size="xl" />
</div>

svelte

Gutter sizes

<script>
  let current
</script>
<div class="c-column c-gutter-md">
  <CPagination pages={6} bind:current gutterSize="xs" />
  <CPagination pages={6} bind:current gutterSize="sm" />
  <CPagination pages={6} bind:current />
  <CPagination pages={6} bind:current gutterSize="lg" />
  <CPagination pages={6} bind:current gutterSize="xl" />
</div>

<script>
  let current
</script>
<div class="c-column c-gutter-md">
  <CPagination pages={6} bind:current gutterSize="xs" />
  <CPagination pages={6} bind:current gutterSize="sm" />
  <CPagination pages={6} bind:current />
  <CPagination pages={6} bind:current gutterSize="lg" />
  <CPagination pages={6} bind:current gutterSize="xl" />
</div>

svelte

Themes

<script>
  let current
</script>
<div class="c-column c-gutter-md">
  <CPagination pages={6} bind:current theme="primary" shape="circle" />
  <CPagination pages={6} bind:current theme="secondary" shape="circle" />
  <CPagination pages={6} bind:current theme="warning" shape="circle" />
  <CPagination pages={6} bind:current theme="negative" shape="circle" />
</div>

<script>
  let current
</script>
<div class="c-column c-gutter-md">
  <CPagination pages={6} bind:current theme="primary" shape="circle" />
  <CPagination pages={6} bind:current theme="secondary" shape="circle" />
  <CPagination pages={6} bind:current theme="warning" shape="circle" />
  <CPagination pages={6} bind:current theme="negative" shape="circle" />
</div>

svelte

No to first/last button

<script>
  let current
</script>

<CPagination pages={6} bind:current showBoundaryButton={false} />

<script>
  let current
</script>

<CPagination pages={6} bind:current showBoundaryButton={false} />

svelte

No prev/next button

<script>
  let current
</script>

<CPagination pages={6} bind:current showPrevNextButton={false} />

<script>
  let current
</script>

<CPagination pages={6} bind:current showPrevNextButton={false} />

svelte

Max display pages

<script>
  let current = 4
</script>

<CPagination pages={10} maxDisplayPages={3} bind:current />

<script>
  let current = 4
</script>

<CPagination pages={10} maxDisplayPages={3} bind:current />

svelte

Customize buttons with slots

<script>
  let current = 4
</script>

<CPagination pages={10} maxDisplayPages={3} bind:current>
  <button slot="to-first" let:set let:disabled on:click={set} {disabled}>
    To first
  </button>
  <CButton
    slot="to-prev"
    let:set
    let:disabled
    on:click={set}
    {disabled}
    flat
    theme="negative"
    >
    <div class="i-ph-arrow-arc-left-fill"></div>
  </CButton>

  <CButton slot="left-ellipsis" let:set flat theme="warning" on:click={set}>
    <div class="i-ion-ellipsis-horizontal-circle"></div>
  </CButton>

  <button slot="page-button" let:p let:active on:click={() => (current = p)}>
    <span class:c-text-primary={active} class:c-font-xl={active}>
      {p}
    </span>
  </button>

  <CButton slot="right-ellipsis" let:set flat theme="warning" on:click={set}>
    <div class="i-octicon-ellipsis-16"></div>
  </CButton>

  <CButton
    slot="to-next"
    let:set
    let:disabled
    on:click={set}
    {disabled}
    flat
    theme="secondary"
    >
    <div class="i-ph-arrow-arc-right-fill"></div>
  </CButton>

   <button slot="to-last" let:set let:disabled on:click={set} {disabled}>
    To last
  </button>
</CPagination>

<script>
  let current = 4
</script>

<CPagination pages={10} maxDisplayPages={3} bind:current>
  <button slot="to-first" let:set let:disabled on:click={set} {disabled}>
    To first
  </button>
  <CButton
    slot="to-prev"
    let:set
    let:disabled
    on:click={set}
    {disabled}
    flat
    theme="negative"
    >
    <div class="i-ph-arrow-arc-left-fill"></div>
  </CButton>

  <CButton slot="left-ellipsis" let:set flat theme="warning" on:click={set}>
    <div class="i-ion-ellipsis-horizontal-circle"></div>
  </CButton>

  <button slot="page-button" let:p let:active on:click={() => (current = p)}>
    <span class:c-text-primary={active} class:c-font-xl={active}>
      {p}
    </span>
  </button>

  <CButton slot="right-ellipsis" let:set flat theme="warning" on:click={set}>
    <div class="i-octicon-ellipsis-16"></div>
  </CButton>

  <CButton
    slot="to-next"
    let:set
    let:disabled
    on:click={set}
    {disabled}
    flat
    theme="secondary"
    >
    <div class="i-ph-arrow-arc-right-fill"></div>
  </CButton>

   <button slot="to-last" let:set let:disabled on:click={set} {disabled}>
    To last
  </button>
</CPagination>

svelte

CPagination Props

pages
number
default: 0

The total page count
shape
'circle' | 'square' | 'rounded'
default: square
current
number
default: 1

Current page. It is recommended to use bind:current
maxDisplayPages
number
default: 5

The max page count to display. Will display ... when the pages is larger than this
size
any
default: undefined

The size of all buttons
gutterSize
string
default: md

The gutter size between each button
theme
any
default: undefined

The theme of all buttons
showBoundaryButton
boolean
default: true

Determine whether to show the to first/last button or not.
showPrevNextButton
boolean
default: true

Determine whether to show the to prev/next button or not.

CPagination Events

No data

CPagination Slots

to-first

Customize the "to first" button

Bindings:
- set function
  
  Set first page
- disabled function
  
  Determine whether the button should be disabled or not
to-prev

Customize the "to prev" button

Bindings:
- set function
  
  Do set previous page
- disabled boolean
  
  Determine whether the button should be disabled or not
left-ellipsis

Customize the left ellipsis button

Bindings:
- set function
  
  Set left ellipsis page
page-button

Customize the page button

Bindings:
- p number
  
  The page number
- active boolean
  
  Determine whether the button is active or not
right-ellipsis

Customize the right ellipsis button

Bindings:
- set function
  
  Set right ellipsis page
to-next

Customize the "to next" button

Bindings:
- set function
  
  Set next page
- disabled boolean
  
  Determine whether the button should be disabled or not
to-last

Customize the "to last" button

Bindings:
- set function
  
  Set last page
- disabled boolean
  
  Determine whether the button should be disabled or not

CPagination Exports

No data

Suggest changes to this page

Last update at: 2023/08/15 05:00:08

On this page

Basic usage Shapes Sizes Gutter sizes Themes No to first/last button No prev/next button Max display pages Customize buttons with slots CPagination Props CPagination Events CPagination Slots CPagination Exports