Skip to content

Commit

Permalink
docs(Pagination): add basic content
Browse files Browse the repository at this point in the history
  • Loading branch information
shervinchen committed May 9, 2024
1 parent 42b04f2 commit ddd782e
Show file tree
Hide file tree
Showing 9 changed files with 124 additions and 5 deletions.
9 changes: 9 additions & 0 deletions data/sidebars.ts
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,15 @@ export const SIDEBARS = [
},
],
},
{
name: 'Navigation',
children: [
{
name: 'Pagination',
url: '/components/pagination',
},
],
},
],
},
];
33 changes: 32 additions & 1 deletion demo/pagination/index.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,41 @@
import { useState } from 'react';
import Unit from '../Unit';
import { Pagination } from '@/packages';

export function DemoPaginationDefault() {
return (
<Unit layout="row">
<Pagination defaultPage={1} count={124} limit={10} />
<Pagination defaultPage={1} count={100} />
</Unit>
);
}

export function DemoPaginationDefaultPage() {
return (
<Unit layout="row">
<Pagination defaultPage={3} count={100} />
</Unit>
);
}

export function DemoPaginationControlled() {
const [page, setPage] = useState(1);

return (
<Pagination
page={page}
count={100}
onChange={(value) => {
setPage(value);
}}
/>
);
}

export function DemoPaginationLimit() {
return (
<Unit layout="row">
<Pagination defaultPage={1} count={100} limit={20} />
</Unit>
);
}
2 changes: 1 addition & 1 deletion src/app/(article)/components/checkbox/checkbox.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -226,7 +226,7 @@ import { Checkbox } from 'raw-ui';
| Prop | Description | Type | Default |
| -------------- | ------------------------------------------- | ------------------------------------------------------ | ------- |
| defaultChecked | checked or not by default (uncontrolled) | boolean | false |
| checked | checked or not (controlled) | boolean | false |
| checked | checked or not (controlled) | boolean | - |
| value | unique identification value (only in group) | string \| number | - |
| indeterminate | Partially checked | boolean | false |
| disabled | disable current checkbox | boolean | false |
Expand Down
2 changes: 1 addition & 1 deletion src/app/(article)/components/input/input.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -212,7 +212,7 @@ import { Input } from 'raw-ui';
| width | input width | string | 'md' |
| disabled | disable input | boolean | false |
| readOnly | read only input | boolean | false |
| defaultValue | default value (uncontrolled) | string | - |
| defaultValue | default value (uncontrolled) | string | '' |
| value | input value (controlled) | string | - |
| onChange | change event handler | (event: React.ChangeEvent\<HTMLInputElement\>) => void | - |
| ... | native props | React.InputHTMLAttributes | - |
7 changes: 7 additions & 0 deletions src/app/(article)/components/pagination/mdx-content.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
'use client';

import MDX from './pagination.mdx';

export default function MDXContent() {
return <MDX />;
}
10 changes: 10 additions & 0 deletions src/app/(article)/components/pagination/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { Metadata } from 'next';
import MDXContent from './mdx-content';

export const metadata: Metadata = {
title: 'Pagination - Raw UI',
};

export default function Page() {
return <MDXContent />;
}
62 changes: 62 additions & 0 deletions src/app/(article)/components/pagination/pagination.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import Unit from '@/demo/Unit';
import { Pagination } from '@/packages';
import Playground from '@/src/app/components/playground';

# Pagination

Navigation between multiple pages.

## Import

```tsx
import { Pagination } from 'raw-ui';
```

## Default Page

<Playground
scope={{ Unit, Pagination }}
code={`
<Pagination defaultPage={3} count={100} />
`}
/>

## Controlled

<Playground
scope={{ Unit, Pagination }}
code={`
() => {
const [page, setPage] = React.useState(1);
return (
<Pagination
page={page}
count={100}
onChange={(value) => {
setPage(value);
}}
/>
);
}
`}
/>

## Limit

<Playground
scope={{ Unit, Pagination }}
code={`
<Pagination defaultPage={1} count={100} limit={20} />
`}
/>

## API

| Prop | Description | Type | Default |
| ----------- | ------------------------------------ | ---------------------- | ------- |
| defaultPage | default selected page (uncontrolled) | number | 1 |
| page | current page (controlled) | number | - |
| count | total count of pages | number | 1 |
| limit | limit count of data items per page | number | 10 |
| onChange | change event handler | (page: number) => void | - |
2 changes: 1 addition & 1 deletion src/app/(article)/components/radio/radio.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@ import { Radio } from 'raw-ui';
| Prop | Description | Type | Default |
| -------------- | ------------------------------------------- | ------------------------------------------------------ | ------- |
| defaultChecked | selected or not by default (uncontrolled) | boolean | false |
| checked | selected or not (controlled) | boolean | false |
| checked | selected or not (controlled) | boolean | - |
| value | unique identification value (only in group) | string \| number | - |
| disabled | disable current radio | boolean | false |
| onChange | change event handler | (event: React.ChangeEvent\<HTMLInputElement\>) => void | - |
Expand Down
2 changes: 1 addition & 1 deletion src/app/(article)/components/toggle/toggle.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ import { Toggle } from 'raw-ui';
| Prop | Description | Type | Default |
| -------------- | ---------------------------------------- | ------------------------------------------------------ | ------- |
| defaultChecked | checked or not by default (uncontrolled) | boolean | false |
| checked | checked or not (controlled) | boolean | false |
| checked | checked or not (controlled) | boolean | - |
| disabled | disable toggle | boolean | false |
| onChange | change event handler | (event: React.ChangeEvent\<HTMLInputElement\>) => void | - |
| ... | native props | React.LabelHTMLAttributes | - |

0 comments on commit ddd782e

Please sign in to comment.