# Pragma Pager
This web component is a behaviour driven and is dependent on the value of the "behaviour" attribute on the pragma-pager custom element.
All pager navigation is driven by the pragma-pager element.

## Pager Button
The buttons are the interactive parts of the control and act like toggle switches. In single behaviour mode, when selecting a button, the other selected button is deselected.
In multi behaviour mode, you have to manually toggle the button on and off, the system does not manage this behaviour as in single select mode.

## Behaviour

The behaviour attribute on the pragma-pager element represents the way in which the pager will act.

1. single-page: pager behaviour only shows one page at a time depending on the selected button and the associated element with that button.

## Usage

### Single Page Behaviour

```html
<pragma-pager behaviour="single-page">
    <pager-button class="tabsheet-button" aria-controls="page1">Tab 1</pager-button>
    <pager-button class="tabsheet-button" aria-controls="page2">Tab 2</pager-button>
</pragma-pager>

<div class="page-container">
    <div id="page1">Tab 1 Content</div>
    <div id="page2">Tab 2 Content</div>
</div>
```

### Notes

1. Page buttons are decoupled from the Page it self and do not have to reside in the same container in the dom.
2. You can have 1 to N page buttons.
3. Pager Buttons must have a attribute "aria-controls" with a value set to the id of the element it controls.
4. Pages/Content must have an id specified.