doc: pager

Author: peterpeterparker

doc/features/navigation.md

@@ -12,6 +12,9 @@ Furthermore than the default swiping, the [DeckDeckGo] deck expose the following
   - [Is the deck at the end](#is-the-deck-at-the-end)
   - [Get the index of the current slide](#get-the-index-of-the-current-slide)
   - [Get the length of the deck](#get-the-length-of-the-deck)
+- [Pager](#pager)
+  - [Show or hide](#show-or-hide)
+  - [Customization](#customization)
 
 ## Navigation
 
@@ -65,4 +68,34 @@ await deck.getActiveIndex(); // resolve a number
 await deck.getLength(); // resolve a number
 ```
 
+## Pager
+
+[DeckDeckGo] will per default display a pager in form of a progress circle bar. It's possible to hide it or to customize the following various style options.
+
+### Show or hide
+
+The show or hide options of the pager are available on the `<deckgo-deck>` element.
+
+| Attribute                      | Type   | Default   | Description   |
+| -------------------------- |:-----------------:|:-----------------:|:-----------------:|
+| pager | boolean | true | Show or hide the pager |
+| pagerPercentage | boolean | true | Show or hide the progression in percentage inside the pager |
+
+### Customization
+
+The following style options are available to style the pager:
+
+| CSS4 variable                      | Default |
+| -------------------------- |:-----------------:|
+| --pager-size | 56px |
+| --pager-margin-top | 8px |
+| --pager-margin-end | 8px |
+| --pager-margin-bottom | 8px |
+| --pager-margin-start | 8px |
+| --pager-background | #eee |
+| --pager-text-color | #4c8dff |
+| --pager-text-size | 0.5em |
+| --pager-stroke-outer-width | 2.8 |
+| --pager-stroke-inner-width | 1.8 |
+
 [DeckDeckGo]: https://deckdeckgo.com

src/components/pager/deckdeckgo-pager/deckdeckgo-pager.scss

@@ -8,7 +8,7 @@
 .deckgo-pager-circle-bg {
   fill: none;
   stroke: var(--pager-background, #eee);
-  stroke-width: var(--pager-stroke-outter-width, 2.8);
+  stroke-width: var(--pager-stroke-outer-width, 2.8);
 }
 
 .deckgo-pager-circle {
@@ -20,8 +20,7 @@
 
 .deckgo-pager-percentage {
   fill: var(--pager-text-color, #4c8dff);
-  font-family: sans-serif;
-  font-size: 0.5em;
+  font-size: var(--pager-text-size, 0.5em);
   text-anchor: middle;
   font-weight: 300;
 }