nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

How do I use Calcite pagination with latest Calcite update? It no longer works for me.

ArianaBernal

I have an application I have been working on using the Calcite design system but since I updated Calcite to the latest version out of Beta the pagination function I have no longer works. There used to be a "detail" property which allowed me to change the content my modal when you click the pagination button but this method is now gone...

I see the examples of this pagination component working with the "next Page" "previousPage" methods, nor any explanation to where I am supposed to use those methods.

Can I see an example with this actually working with content or panels? I have attached examples how mine is working using the Beta calcite version.

Info button showing this work - https://cityview.roundrocktexas.gov/

2023-04-14_9-52-23.png

2023-04-14_9-50-17.png

2023-04-14_9-36-26.png

MicrosoftTeams-image (10).png

RyanBohan_1-1726871317302.png

OguzSariyildiz_0-1606678274017.png

quality-3D.png

RyanBohan_0-1726871034344.png

Encuentra más publicaciones etiquetadas con

Components

Documentation

Accepted answers

KittyHurley

Hello @ArianaBernal, between the beta and production releases, as you mentioned, we had a considerable number of breaking changes.

One of which was our event payload, which was changed from detail to target across components:

const paginationEl = document.querySelector("calcite-pagination");
paginationEl.addEventListener("calcitePaginationChange", (evt) => console.log(evt.target.startItem));

There are some tips and tricks on the Core Concepts page, including some information on events, which could be a great resource to identify some of our patterns with the production release.

Would also recommend taking a look at the release notes for 1.0.3 and breaking changes between the beta and production releases, such as 1.0.3 and beta.99. Calcite follows semantic versioning, so production breaking changes will be evident when the major release changes in the future.

All comments

KittyHurley

Hello @ArianaBernal, between the beta and production releases, as you mentioned, we had a considerable number of breaking changes.

One of which was our event payload, which was changed from detail to target across components:

const paginationEl = document.querySelector("calcite-pagination");
paginationEl.addEventListener("calcitePaginationChange", (evt) => console.log(evt.target.startItem));

There are some tips and tricks on the Core Concepts page, including some information on events, which could be a great resource to identify some of our patterns with the production release.

coryeicher

Hi Ariana,

For pagination, I have something working on this Calcite version. Let me
know if this could be helpful and I can dig a little deeper.

1.0.0-beta.77

I have yet to migrate forward from this version

-Cory

ArianaBernal

This worked for me thank you!

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.