Skip to content

Commit f3bbd39

Browse files
hacker0limbohacker0limbo
committed
docs: add english documentation
1 parent f87cd0d commit f3bbd39

30 files changed

Lines changed: 1178 additions & 2 deletions

‎src/Alert/index.en-US.md‎

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,36 @@
22
title: Alert
33
demo:
44
cols: 2
5-
group: Basic
5+
group:
6+
title: Feedback
7+
order: 6
68
toc: content
79
---
810

911
# Alert
1012

11-
<code src="./demos/AlertBase.tsx" title="Basic" description="Basic usage for alert"></code>
13+
Alert component to display important information that needs attention.
14+
15+
Reference: [Alerts](https://www.getpapercss.com/docs/components/alerts/)
16+
17+
## Examples
18+
19+
<code src="./demos/AlertBase.tsx" title="Basic" description="The simplest usage"></code>
20+
<code src="./demos/AlertDismissible.tsx" title="Dismissible" description="Display close button, click to dismiss the alert"></code>
21+
<code src="./demos/AlertCustomClose.tsx" title="Custom Close" description="Customize the close functionality, custom text will replace the default close icon"></code>
22+
23+
## Comparison
24+
25+
There are some differences between the React-wrapped `Alert` component and the original `PaperCSS` component:
26+
27+
- In PaperCSS Alert, when `dismissible` is enabled and closed, the element is only hidden but the DOM element still exists. The redesigned component behavior is changed to: **the component will be destroyed after closing, meaning the DOM element no longer exists**.
28+
29+
## API
30+
31+
| Property | Description | Type | Default |
32+
| ----------- | ------------------------------------- | ------------------------------------------------------ | --------- |
33+
| type | Component style | `primary`, `secondary`, `success`, `warning`, `danger` | `primary` |
34+
| onClose | Callback when close button is clicked | `(e: MouseEvent) => void` | - |
35+
| afterClose | Callback after close animation ends | `() => void` | - |
36+
| dismissible | Whether the alert can be dismissed | `boolean` | `false` |
37+
| closeLabel | Text for the close button | `React.ReactNode` | `X` |

‎src/Article/index.en-US.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
title: Article
3+
group:
4+
title: General
5+
order: 1
6+
toc: content
7+
---
8+
9+
# Article
10+
11+
Configurable display of content segments
12+
13+
Reference: [Articles](https://www.getpapercss.com/docs/components/articles/)
14+
15+
## Examples
16+
17+
<code src="./demos/ArticleBase.tsx" title="Basic" description="Basic article example"></code>
18+
19+
## API
20+
21+
| Property | Description | Type | Default |
22+
| -------- | ---------------- | ----------------- | ------- |
23+
| title | Article title | `React.ReactNode` | - |
24+
| meta | Meta information | `React.ReactNode` | - |
25+
| textLead | Lead text | `React.ReactNode` | - |
26+
| footer | Footer area | `React.ReactNode` | - |

‎src/BackTop/index.en-US.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
---
2+
title: BackTop
3+
demo:
4+
cols: 2
5+
group:
6+
title: Other
7+
order: 7
8+
toc: content
9+
---
10+
11+
# BackTop
12+
13+
Used to return to the top of the page
14+
15+
## Examples
16+
17+
<code src="./demos/BackTopBase.tsx" title="Basic" description="Basic back to top" transform="true"></code>
18+
19+
## API
20+
21+
| Property | Description | Type | Default |
22+
| ---------------- | ------------------------------------------------- | ------------------------ | ------- |
23+
| target | Element to bind scroll event listener | `RefObject<HTMLElement>` | - |
24+
| visibilityHeight | Show button when scroll height reaches this value | `number` | `400` |

‎src/Badge/index.en-US.md‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
---
2+
title: Badge
3+
group:
4+
title: Data Display
5+
order: 5
6+
toc: content
7+
---
8+
9+
# Badge
10+
11+
Small labels for marking and categorization.
12+
13+
Reference: [Badges](https://www.getpapercss.com/docs/components/badges/)
14+
15+
## Examples
16+
17+
<code src="./demos/BadgeBase.tsx" title="Basic" description="Badges with different colors"></code>
18+
<code src="./demos/BadgeWithParent.tsx" title="Size" description="Auto-adapts size when used with parent elements"></code>
19+
<code src="./demos/BadgeClosable.tsx" title="Closable Badge" description="Use `closable` to show close button, `onClose` callback function to dynamically control deletion"></code>
20+
21+
## API
22+
23+
| Property | Description | Type | Default |
24+
| ---------- | ------------------------------------- | ---------------------------------------------------------------- | ------- |
25+
| type | Style type | `'primary'`, `'secondary'`, `'success'`, `'warning'`, `'danger'` | - |
26+
| closable | Whether to show close button | `boolean` | `false` |
27+
| onClose | Callback when close button is clicked | `(e: MouseEvent) => void` | - |
28+
| closeLabel | Text for close button | `React.ReactNode` | `'X'` |
29+
| disabled | Whether the badge is disabled | `boolean` | `false` |

‎src/Breadcrumb/index.en-US.md‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
---
2+
title: Breadcrumb
3+
demo:
4+
cols: 2
5+
group:
6+
title: Navigation
7+
order: 3
8+
toc: content
9+
---
10+
11+
# Breadcrumb
12+
13+
Display the current page's location within a navigational hierarchy and provide the ability to navigate back to parent levels.
14+
15+
Reference: [Breadcrumb](https://www.getpapercss.com/docs/components/breadcrumb/)
16+
17+
## Examples
18+
19+
<code src="./demos/BreadcrumbBase.tsx" title="Basic" description="Most basic breadcrumb usage"></code>
20+
<code src="./demos/BreadcrumbConfig.tsx" title="Configurable" description="Use `items` to configure breadcrumb content"></code>
21+
22+
## API
23+
24+
### Breadcrumb
25+
26+
| Property | Description | Type | Default |
27+
| -------- | ------------------ | ------------------------------------- | ------- |
28+
| bordered | Whether has border | `boolean` | `true` |
29+
| items | Configuration mode | [`BreadcrumbItem[]`](#breadcrumbitem) | - |
30+
31+
### BreadcrumbItem
32+
33+
| Property | Description | Type | Default |
34+
| -------- | -------------------------------------------------- | ----------------- | ------- |
35+
| content | Same as children but mainly used for configuration | `React.ReactNode` | - |
36+
| active | Whether it's the current active item | `boolean` | `false` |
37+
| href | Link URL | `string` | - |
38+
| target | Link target | `string` | - |
39+
| children | Child nodes | `React.ReactNode` | - |
40+
| title | Link title | `string` | - |

‎src/Button/index.en-US.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
---
2+
title: Button
3+
demo:
4+
cols: 2
5+
group:
6+
title: General
7+
order: 1
8+
toc: content
9+
---
10+
11+
# Button
12+
13+
Button is used to trigger an immediate action.
14+
15+
Reference: [Buttons](https://www.getpapercss.com/docs/components/buttons)
16+
17+
## Examples
18+
19+
<code src="./demos/ButtonBase.tsx" title="Basic" description="Basic button, use `disabled` to disable the button"></code>
20+
<code src="./demos/ButtonBlock.tsx" title="Block Button" description="The `block` property will make the button fit its parent width."></code>
21+
<code src="./demos/ButtonSize.tsx" title="Size" description="Set `size` to `large` or `small` to make the button large or small. If `size` is not set, the default size is medium"></code>
22+
<code src="./demos/ButtonType.tsx" title="Type" description="Use `type` to add different types to buttons"></code>
23+
<code src="./demos/ButtonOutline.tsx" title="Outline" description="Use `outline` to add outline to buttons"></code>
24+
25+
## API
26+
27+
| Property | Description | Type | Default |
28+
| -------- | ----------------------------------------- | ---------------------------------------------------------------- | -------- |
29+
| color | Button color | `'primary'`, `'secondary'`, `'success'`, `'warning'`, `'danger'` | - |
30+
| size | Button size, default is medium if not set | `'small'`, `'large'` | - |
31+
| block | Whether it's a block button | `boolean` | `false` |
32+
| outline | Whether it's an outline button | `boolean` | `false` |
33+
| disabled | Whether the button is disabled | `boolean` | `false` |
34+
| as | Element to render | `React.ElementType` | `button` |

‎src/Card/index.en-US.md‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
---
2+
title: Card
3+
demo:
4+
cols: 2
5+
group:
6+
title: Data Display
7+
order: 5
8+
toc: content
9+
---
10+
11+
# Card
12+
13+
A general-purpose card container component.
14+
15+
Reference: [Cards](https://www.getpapercss.com/docs/components/cards/)
16+
17+
## Examples
18+
19+
<code src="./demos/CardBase.tsx" title="Basic" description="Complete card example"></code>
20+
<code src="./demos/CardImg.tsx" title="Image" description="Images can be placed at the top or bottom"></code>
21+
<code src="./demos/CardLinks.tsx" title="Links" description="Cards containing links"></code>
22+
<code src="./demos/CardHeaderFooter.tsx" title="Header and Footer" description="Cards with header and footer"></code>
23+
24+
## API
25+
26+
### Card
27+
28+
| Property | Description | Type | Default |
29+
| -------- | ----------------- | ------------------- | ------- |
30+
| as | Element to render | `React.ElementType` | `div` |
31+
32+
### CardBody
33+
34+
| Property | Description | Type | Default |
35+
| -------- | ----------------- | ------------------- | ------- |
36+
| as | Element to render | `React.ElementType` | `div` |
37+
38+
### CardFooter
39+
40+
| Property | Description | Type | Default |
41+
| -------- | ----------------- | ------------------- | ------- |
42+
| as | Element to render | `React.ElementType` | `div` |
43+
44+
### CardHeader
45+
46+
| Property | Description | Type | Default |
47+
| -------- | ----------------- | ------------------- | ------- |
48+
| as | Element to render | `React.ElementType` | `div` |
49+
50+
### CardImg
51+
52+
| Property | Description | Type | Default |
53+
| --------- | ----------------- | ------------------- | ------- |
54+
| as | Element to render | `React.ElementType` | `img` |
55+
| placement | Image placement | `'top' \| 'bottom'` | - |
56+
57+
### CardLink
58+
59+
| Property | Description | Type | Default |
60+
| -------- | ----------------- | ------------------- | ------- |
61+
| as | Element to render | `React.ElementType` | `a` |
62+
63+
### CardTitle
64+
65+
| Property | Description | Type | Default |
66+
| -------- | ----------------- | ------------------- | ------- |
67+
| as | Element to render | `React.ElementType` | `h4` |
68+
69+
### CardSubtitle
70+
71+
| Property | Description | Type | Default |
72+
| -------- | ----------------- | ------------------- | ------- |
73+
| as | Element to render | `React.ElementType` | `h5` |
74+
75+
### CardText
76+
77+
| Property | Description | Type | Default |
78+
| -------- | ----------------- | ------------------- | ------- |
79+
| as | Element to render | `React.ElementType` | `p` |

‎src/Checkbox/index.en-US.md‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
---
2+
title: Checkbox
3+
demo:
4+
cols: 2
5+
group:
6+
title: Data Entry
7+
order: 4
8+
toc: content
9+
---
10+
11+
# Checkbox
12+
13+
Used for multiple selections from a set of options
14+
15+
## Examples
16+
17+
<code src="./demos/CheckboxBase.tsx" title="Basic Usage" description="Basic usage"></code>
18+
<code src="./demos/CheckboxDisabled.tsx" title="Disabled" description="Disable checkbox"></code>
19+
<code src="./demos/CheckboxControlled.tsx" title="Controlled" description="Use `checked` and `onChange` for controlled mode"></code>
20+
<code src="./demos/CheckboxGroupBase.tsx" title="Group" description="Use `Checkbox.Group` to render a series of `Checkbox`es"></code>
21+
<code src="./demos/CheckboxGroupControlled.tsx" title="Group Controlled" description="Use `value` and `onChange` for controlled mode"></code>
22+
<code src="./demos/CheckboxGroupConfig.tsx" title="Group Configuration" description="Use `options` for configuration"></code>
23+
24+
## Comparison
25+
26+
Since the `Checkbox` component is used standalone, it behaves differently from when it's under `.form-group`. Its layout property is set to `display: inline-block` instead of `display: block`.
27+
28+
`Checkbox.Group` is a newly implemented API for listing a series of related `Checkbox` options.
29+
30+
## API
31+
32+
### Checkbox
33+
34+
| Property | Description | Type | Default |
35+
| ------------ | ------------------------------------------ | -------------------------------------------- | ------- |
36+
| checked | Whether checkbox is checked (controlled) | `boolean` | - |
37+
| defaultValue | Whether checkbox is checked (uncontrolled) | `boolean` | - |
38+
| onChange | Callback when checkbox state changes | `(checked: boolean, e: ChangeEvent) => void` | - |
39+
| disabled | Whether disabled | `boolean` | - |
40+
41+
### CheckboxGroup
42+
43+
| Property | Description | Type | Default |
44+
| ------------ | ---------------------------------------- | -------------------------------------------------------------------- | ------- |
45+
| value | Selected checkbox values (controlled) | `(string \| number)[]` | - |
46+
| defaultValue | Selected checkbox values (uncontrolled) | `(string \| number)[]` | [] |
47+
| onChange | Callback when checkbox selection changes | `(value: (string \| number)[], e: ChangeEvent) => void` | - |
48+
| disabled | Whether all checkboxes are disabled | `boolean` | - |
49+
| options | Configuration mode implementation | `{ label: ReactNode, value: string \| number, disabled: boolean }[]` | - |

‎src/Collapse/index.en-US.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
---
2+
title: Collapse
3+
group:
4+
title: Data Display
5+
order: 5
6+
toc: content
7+
---
8+
9+
# Collapse
10+
11+
Content area that can be collapsed/expanded.
12+
13+
Reference: [Collapsible](https://www.getpapercss.com/docs/components/collapsible/)
14+
15+
## Examples
16+
17+
<code src="./demos/CollapseBase.tsx" title="Basic" description="Use `defaultActiveKey` for uncontrolled configuration"></code>
18+
<code src="./demos/CollapseControlled.tsx" title="Controlled" description="Controlled mode"></code>
19+
<code src="./demos/CollapseAccordion.tsx" title="Accordion" description="Accordion mode, only one panel can be opened at a time"></code>
20+
<code src="./demos/CollapseConfigured.tsx" title="Configurable" description="Use `items` for configuration"></code>
21+
22+
## API
23+
24+
### Collapse
25+
26+
| Property | Description | Type | Default |
27+
| ---------------- | ---------------------------------------------------------------------------------------- | ----------------------------------------- | ------- |
28+
| defaultActiveKey | Key of the panel expanded by default | `React.Key \| React.Key[]` | - |
29+
| activeKey | Key of the currently expanded panel (controlled mode) | `React.Key \| React.Key[]` | - |
30+
| onCollapseChange | Callback function when toggling panels | `(key: React.Key \| React.Key[]) => void` | - |
31+
| accordion | Whether it's accordion mode, only one panel can be expanded in accordion mode | `boolean` | false |
32+
| items | Configuration for collapse content | [`CollapsePaneItem[]`](#collapsepaneitem) | - |
33+
| destroyOnHidden | Destroy collapsed hidden panels (Note: will lose expand/collapse animation when enabled) | `boolean` | false |
34+
35+
### CollapsePaneItem
36+
37+
| Property | Description | Type | Default |
38+
| ----------- | -------------------------- | ----------------- | ------- |
39+
| collapseKey | Unique identifier of panel | `React.Key` | - |
40+
| header | Title of the panel | `string` | - |
41+
| children | Content of the panel | `React.ReactNode` | - |

0 commit comments

Comments
 (0)