Pager CSS API Reference

All Common CSS variables:

    Specific CSS variables for Pager styling:

    • --smart-pager-default-width: Default pager width.
    • --smart-pager-default-height: Default pager height.
    • --smart-pager-button-width: Default pager button width.
    • --smart-pager-button-height: Default pager button height.
    • --smart-pager-page-size-selector-width: Default page size selector width.
    • --smart-pager-page-index-selector-width: Default pager item width.
    • --smart-pager-page-index-selector-height: Default pager item height.
    • --smart-pager-page-index-ellipsis-selector-width: Default pager ellipsis width.
    • --smart-pager-page-index-ellipsis-selector-height: Default pager ellipsis height.
    • --smart-pager-page-index-selector-horizontal-offset: Default horizontal offset of the page index selectors.
    • --smart-pager-padding: Default padding.
    • --smart-pager-input-width: Default width of the pager input.

    The following CSS selectors can be used to style Pager:

    • smart-pager - the element itself. Can be used to set width and height for the whole element.
      • .smart-container - the container that holds all of the internals of the element. Shoudn't be used for styling.
        • .smart-pager-near-buttons-container - a container for the near buttons
          • .smart-first-button - smartButton used to navigate to the first page.
          • .smart-previous-page-button - smartRepeatButton used to navigate to the previous page.
        • .smart-pager-middle-buttons-container - a container for the middle buttons.
          • .smart-previous-ellipsis-button .smart-pager-page-index-selector - a SPAN element used to indicate that there are more previous pages.
          • .smart-pager-page-index-selectors-container - a container for the page index selector.
          • .smart-next-ellipsis-button .smart-pager-page-index-selector - a SPAN element used to indicate that there are more next pages.
        • .smart-pager-far-buttons-container - a container for the far buttons.
          • .smart-next-page-button .smart-pager-button - a smartRepeatButton used for next page navigation. It is shown if there is such a page.
          • .smart-last-button .smart-pager-button - smartButton used to navigate to the last page.
        • .smart-pager-settings-container - a container for the pager settings.
          • .smart-pager-label - page navigation label.
          • .smart-pager-input - an input element for page index entering.
          • .smart-pager-label - page size label.
          • .smart-page-size-selector - a smartDropDownList that offsers page size selection from a set of items.
          • .smart-pager-label - a 'summary' label displaying the selected page configuration.

    Demo

    <style>
        #pager{
            --smart-pager-border-top-right-radius:20px;
            --smart-pager-border-top-left-radius:20px;
            --smart-pager-border-bottom-left-radius:20px;
            --smart-pager-border-bottom-right-radius:20px;
        }
</style>