Skip to content

Commit 789c832

Browse files
thecodejackthecodejack
committed
documentation
1 parent f6a1570 commit 789c832

File tree

4 files changed

+105
-36
lines changed

4 files changed

+105
-36
lines changed

‎README.md‎

Lines changed: 48 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
[![NPM](https://img.shields.io/npm/v/svelte-pagination.svg)](https://www.npmjs.com/package/svelte-pagination)
44
[![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/svelte-pagination.svg)](https://www.npmjs.com/package/svelte-pagination)
55

6-
SvelteJS component for switch or toggle a boolean. User would be able to drag or click for toggling.
6+
Raw SvelteJS component for dynamic pagination. By applying styles, developer can acheive component in multiple forms.
77

88
## Demo
99

@@ -24,42 +24,67 @@ yarn add svelte-pagination
2424
## Usage
2525

2626
```
27+
<script>
28+
import Pagination from "svelte-pagination";
2729
30+
let checkedValue = 1;
31+
32+
function handleChange(e) {
33+
const { selected } = e.detail;
34+
checkedValue = selected;
35+
}
36+
</script>
37+
38+
<Pagination
39+
pageCount={100}
40+
marginPagesDisplayed={2}
41+
pageRangeDisplayed={5}
42+
onPageChange={handleChange} />
43+
<br />
2844
2945
```
3046

3147
## API
3248

3349
### Props
3450

35-
| Prop Name | Description | Default Value |
36-
| --------------- | -------------- | ------------------ |
37-
| checked | Required field | undefined |
38-
| disabled | | false |
39-
| offColor | | "#888" |
40-
| onColor | | "#080" |
41-
| offHandleColor | | "#fff" |
42-
| onHandleColor | | "#fff" |
43-
| handleDiameter | | 0 |
44-
| boxShadow | | null |
45-
| activeBoxShadow | | "0 0 2px 3px #3bf" |
46-
| height | | 28 |
47-
| width | | 56 |
48-
| id | | '' |
49-
| containerClass | | '' |
51+
| Prop Name | Description | Default Value |
52+
| ---------------------- | ----------- | ------------- |
53+
| pageCount | | 10 |
54+
| pageRangeDisplayed | | 2 |
55+
| marginPagesDisplayed | | 3 |
56+
| previousLabel | | "Previous" |
57+
| nextLabel | | "Next" |
58+
| breakLabel | | "..." |
59+
| hrefBuilder | | |
60+
| initialPage | | |
61+
| forcePage | | |
62+
| disableInitialCallback | | false |
63+
| containerClassName | | |
64+
| pageClassName | | |
65+
| pageLinkClassName | | |
66+
| activeClassName | | "selected" |
67+
| activeLinkClassName | | |
68+
| previousClassName | | "previous" |
69+
| nextClassName | | "next" |
70+
| previousLinkClassName | | |
71+
| nextLinkClassName | | |
72+
| disabledClassName | | "disabled" |
73+
| breakClassName | | |
74+
| breakLinkClassName | | |
75+
| extraAriaContext | | |
76+
| ariaLabelBuilder | | |
77+
| startPageIndex | | 1 |
5078

5179
### Slots
5280

53-
| Slot Name | Description | Default Set? |
54-
| ------------- | ----------- | ------------ |
55-
| checkedIcon | | Yes |
56-
| unCheckedIcon | | Yes |
81+
NA
5782

5883
### Events
5984

60-
| Event Name | Description | `event.detail` info |
61-
| ---------- | ----------- | ------------------------- |
62-
| change | | `{event: event, checked}` |
85+
| Event Name | Description | `event.detail` info |
86+
| ---------- | ----------- | -------------------------- |
87+
| change | | `{event: event, selected}` |
6388

6489
### Examples
6590

‎src/components/Pagination.svelte‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
export let breakLinkClassName;
2727
export let extraAriaContext;
2828
export let ariaLabelBuilder;
29-
export let initialPageIndex = 1;
29+
export let startPageIndex = 1;
3030
3131
const dispatch = createEventDispatcher();
3232
@@ -103,7 +103,7 @@
103103
if (
104104
hrefBuilder &&
105105
pageIndex !== state.selected &&
106-
pageIndex >= initialPageIndex &&
106+
pageIndex >= startPageIndex &&
107107
pageIndex < pageCount
108108
) {
109109
return hrefBuilder(pageIndex + 1);
@@ -150,21 +150,21 @@
150150
151151
$: previousClasses =
152152
previousClassName +
153-
(state.selected === initialPageIndex ? ` ${disabledClassName}` : "");
153+
(state.selected === startPageIndex ? ` ${disabledClassName}` : "");
154154
$: nextClasses =
155155
nextClassName +
156156
(state.selected === pageCount - 1 ? ` ${disabledClassName}` : "");
157157
158158
$: previousAriaDisabled =
159-
state.selected === initialPageIndex ? "true" : "false";
159+
state.selected === startPageIndex ? "true" : "false";
160160
$: nextAriaDisabled = state.selected === pageCount - 1 ? "true" : "false";
161161
162162
$: {
163163
const items = [];
164164
const { selected } = state;
165165
166166
if (pageCount <= pageRangeDisplayed) {
167-
for (let index = initialPageIndex; index < pageCount; index++) {
167+
for (let index = startPageIndex; index < pageCount; index++) {
168168
items.push({
169169
itemIndex: index,
170170
type: "PageView"
@@ -190,7 +190,7 @@
190190
let page;
191191
let breakView;
192192
193-
for (index = initialPageIndex; index < pageCount; index++) {
193+
for (index = startPageIndex; index < pageCount; index++) {
194194
page = index;
195195
196196
// If the page index is lower than the margin defined,

‎stories/views/BasicDefaultStyledView.svelte‎

Lines changed: 48 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<script>
22
import Pagination from "./../../src";
33
4-
let checkedValue = true;
4+
let checkedValue = 1;
55
66
function handleChange(e) {
7-
const { checked } = e.detail;
8-
checkedValue = checked;
7+
const { selected } = e.detail;
8+
checkedValue = selected;
99
}
1010
</script>
1111

@@ -25,18 +25,62 @@
2525
:global(ul.pagination li.active) {
2626
border: 1px solid;
2727
}
28+
29+
/* Second component styling */
30+
:global(ul.pagination2) {
31+
background: #51bae8;
32+
padding: 5px;
33+
}
34+
35+
:global(ul.pagination2 .previous) {
36+
font-weight: bold;
37+
border-right: 2px solid #2d91cc;
38+
}
39+
40+
:global(ul.pagination2 .next) {
41+
font-weight: bold;
42+
border-left: 2px solid #2d91cc;
43+
}
44+
45+
:global(ul.pagination2 li) {
46+
padding: 25px;
47+
}
48+
49+
:global(ul.pagination2 li.active) {
50+
border-radius: 50%;
51+
border: 1px solid #2d91cc;
52+
}
2853
</style>
2954

30-
<h1>Simple usage</h1>
55+
<h1>Custom Styles</h1>
3156
<Pagination
3257
previousLabel={'previous'}
3358
nextLabel={'next'}
3459
breakLabel={'...'}
3560
breakClassName={'break-me'}
61+
initialPage={checkedValue}
3662
pageCount={100}
3763
marginPagesDisplayed={2}
3864
pageRangeDisplayed={5}
3965
onPageChange={handleChange}
4066
containerClassName={'pagination'}
4167
subContainerClassName={'pages'}
4268
activeClassName={'active'} />
69+
<br />
70+
<br />
71+
<br />
72+
<br />
73+
<br />
74+
<Pagination
75+
previousLabel={'<'}
76+
nextLabel={'>'}
77+
breakLabel={'...'}
78+
breakClassName={'break-me'}
79+
initialPage={checkedValue}
80+
pageCount={100}
81+
marginPagesDisplayed={2}
82+
pageRangeDisplayed={5}
83+
onPageChange={handleChange}
84+
containerClassName={'pagination2'}
85+
subContainerClassName={'pages'}
86+
activeClassName={'active'} />

‎stories/views/BasicDefaultView.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<script>
22
import Pagination from "./../../src";
33
4-
let checkedValue = true;
4+
let checkedValue = 1;
55
66
function handleChange(e) {
7-
const { checked } = e.detail;
8-
checkedValue = checked;
7+
const { selected } = e.detail;
8+
checkedValue = selected;
99
}
1010
</script>
1111

0 commit comments

Comments
 (0)