Pagination

import { Pagination } from "@grassroot/ui-react";
 
const [page, setPage] = React.useState(5);
 
<Pagination page={page} count={12} onPageChange={setPage} />

<script setup lang="ts">
import { ref } from "vue";
import { Pagination } from "@grassroot/ui-vue";
 
const page = ref(5);
</script>
 
<template>
  <Pagination :page="page" :count="12" @page-change="page = $event" />
</template>

import { Component, signal } from "@angular/core";
import { GrassrootPagination } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootPagination],
  template: `
    <grassroot-pagination [page]="page()" [count]="12" (pageChange)="page.set($event)" />
  `,
})
export class ExampleComponent {
  readonly page = signal(5);
}

<script lang="ts">
  import { Pagination } from "@grassroot/ui-svelte";
 
  let page = $state(5);
</script>
 
<Pagination page={page} count={12} onPageChange={(next) => (page = next)} />

import { createSignal } from "solid-js";
import { Pagination } from "@grassroot/ui-solid";
 
export function Example() {
  const [page, setPage] = createSignal(5);
 
  return (
    <>
      <Pagination page={page()} count={12} onPageChange={setPage} />
    </>
  );
}