Pager Item

In progress

This element is a part of Pager component. Attribute variant defines what kind of pager link is shown.

Default Pager item (not active)

    <hy-pager-item
      item-label="2"
      item-url="https://helsinki.fi/sv/utbildning/program?page=1"
      sc-aria-label="Go to page 2"
    >
    </hy-pager-item>

Current Pager item (active)

    <hy-pager-item
      variant="current"
      item-label="1"
      item-url="https://helsinki.fi/sv/utbildning/program"
    >
    </hy-pager-item>

Next Pager item

    <hy-pager-item variant="next" item-label="Next" item-url="https://helsinki.fi/sv/utbildning/program?page=1">
    </hy-pager-item>

Previous Pager item

    <hy-pager-item
      variant="previous"
      item-label="Previous"
      item-url="https://helsinki.fi/sv/utbildning/program?page=1"
    >
    </hy-pager-item>

Ellipsis Pager item

    <hy-pager-item variant="ellipsis" item-label="..."> </hy-pager-item>    

Properties

Property	Attribute	Description	Type	Default
itemLabel	item-label	'Label'	string	undefined
itemUrl	item-url	'Url'	string	undefined
scAriaLabel	sc-aria-label	'Aria-label attribute value'	string	undefined
variant	variant	'type of pager item'	PaginationItemVariants.current \| PaginationItemVariants.default \| PaginationItemVariants.ellipsis \| PaginationItemVariants.next \| PaginationItemVariants.previous	PaginationItemVariants.default

Dependencies

Depends on

• hy-icon

---

Helsinki University Design System