Pagination

composant

The links between the pages of a list.

Aperçu

Clair

Code

<twig:Pagination>
    <twig:Pagination:Content>
        <twig:Pagination:Item><twig:Pagination:Previous href="?page=1" /></twig:Pagination:Item>
        <twig:Pagination:Item><twig:Pagination:Link href="?page=2" :active="true">2</twig:Pagination:Link></twig:Pagination:Item>
        <twig:Pagination:Item><twig:Pagination:Ellipsis /></twig:Pagination:Item>
        <twig:Pagination:Item><twig:Pagination:Next href="?page=3" /></twig:Pagination:Item>
    </twig:Pagination:Content>
</twig:Pagination>

Sombre

Code

<twig:Pagination>
    <twig:Pagination:Content>
        <twig:Pagination:Item><twig:Pagination:Previous href="?page=1" /></twig:Pagination:Item>
        <twig:Pagination:Item><twig:Pagination:Link href="?page=2" :active="true">2</twig:Pagination:Link></twig:Pagination:Item>
        <twig:Pagination:Item><twig:Pagination:Ellipsis /></twig:Pagination:Item>
        <twig:Pagination:Item><twig:Pagination:Next href="?page=3" /></twig:Pagination:Item>
    </twig:Pagination:Content>
</twig:Pagination>

Installation

php bin/console ux:install pagination --kit=github.com/parler-haut-interagir-librement/ux-kit

Elle apporte les recettes dont elle a besoin : button

Propriétés

Propriété	Type	Par défaut	Description
`label`	`string`	`'Pagination'`	The name of the navigation for screen readers.

Accessibility

A nav named by label; the current page says aria-current="page". Each text is a prop, to translate.

Fichiers à copier

templates/components/Pagination.html.twig

{%- props
    ## string The name of the navigation for screen readers.
    label = 'Pagination'
-%}
<nav data-slot="pagination"{{ attributes.defaults({class: 'isPagination', 'aria-label': label}) }}>
{##- The pagination structure, typically a `Pagination:Content`. -#}
{%- block content %}{% endblock -%}
</nav>

templates/components/Pagination/Content.html.twig

<ul data-slot="pagination-content"{{ attributes.defaults({class: 'isPaginationList'}) }}>
{##- The pagination items, typically multiple `Pagination:Item` components. -#}
{%- block content %}{% endblock -%}
</ul>

templates/components/Pagination/Ellipsis.html.twig

{%- props
    ## string What screen readers read instead of the ellipsis.
    text = 'More pages'
-%}
<span data-slot="pagination-ellipsis"{{ attributes.defaults({class: 'isPaginationEllipsis'}) }}><span aria-hidden="true">&hellip;</span><span class="isVisuallyHidden">{{ text }}</span></span>

templates/components/Pagination/Item.html.twig

<li data-slot="pagination-item"{{ attributes.defaults({class: 'isPaginationItem'}) }}>
{##- The pagination item content, typically a `Pagination:Link`. -#}
{%- block content %}{% endblock -%}
</li>

templates/components/Pagination/Link.html.twig

{%- props
    ## bool Whether this is the current page.
    active = false,
    ## 'default'|'xs'|'sm'|'lg'|'icon'|'icon-xs'|'icon-sm'|'icon-lg' The button size.
    size = 'icon'
-%}
<twig:Button class="isPaginationLink" as="a" variant="{{ active ? 'outline' : 'ghost' }}" size="{{ size }}" :aria-current="active ? 'page' : false" data-slot="pagination-link" data-active="{{ active ? 'true' : 'false' }}" {{ ...attributes }}>
    {##- The page number or navigation icon. -#}
    {{- block(outerBlocks.content) -}}
</twig:Button>

templates/components/Pagination/Next.html.twig

{%- props
    ## string The label text.
    text = 'Next',
    ## string What screen readers read for the link.
    label = 'Go to next page'
-%}
<twig:Pagination:Link size="default" aria-label="{{ label }}" {{ ...attributes }}>
    <span>{{ text }}</span>
    <span aria-hidden="true">&rsaquo;</span>
</twig:Pagination:Link>

templates/components/Pagination/Previous.html.twig

{%- props
    ## string The label text.
    text = 'Previous',
    ## string What screen readers read for the link.
    label = 'Go to previous page'
-%}
<twig:Pagination:Link size="default" aria-label="{{ label }}" {{ ...attributes }}>
    <span aria-hidden="true">&lsaquo;</span>
    <span>{{ text }}</span>
</twig:Pagination:Link>