ترقيم الصفحات · النمط البصري

    <.pagination class="pagination" count={50} page={3} page_size={10}>
  <:prev><.heroicon name="hero-chevron-left" /></:prev>
  <:next><.heroicon name="hero-chevron-right" /></:next>
  <:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination pagination--accent" count={50} page={3} page_size={10}>
  <:prev><.heroicon name="hero-chevron-left" /></:prev>
  <:next><.heroicon name="hero-chevron-right" /></:next>
  <:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination pagination--brand" count={50} page={3} page_size={10}>
  <:prev><.heroicon name="hero-chevron-left" /></:prev>
  <:next><.heroicon name="hero-chevron-right" /></:next>
  <:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination pagination--alert" count={50} page={3} page_size={10}>
  <:prev><.heroicon name="hero-chevron-left" /></:prev>
  <:next><.heroicon name="hero-chevron-right" /></:next>
  <:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination pagination--success" count={50} page={3} page_size={10}>
  <:prev><.heroicon name="hero-chevron-left" /></:prev>
  <:next><.heroicon name="hero-chevron-right" /></:next>
  <:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination pagination--info" count={50} page={3} page_size={10}>
  <:prev><.heroicon name="hero-chevron-left" /></:prev>
  <:next><.heroicon name="hero-chevron-right" /></:next>
  <:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>

  

    <.pagination class="pagination pagination--sm" count={50} page={3} page_size={10}>
  <:prev><.heroicon name="hero-chevron-left" /></:prev>
  <:next><.heroicon name="hero-chevron-right" /></:next>
  <:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination pagination--md" count={50} page={3} page_size={10}>
  <:prev><.heroicon name="hero-chevron-left" /></:prev>
  <:next><.heroicon name="hero-chevron-right" /></:next>
  <:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination pagination--lg" count={50} page={3} page_size={10}>
  <:prev><.heroicon name="hero-chevron-left" /></:prev>
  <:next><.heroicon name="hero-chevron-right" /></:next>
  <:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination pagination--xl" count={50} page={3} page_size={10}>
  <:prev><.heroicon name="hero-chevron-left" /></:prev>
  <:next><.heroicon name="hero-chevron-right" /></:next>
  <:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>

  

    <.pagination class="pagination pagination--text-sm" count={50} page={3} page_size={10}>
  <:prev><.heroicon name="hero-chevron-left" /></:prev>
  <:next><.heroicon name="hero-chevron-right" /></:next>
  <:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination pagination--text-xl" count={50} page={3} page_size={10}>
  <:prev><.heroicon name="hero-chevron-left" /></:prev>
  <:next><.heroicon name="hero-chevron-right" /></:next>
  <:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination pagination--text-2xl" count={50} page={3} page_size={10}>
  <:prev><.heroicon name="hero-chevron-left" /></:prev>
  <:next><.heroicon name="hero-chevron-right" /></:next>
  <:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination pagination--text-4xl" count={50} page={3} page_size={10}>
  <:prev><.heroicon name="hero-chevron-left" /></:prev>
  <:next><.heroicon name="hero-chevron-right" /></:next>
  <:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>

  

    <.pagination class="pagination pagination--rounded-none" count={50} page={3} page_size={10}>
  <:prev><.heroicon name="hero-chevron-left" /></:prev>
  <:next><.heroicon name="hero-chevron-right" /></:next>
  <:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination pagination--rounded-sm" count={50} page={3} page_size={10}>
  <:prev><.heroicon name="hero-chevron-left" /></:prev>
  <:next><.heroicon name="hero-chevron-right" /></:next>
  <:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination pagination--rounded-md" count={50} page={3} page_size={10}>
  <:prev><.heroicon name="hero-chevron-left" /></:prev>
  <:next><.heroicon name="hero-chevron-right" /></:next>
  <:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination pagination--rounded-lg" count={50} page={3} page_size={10}>
  <:prev><.heroicon name="hero-chevron-left" /></:prev>
  <:next><.heroicon name="hero-chevron-right" /></:next>
  <:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination pagination--rounded-xl" count={50} page={3} page_size={10}>
  <:prev><.heroicon name="hero-chevron-left" /></:prev>
  <:next><.heroicon name="hero-chevron-right" /></:next>
  <:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination pagination--rounded-full" count={50} page={3} page_size={10}>
  <:prev><.heroicon name="hero-chevron-left" /></:prev>
  <:next><.heroicon name="hero-chevron-right" /></:next>
  <:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>

  

    <.pagination class="pagination max-w-2xs" count={50} page={3} page_size={10}>
  <:prev><.heroicon name="hero-chevron-left" /></:prev>
  <:next><.heroicon name="hero-chevron-right" /></:next>
  <:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination max-w-md" count={50} page={3} page_size={10}>
  <:prev><.heroicon name="hero-chevron-left" /></:prev>
  <:next><.heroicon name="hero-chevron-right" /></:next>
  <:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination max-w-xl" count={50} page={3} page_size={10}>
  <:prev><.heroicon name="hero-chevron-left" /></:prev>
  <:next><.heroicon name="hero-chevron-right" /></:next>
  <:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>
<.pagination class="pagination max-w-2xl" count={50} page={3} page_size={10}>
  <:prev><.heroicon name="hero-chevron-left" /></:prev>
  <:next><.heroicon name="hero-chevron-right" /></:next>
  <:ellipsis><.heroicon name="hero-ellipsis-horizontal" /></:ellipsis>
</.pagination>