Pagination

Basic usage

<script>
  let current
</script>

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

<CPagination pages={6} bind:current />
svelte
Click fold/expand code

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
Click fold/expand code

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
Click fold/expand code

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
Click fold/expand code

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
Click fold/expand code

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
Click fold/expand code

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
Click fold/expand code

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
Click fold/expand code

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
Click fold/expand code

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:32:01