mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-16 10:51:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(component): add Pagination

Browse source 
Closes #23
This commit is contained in:
Eric Liu 2019-12-23 09:32:20 -08:00
commit 4dad89e12d
17 changed files with 222 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/components/Pagination/Pagination.stories.js Normal file
View file

@ -0,0 +1,39 @@
import { withKnobs, text, number, boolean, array } from '@storybook/addon-knobs';
import Component from './Pagination.Story.svelte';
export default { title: 'Pagination', decorators: [withKnobs] };
export const Default = () => ({
Component,
props: {
disabled: boolean('Disable backward/forward buttons (disabled)', false),
page: number('The current page (page)', 1),
totalItems: number('Total number of items (totalItems)', 103),
pagesUnknown: boolean('Total number of items unknown (pagesUnknown)', false),
pageInputDisabled: boolean('Disable page input (pageInputDisabled)', false),
backwardText: text('The description for the backward icon (backwardText)', 'Previous page'),
forwardText: text('The description for the forward icon (forwardText)', 'Next page'),
pageSize: number('Number of items per page (pageSize)', 10),
pageSizes: array('Choices of `pageSize` (pageSizes)', [10, 20, 30, 40, 50]),
itemsPerPageText: text('Label for `pageSizes` select UI (itemsPerPageText)', 'Items per page:')
}
});
export const Multiple = () => ({
Component,
props: {
story: 'multiple',
disabled: boolean('Disable backward/forward buttons (disabled)', false),
page: number('The current page (page)', 1),
totalItems: number('Total number of items (totalItems)', 103),
pagesUnknown: boolean('Total number of items unknown (pagesUnknown)', false),
pageInputDisabled: boolean('Disable page input (pageInputDisabled)', false),
backwardText: text('The description for the backward icon (backwardText)', 'Previous page'),
forwardText: text('The description for the forward icon (forwardText)', 'Next page'),
pageSize: number('Number of items per page (pageSize)', 10),
pageSizes: array('Choices of `pageSize` (pageSizes)', [10, 20, 30, 40, 50]),
itemsPerPageText: text('Label for `pageSizes` select UI (itemsPerPageText)', 'Items per page:')
}
});
export const Skeleton = () => ({ Component, props: { story: 'skeleton' } });