diff --git a/assets/css/basic.css b/assets/css/basic.css index ecc5fcae..8332ca99 100644 --- a/assets/css/basic.css +++ b/assets/css/basic.css @@ -158,6 +158,23 @@ input:disabled + label { .pager-align-end { justify-content: flex-end; } +.pager-summary { + color: var(--val-color--text--muted); + font-size: 0.8125rem; + align-self: flex-start; + margin-inline-end: auto; +} +.pager-align-start .pager-summary { + order: 1; + margin-inline-end: 0; + margin-inline-start: auto; +} +.pager-align-center .pager-summary { + order: 1; + flex-basis: 100%; + text-align: center; + margin-inline-end: 0; +} .pagination { display: flex; diff --git a/src/base/component/pager.rs b/src/base/component/pager.rs index d2d6fd50..a59ce70d 100644 --- a/src/base/component/pager.rs +++ b/src/base/component/pager.rs @@ -83,10 +83,14 @@ pub enum PagerAlign { /// para saltar directamente a una página escribiendo su número, sin depender de JavaScript. Un /// único campo numérico (`min`/`max` según el total de páginas) y un botón de envío. /// +/// Con [`with_summary()`](Self::with_summary) se puede añadir un texto que resume la vista de las +/// páginas que se muestran en ese momento. Por defecto está oculto. +/// /// # Clases CSS /// /// - `.pager` - clase base del componente (elemento `