inno-paginator

Preview

light background

dark background

Angular

<div class="component-display">
<div class="light-bg">
  <span class="bg-title">light background</span>
  <InnoPaginator page-count="15"></InnoPaginator>
</div>
<div class="dark-bg">
  <span class="bg-title">dark background</span>
  <InnoPaginator page-count="15" variant="dark"></InnoPaginator>
</div>
</div>

React

<div class="component-display">
<div class="light-bg">
  <span class="bg-title">light background</span>
  <InnoPaginator page-count="15"></InnoPaginator>
</div>
<div class="dark-bg">
  <span class="bg-title">dark background</span>
  <InnoPaginator page-count="15" variant="dark"></InnoPaginator>
</div>
</div>

Vue

<div class="component-display">
<div class="light-bg">
  <span class="bg-title">light background</span>
  <InnoPaginator page-count="15"></InnoPaginator>
</div>
<div class="dark-bg">
  <span class="bg-title">dark background</span>
  <InnoPaginator page-count="15" variant="dark"></InnoPaginator>
</div>
</div>

Properties

Property	Attribute	Description	Type	Default
pageCount	page-count	Total number of pages	number	undefined
selectedPage	selected-page	One based index of currently selected page	number	1
variant	variant		"dark" | "light"	'light'

Events

Event	Description	Type
itemCountChanged	Item count change event	CustomEvent<number>
pageSelected	Page selection event	CustomEvent<number>

Dependencies

Depends on

• inno-icon

Graph

---

Built with StencilJS