Pagination & Scroll

Pagination & Scroll patterns help users move between pages or jump to more data in a page. Bacically we use in big numbar of list, grid, table date.

We can declayer list's as Navigation by adding CSS class jds-pagination

Pagination

Pagination / Rounded

Code View

Pagination / Icon Only

Code View


    
        
                            
        
        
        Items per page: 10
        30 – 39
        Page No: 3

Pagination / Primary

CSS class:- jds-pagination and pagination-primary

Pagination / Primary / rounded

CSS class:- jds-pagination, pagination-primary with active, item-blank, flex-gap5

Pagination / warning, success, error, info, tertiary, gray, foreground, background

CSS class:- pagination-primary, pagination-warning, pagination-success, pagination-error, pagination-info, pagination-tertiary, pagination-gray, pagination-foreground, pagination-background

Scrollbar

jds-scroller class use for inisiate a Scrollbar in a dome, Remembar scrollbar will work with height and width

Scroll patterns help users move huge data in a small window. Bacically we use scroller to manage vitual space.

We can use Scrollbar horizontal or vertical or both side by adding CSS class scroller-x, scroller-y, scroller-xy

You can add some extra activitys on a scrollbar. Like - hide Scrollbar by the class scroller-hide, Only show on hover class scroller-hover

Some extra option to manipulate scrollbar

jds-scroller

Scroll bar Testing here.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam consectetur nisi, adipisci doloribus assumenda consequatur hic nam accusamus voluptatem expedita, iste ea laudantium molestiae tempore! Mollitia consequatur ipsum rem saepe!

Laboriosam consectetur nisi, adipisci doloribus assumenda consequatur hic nam accusamus voluptatem expedita, iste ea laudantium molestiae tempore! Mollitia consequatur ipsum rem saepe! Lorem ipsum dolor sit amet consectetur adipisicing elit.

jds-scroller, scroller-y

Scroller on vertical axis

scroller-hover

jds-scroller, scroller-x

Scroller on horizontal axis

01. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam consectetur nisi, adipisci doloribus assumenda consequatur hic nam accusamus voluptatem expedita, iste ea laudantium molestiae tempore! Mollitia consequatur ipsum rem saepe!

02. Laboriosam consectetur nisi, adipisci doloribus assumenda consequatur hic nam accusamus voluptatem expedita, iste ea laudantium molestiae tempore! Mollitia consequatur ipsum rem saepe! Lorem ipsum dolor sit amet consectetur adipisicing elit.

03. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam consectetur nisi, iste ea laudantium molestiae tempore! Mollitia consequatur ipsum rem saepe!

04. Laboriosam consectetur nisi, adipisci doloribus assumenda consequatur hic nam accusamus voluptatem expedita, iste ea laudantium molestiae tempore! Mollitia consequatur ipsum rem saepe!

05. Lorem ipsum dolor sit amet consectetur adipisicing elit.

06. Lorem ipsum dolor sit amet consectetur adipisicing elit.

07. Lorem ipsum dolor sit amet consectetur adipisicing elit.

08. Lorem ipsum dolor sit amet consectetur adipisicing elit.

jds-scroller, scroller-xy

Scroller on horizontal and vertical both side

03. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam consectetur nisi, iste ea laudantium molestiae tempore! Mollitia consequatur ipsum rem saepe!

04. Laboriosam consectetur nisi, adipisci doloribus assumenda consequatur hic nam accusamus voluptatem expedita, iste ea laudantium molestiae tempore! Mollitia consequatur ipsum rem saepe!

05. Lorem ipsum dolor sit amet consectetur adipisicing elit.

06. Lorem ipsum dolor sit amet consectetur adipisicing elit.

07. Lorem ipsum dolor sit amet consectetur adipisicing elit.

08. Lorem ipsum dolor sit amet consectetur adipisicing elit.

jds-scroller, scroller-hover, scroller-y

Scroller on hover vertical axis

jds-scroller, scroller-xy

Scroller on hover horizontal and vertical both side

03. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam consectetur nisi, iste ea laudantium molestiae tempore! Mollitia consequatur ipsum rem saepe!

04. Laboriosam consectetur nisi, adipisci doloribus assumenda consequatur hic nam accusamus voluptatem expedita, iste ea laudantium molestiae tempore! Mollitia consequatur ipsum rem saepe!

05. Lorem ipsum dolor sit amet consectetur adipisicing elit.

06. Lorem ipsum dolor sit amet consectetur adipisicing elit.

07. Lorem ipsum dolor sit amet consectetur adipisicing elit.

08. Lorem ipsum dolor sit amet consectetur adipisicing elit.

jds-scroller, scroller-hide, scroller-y

Scroller on hover horizontal axis

Code View


  Laboriosam consectetur nisi
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam consectetur nisi adipisci doloribus assumenda consequatur.

Color option

←←←←←←←←← scroller-foreground →→→→→→→→→→

←←←←←←←←← scroller-primary →→→→→→→→→→

←←←←←←←←← scroller-success →→→→→→→→→→

←←←←←←←←← scroller-warning →→→→→→→→→→

←←←←←←←←← scroller-error →→→→→→→→→→

←←←←←←←←← scroller-info →→→→→→→→→→

←←←←←←←←← scroller-tertiary →→→→→→→→→→

←←←←←←←←← scroller-white →→→→→→→→→→

←←←←←←←←← scroller-black →→→→→→→→→→

You can get some Navbar / header here

Navbar / header