Deepyr Documentation

Pagination

For pagination, we use the Join component to group multiple links or buttons next to each other.

Pagination with an active button

The smart `Join` component automatically applies the `join-item` class to its direct `Button` children.

// The `Join` component handles adding the `join-item` class automatically.
Join([
  Button([text('1')]),
  Button([text('2')], style: [Button.active]),
  Button([text('3')]),
  Button([text('4')]),
])

Sizes

// xs
Join([
  Button([text('1')], style: [Button.xs]),
  Button([text('2')], style: [Button.xs, Button.active]),
  Button([text('3')], style: [Button.xs]),
  Button([text('4')], style: [Button.xs]),
]),
// sm
Join([...]), // etc.

With a disabled button

Join([
  Button([text('1')]),
  Button([text('2')]),
  Button([text('...')], style: [Button.disabled]),
  Button([text('99')]),
  Button([text('100')]),
])

Next/Prev buttons

Join([
  Button([text('«')]),
  Button([text('Page 22')]),
  Button([text('»')]),
])

Next/Prev outline buttons with equal width

Use the `classes` property on the Join container for layout utilities like `grid` that are not yet abstracted in deepyr.

Join(
  [
    Button([text('Previous page')], style: [Button.outline]),
    Button([text('Next')], style: [Button.outline]),
  ],
  // Apply grid layout classes directly to the Join container.
  classes: 'grid grid-cols-2',
)

Using radio inputs

For primitive Jaspr components like `input()`, which do not extend `UiComponent`, the `join-item` class must be added manually.

// For primitive components, `join-item` must be added manually.
Join([
  input(
    type: InputType.radio,
    name: 'pagination_options',
    classes: 'join-item btn btn-square',
    attributes: {'aria-label': '1', 'checked': ''},
  ),
  input(
    type: InputType.radio,
    name: 'pagination_options',
    classes: 'join-item btn btn-square',
    attributes: {'aria-label': '2'},
  ),
  // ... more radio inputs
])