Pagination

Default

  • 2
  • 4
  • 5

  • Disclaimer

    Our Pagination kit depends on the will_paginate library. Please follow the basic will_paginate setup.

    Once you have perfomed the paginated query in your controller file you can use our kit (see code example below) instead of <%= will_paginate @users %> in your view file.

    You need to add: require "playbook/pagination_renderer" in your apps controller file.



    Available Props

    Props Type Values

    max_width

    array
    xs
    sm
    md
    lg
    xl
    xxl
    0
    none

    z_index

    array
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    number_spacing

    array
    tabular

    shadow

    array
    none
    deep
    deeper
    deepest

    line_height

    array
    tightest
    tighter
    tight
    normal
    loose
    looser
    loosest

    display

    array
    block
    inline_block
    inline
    flex
    inline_flex
    none

    cursor

    array
    auto
    default
    none
    contextMenu
    help
    pointer
    progress
    wait
    cell
    crosshair
    text
    verticalText
    alias
    copy
    move
    noDrop
    notAllowed
    grab
    grabbing
    eResize
    nResize
    neResize
    nwResize
    sResize
    seResize
    swResize
    wResize
    ewResize
    nsResize
    neswResize
    nwseResize
    colResize
    rowResize
    allScroll
    zoomIn
    zoomOut

    flex_direction

    array
    row
    column
    rowReverse
    columnReverse

    flex_wrap

    array
    wrap
    nowrap
    wrapReverse

    justify_content

    array
    start
    end
    center
    spaceBetween
    spaceAround
    spaceEvenly

    justify_self

    array
    auto
    start
    end
    center
    stretch

    align_items

    array
    flexStart
    flexEnd
    start
    end
    center
    baseline
    stretch

    align_content

    array
    start
    end
    center
    spaceBetween
    spaceAround
    spaceEvenly

    align_self

    array
    auto
    start
    end
    center
    stretch
    baseline

    flex

    array
    auto
    initial
    0
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    none

    flex_grow

    array
    1
    0

    flex_shrink

    array
    1
    0

    order

    array
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    position

    array
    relative
    absolute
    fixed
    sticky

    hover

    array

    border_radius

    array
    none
    xs
    sm
    md
    lg
    xl
    rounded

    text_align

    array
    start
    end
    left
    right
    center
    justify
    justify-all
    match-parent

    overflow

    array
    visible
    hidden
    scroll
    auto

    truncate

    array
    1
    2
    3
    4
    5

    left

    array
    0
    xxs
    xs
    sm
    md
    lg
    xl
    auto
    initial
    inherit

    top

    array
    0
    xxs
    xs
    sm
    md
    lg
    xl
    auto
    initial
    inherit

    right

    array
    0
    xxs
    xs
    sm
    md
    lg
    xl
    auto
    initial
    inherit

    bottom

    array
    0
    xxs
    xs
    sm
    md
    lg
    xl
    auto
    initial
    inherit

    overflow_x

    array
    visible
    hidden
    scroll
    auto

    overflow_y

    array
    visible
    hidden
    scroll
    auto

    classname

    string

    dark

    boolean

    margin

    array
    none
    xxs
    xs
    sm
    md
    lg
    xl

    margin_bottom

    array
    none
    xxs
    xs
    sm
    md
    lg
    xl

    margin_left

    array
    none
    xxs
    xs
    sm
    md
    lg
    xl

    margin_right

    array
    none
    xxs
    xs
    sm
    md
    lg
    xl

    margin_top

    array
    none
    xxs
    xs
    sm
    md
    lg
    xl

    margin_x

    array
    none
    xxs
    xs
    sm
    md
    lg
    xl

    margin_y

    array
    none
    xxs
    xs
    sm
    md
    lg
    xl

    padding

    array
    none
    xxs
    xs
    sm
    md
    lg
    xl

    padding_bottom

    array
    none
    xxs
    xs
    sm
    md
    lg
    xl

    padding_left

    array
    none
    xxs
    xs
    sm
    md
    lg
    xl

    padding_right

    array
    none
    xxs
    xs
    sm
    md
    lg
    xl

    padding_top

    array
    none
    xxs
    xs
    sm
    md
    lg
    xl

    padding_x

    array
    none
    xxs
    xs
    sm
    md
    lg
    xl

    padding_y

    array
    none
    xxs
    xs
    sm
    md
    lg
    xl

    id

    string

    data

    hashprop

    aria

    hashprop

    html_options

    hashprop

    children

    proc
    Props Type Values Default

    model

    string

    view

    string