@umbraco-ui/uui-pagination/custom-elements.json

Umbraco UI pagination component. By implementing a resizeObserver it changes the number of visible buttons to fit the width of the container it sits in. Based on uui-button and uui-button-group.

{
  "version": "experimental",
  "tags": [
    {
      "name": "uui-pagination",
      "path": "./lib/uui-pagination.element.ts",
      "attributes": [
        {
          "name": "label",
          "description": "This property is used to generate a proper `aria-label`. It will be announced by screen reader as: \"<<this.label>>. Current page: <<this.current>>\"",
          "type": "string",
          "default": "\"\""
        },
        {
          "name": "aria-label",
          "description": "With this property you can overwrite aria-label.",
          "type": "string",
          "default": "\"\""
        },
        {
          "name": "firstLabel",
          "description": "This property is used to generate the name of the first button",
          "type": "string",
          "default": "\"First\""
        },
        {
          "name": "previousLabel",
          "description": "This property is used to generate the name of the previous button",
          "type": "string",
          "default": "\"Previous\""
        },
        {
          "name": "nextLabel",
          "description": "This property is used to generate the name of the next button",
          "type": "string",
          "default": "\"Next\""
        },
        {
          "name": "lastLabel",
          "description": "This property is used to generate the name of the last button",
          "type": "string",
          "default": "\"Last\""
        },
        {
          "name": "total",
          "description": "Set the amount of pages to navigate.",
          "type": "number",
          "default": "\": 1\""
        },
        {
          "name": "current",
          "description": "Define the current active page.",
          "type": "number"
        }
      ],
      "properties": [
        {
          "name": "label",
          "attribute": "label",
          "description": "This property is used to generate a proper `aria-label`. It will be announced by screen reader as: \"<<this.label>>. Current page: <<this.current>>\"",
          "type": "string",
          "default": "\"\""
        },
        {
          "name": "ariaLabel",
          "attribute": "aria-label",
          "description": "With this property you can overwrite aria-label.",
          "type": "string",
          "default": "\"\""
        },
        {
          "name": "firstLabel",
          "attribute": "firstLabel",
          "description": "This property is used to generate the name of the first button",
          "type": "string",
          "default": "\"First\""
        },
        {
          "name": "previousLabel",
          "attribute": "previousLabel",
          "description": "This property is used to generate the name of the previous button",
          "type": "string",
          "default": "\"Previous\""
        },
        {
          "name": "nextLabel",
          "attribute": "nextLabel",
          "description": "This property is used to generate the name of the next button",
          "type": "string",
          "default": "\"Next\""
        },
        {
          "name": "lastLabel",
          "attribute": "lastLabel",
          "description": "This property is used to generate the name of the last button",
          "type": "string",
          "default": "\"Last\""
        },
        {
          "name": "total",
          "attribute": "total",
          "description": "Set the amount of pages to navigate.",
          "type": "number",
          "default": "\": 1\""
        },
        {
          "name": "current",
          "attribute": "current",
          "description": "Define the current active page.",
          "type": "number"
        },
        {
          "name": "styles",
          "type": "CSSResult[]",
          "default": "[null]"
        }
      ],
      "events": [
        {
          "name": "change",
          "description": "When clicked on the page button fires change event"
        }
      ]
    }
  ]
}