Pager CSS Styling

Smart.Pager represents an element, which is used for navigation between multiple pages, by clicking on its items.

Required files

The Smart.Pager element requires the following file references to be placed on a web page in order for the custom element to be successfully registered and properly working:

  • smart.element.js — this is the base file that defines the common architecture of all Smart custom elements. It is part of the repository ni-kismet/smart-element.
  • smart.button.js — this file defines the functionality of the Smart.Button custom element. Used about navigation buttons.
  • smart.listbox.js — this file defines the functionality of the Smart.ListBox custom element. Used in pager’s drop down list.
  • smart.dropdownlist.js — this file defines the functionality of the SmartDropDown custom element. Used as pager’s drop down list.
  • smart.pager.js — this file defines the functionality of the Smart.Pager custom element.

Smart.Pager also requires the following style sheets in order to be displayed correctly.

  • smart.base.css — the base style sheet file.

Initialization

To create an instance of the Smart.Pager custom element, insert the following tag in an HTML page:

<smart-pager></smart-pager>

To set properties of the custom element initially, do so by setting the respective attributes of the tag, e.g.:

<smart-pager items="100"></smart-power-button>

Getting and setting properties dynamically

Before accessing the custom element’s API in JavaScript, the custom element’s instance has to be retrieved:

let customElement = document.querySelector('smart-pager');

Properties are represented as members of the custom element’s instance object and can be accessed as such.

Here is an example showing how to get a property dynamically:

let customElementProperty = customElement.items;

Here is an example showing how to set a property dynamically:

customElement.items = 100;

Styling (CSS API)

Smart HTML Elements use a pair of css files – smart.base.css and smart.[theme name].css. The base stylesheet creates the styles related to the element’s layout like margin, padding, border-width, position. The second CSS file applies the HTML Element’s colors, fonts, borders and backgrounds. The smart.base.css should be included before the second CSS file.

CSS selectors

The following CSS selectors can be used to style Smart.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-first-button – Smart.Button used to navigate to the first page.
    • .smart-previous-page-button – Smart.RepeatButton used to navigate to the previous page.
    • .smart-previous-button – Smart.RepeatButton used to navigate to the previous item.
    • .smart-previous-ellipsis-button – Smart.Button used to navigate to the previous page. It is shown if there is such a page.
    • .smart-items-container – an HTML Span element used as an items container.
      • .smart-pager-item – an HTML Span element used as an item.
    • .smart-next-ellipsis-button – Smart.Button used to navigate to the next page. It is shown if there is such a page.
    • .smart-next-button – Smart.RepeatButton used to navigate to the next item.
    • .smart-next-page-button – Smart.RepeatButton used to navigate to the next page.
    • .smart-last-button – Smart.Button used to navigate to the last page.
    • .smart-go-to-block – an HTML element used as a container for GoTo button and input.
    • .smart-go-to-input – GoTo input.
    • .smart-go-to-button – GoTo button.
    • .smart-items-per-page-block – container with a drop down.
    • .smart-items-per-page-drop-down – Smart.DropDownList .
    • .smart-range – an HTML Span element used to display the range of items.

CSS variables

Smart.Pager uses the following CSS variables:

  • –smart-pager-default-width – used to set the default width of the element. Default value is 400px.
  • –smart-pager-default-height – used to set the default height of the element. Default value is 40px.
  • –smart-pager-button-width – used to set the default width of the pager’s buttons. Default value is 100px.
  • –smart-pager-item-width – used to set the default width of the pager’s items. Default value is 36px.
  • –smart-pager-ellipsis-width – used to set the default width of the pager’s items.