@stratio/egeo
Version:
142 lines (138 loc) • 5.79 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>Stratio Egeo - Documentation</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/png" href="assets/images/favicon.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body class="container-fluid">
<a href="/index.html">Go Back to index</a><br>
<h1 id="tablecomponent">Table (Component)</h1>
<p>The pagination component has been designed to allow content to be displayed per pages. This informs user about the number of the current page, the items displayed per page and the total of items. Moreover, when there are a lot of items, it allows
user to customize the number of items displayed per page. It is made by two sub-components: - A range selector, that allows the user provides a dropdown to set how many items he wants to be displayed per page. - A page navigation control, in order
to let the user where he is and where he can go to.</p>
<h2 id="inputs">Inputs</h2>
<table class="table table-striped">
<thead>
<tr>
<th id="property">Property</th>
<th id="type">Type</th>
<th id="req">Req</th>
<th id="description">Description</th>
<th id="default">Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>perPage</td>
<td>Number</td>
<td>False</td>
<td>The maximum number of items displayed per page</td>
<td>20</td>
</tr>
<tr>
<td>total</td>
<td>Number</td>
<td>False</td>
<td>Total of items</td>
<td>''</td>
</tr>
<tr>
<td>label</td>
<td>PaginateTexts</td>
<td>False</td>
<td>Translated texts displayed at the pagination</td>
<td>{element: 'Rows', perPage: 'per page', of: 'of'}</td>
</tr>
<tr>
<td>perPageOptions</td>
<td>PaginateOptions[]</td>
<td>False</td>
<td>List of options displayed at a selector where user can change the number of items displayed per page</td>
<td>Array( Object( value: 20, showFrom: 0 ),Object( value: 50, showFrom: 50 ), Object( value: 200, showFrom: 200 ))</td>
</tr>
<tr>
<td>iconClasses</td>
<td>PaginateIconClasses</td>
<td>False</td>
<td>Icon classes for previous and next page buttons</td>
<td></td>
</tr>
<tr>
<td>currentPage</td>
<td>Number</td>
<td>False</td>
<td>Number of the current page</td>
<td>1</td>
</tr>
</tbody>
</table>
<h2 id="outputs">Outputs</h2>
<table class="table table-striped">
<thead>
<tr>
<th id="property">Property</th>
<th id="type">Type</th>
<th id="description">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>change</td>
<td>Paginate</td>
<td>Event emitted when user interacts with some of the elements in the pagination. This sends the new pagination status (current page and items per page)</td>
</tr>
<tr>
<td>changePerPage</td>
<td>PaginateOptions</td>
<td>Event emitted when user interacts with some of the elements in the selector of items displayed per page. This sends the current items per page.</td>
</tr>
</tbody>
</table>
<h2 id="example">Example</h2>
<pre><code class="html language-html"><div class="pagination">
<st-pagination [total]="items.length"
[perPage]="perPage"
[currentPage]="page"
[id]="'pagination-demo'"
(change)="onChangePage($event)">
</st-pagination>
</div>
</code></pre>
<h2 id="models">Models</h2>
<p><em>Paginate</em> (Paginate)</p>
<pre><code class="typescript language-typescript">export interface Paginate {
currentPage: number;
perPage: number;
}
</code></pre>
<p><em>PaginateOptions</em> (PaginateOptions)</p>
<pre><code class="typescript language-typescript">export interface PaginateOptions {
value: number;
showFrom ? : number;
}
</code></pre>
<p><em>PaginateTexts</em> (PaginateTexts)</p>
<pre><code class="typescript language-typescript">export interface PaginateTexts {
element: string;
perPage: string; of: string;
}
</code></pre>
<p><em>PaginateTextsSchema</em> (PaginateTextsSchema)</p>
<pre><code class="typescript language-typescript">export interface PaginateTextsSchema {
element: TranslateableElement;
perPage: TranslateableElement; of: TranslateableElement;
}
</code></pre>
<p><em>PaginateIconClasses</em> (PaginateIconClasses)</p>
<pre><code class="typescript language-typescript">export interface PaginateIconClasses {
previous: string;
next: string;
}
</code></pre>
</body>
</html>