-
+
@@ -64,8 +81,28 @@ export const CodeBlock = ({ children, className, live }: Props): React.ReactElem
- setShowCode(!showCode)}>
- {showCode ? s.codeBlock.hideCode : s.codeBlock.showCode}
+
diff --git a/apps/docs/src/components/demo-block/demo-block.scss b/apps/docs/src/components/demo-block/demo-block.scss
new file mode 100644
index 00000000..d4f6f31d
--- /dev/null
+++ b/apps/docs/src/components/demo-block/demo-block.scss
@@ -0,0 +1,136 @@
+@use '../../variables' as *;
+
+.demo-block {
+ &__container {
+ border-top: solid 1px var(--ty-color-border-secondary);
+ transition: 0.2s;
+ margin: 20px 0 0;
+ }
+
+ &__previewer {
+ color: var(--ty-color-text-secondary);
+ padding: 24px;
+ overflow-x: auto;
+
+ @media (max-width: $size-md) {
+ padding: 16px;
+ }
+ }
+
+ &__error {
+ color: #e53e3e;
+ font-size: 13px;
+ padding: 12px;
+ margin: 0;
+ background-color: #fff5f5;
+ border-radius: 4px;
+ font-family: Menlo, Consolas, "Droid Sans Mono", monospace;
+ white-space: pre-wrap;
+ word-break: break-word;
+ }
+
+ &__editor-container {
+ background-color: var(--ty-color-fill);
+ border-top: solid 1px var(--ty-color-border-secondary);
+ overflow-x: auto;
+ font-family: Menlo, Consolas, "Droid Sans Mono", monospace;
+ font-size: 13px;
+ line-height: 1.6;
+ tab-size: 2;
+ }
+
+ &__editor-wrapper {
+ max-width: 800px;
+ width: 100%;
+ }
+
+ &__editor-overlay {
+ position: relative;
+
+ pre {
+ margin: 0;
+ pointer-events: none;
+ }
+ }
+
+ &__editor-textarea {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ padding: 15px;
+ margin: 0;
+ border: none;
+ outline: none;
+ resize: none;
+ overflow: hidden;
+ background: transparent;
+ color: transparent;
+ -webkit-text-fill-color: transparent;
+ caret-color: var(--ty-color-text-secondary, #000);
+ font-family: inherit;
+ font-size: inherit;
+ line-height: inherit;
+ tab-size: inherit;
+ white-space: pre;
+ box-sizing: border-box;
+
+ &::selection {
+ background: rgba(0, 0, 0, 0.15);
+ }
+ }
+
+ &__actions {
+ border-top: dashed 1px var(--ty-color-border-secondary);
+ height: 40px;
+ box-sizing: border-box;
+ background-color: var(--ty-color-bg-elevated);
+ border-bottom-left-radius: 3px;
+ border-bottom-right-radius: 3px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 4px;
+ padding: 0 12px;
+ position: relative;
+ }
+
+ &__action-btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 28px;
+ height: 28px;
+ border: none;
+ background: none;
+ color: var(--ty-color-text-tertiary);
+ cursor: pointer;
+ border-radius: 4px;
+ font-size: 15px;
+ transition: color 0.2s, background-color 0.2s;
+ padding: 0;
+
+ &:hover {
+ color: var(--ty-color-primary);
+ background-color: var(--ty-color-fill);
+ }
+ }
+
+ &__action-toggle {
+ display: inline-flex;
+ align-items: center;
+ color: var(--ty-color-text-tertiary);
+ cursor: pointer;
+ font-size: 12px;
+ padding: 4px 8px;
+ border-radius: 4px;
+ transition: color 0.2s, background-color 0.2s;
+ user-select: none;
+
+ &:hover {
+ color: var(--ty-color-primary);
+ background-color: var(--ty-color-fill);
+ }
+ }
+}
\ No newline at end of file
diff --git a/apps/docs/src/components/demo-block/index.tsx b/apps/docs/src/components/demo-block/index.tsx
new file mode 100644
index 00000000..e9a5c34e
--- /dev/null
+++ b/apps/docs/src/components/demo-block/index.tsx
@@ -0,0 +1,237 @@
+import React, { useState, useCallback, useRef } from 'react';
+import { useRunner } from 'react-runner';
+import { Highlight, themes } from 'prism-react-renderer';
+import { LightCodeTheme, DarkCodeTheme } from '../code-block/code-theme';
+import * as TinyDesign from '@tiny-design/react';
+import * as TinyIcons from '@tiny-design/icons';
+import CollapseTransition from '@tiny-design/react/collapse-transition';
+import { useTheme, Tooltip } from '@tiny-design/react';
+import { useLocaleContext } from '../../context/locale-context';
+import { openInStackBlitz, openInCodeSandbox } from '../../utils/sandbox';
+import './demo-block.scss';
+
+/** StackBlitz logo icon (inline SVG) */
+const StackBlitzIcon = () => (
+
+);
+
+/** CodeSandbox logo icon (inline SVG) */
+const CodeSandboxIcon = () => (
+
+);
+
+/** Copy icon (inline SVG) */
+const CopyIcon = () => (
+
+);
+
+/** Reset icon (inline SVG) */
+const ResetIcon = () => (
+
+);
+
+// Build scope for react-runner to resolve imports
+const scope = {
+ import: {
+ react: React,
+ '@tiny-design/react': TinyDesign,
+ '@tiny-design/icons': TinyIcons,
+ },
+};
+
+type DemoBlockProps = {
+ /** The rendered demo component */
+ component: React.ComponentType;
+ /** The raw source code string (from ?raw import) */
+ source: string;
+ /** Optional title for the demo */
+ title?: string;
+ /** Optional description for the demo */
+ description?: string;
+};
+
+export const DemoBlock = ({ component: Component, source, title, description }: DemoBlockProps) => {
+ const [showCode, setShowCode] = useState(false);
+ const [editedCode, setEditedCode] = useState
+
+
+
+
+
+
+ setShowCode(!showCode)}>
+ {showCode ? s.codeBlock.hideCode : s.codeBlock.showCode}
+
+ {/* Preview area */}
+
+
+
+ );
+};
diff --git a/apps/docs/src/components/markdown-tag/index.jsx b/apps/docs/src/components/markdown-tag/index.jsx
index c8f9c5d1..77dc2257 100755
--- a/apps/docs/src/components/markdown-tag/index.jsx
+++ b/apps/docs/src/components/markdown-tag/index.jsx
@@ -4,6 +4,7 @@
import React from 'react';
import './md-tag.scss';
import { CodeBlock } from '../code-block';
+import { DemoBlock } from '../demo-block';
const slugifyLink = (name) => {
if (name.includes(' ')) {
@@ -60,4 +61,5 @@ export const components = {
Layout: (props) => ,
Column: (props) => ,
Demo: (props) => ,
+ DemoBlock,
};
diff --git a/apps/docs/src/locale/en_US.ts b/apps/docs/src/locale/en_US.ts
index 55940263..f9a349fd 100644
--- a/apps/docs/src/locale/en_US.ts
+++ b/apps/docs/src/locale/en_US.ts
@@ -80,6 +80,11 @@ const en_US: SiteLocale = {
codeBlock: {
showCode: 'Show Code',
hideCode: 'Hide Code',
+ copyCode: 'Copy Code',
+ resetDemo: 'Reset Demo',
+ copied: 'Copied',
+ openInStackBlitz: 'Open in StackBlitz',
+ openInCodeSandbox: 'Open in CodeSandbox',
},
common: {
loading: 'Loading...',
diff --git a/apps/docs/src/locale/types.ts b/apps/docs/src/locale/types.ts
index ec2e4eea..3e2b4aeb 100644
--- a/apps/docs/src/locale/types.ts
+++ b/apps/docs/src/locale/types.ts
@@ -71,6 +71,11 @@ export type SiteLocale = {
codeBlock: {
showCode: string;
hideCode: string;
+ copyCode: string;
+ resetDemo: string;
+ copied: string;
+ openInStackBlitz: string;
+ openInCodeSandbox: string;
};
common: {
loading: string;
diff --git a/apps/docs/src/locale/zh_CN.ts b/apps/docs/src/locale/zh_CN.ts
index 83829264..eb267e5d 100644
--- a/apps/docs/src/locale/zh_CN.ts
+++ b/apps/docs/src/locale/zh_CN.ts
@@ -74,6 +74,11 @@ const zh_CN: SiteLocale = {
codeBlock: {
showCode: '显示代码',
hideCode: '隐藏代码',
+ copyCode: '复制代码',
+ resetDemo: '重置演示',
+ copied: '已复制',
+ openInStackBlitz: '在 StackBlitz 中打开',
+ openInCodeSandbox: '在 CodeSandbox 中打开',
},
common: {
loading: '加载中...',
diff --git a/apps/docs/src/utils/sandbox.ts b/apps/docs/src/utils/sandbox.ts
new file mode 100644
index 00000000..481cfbff
--- /dev/null
+++ b/apps/docs/src/utils/sandbox.ts
@@ -0,0 +1,102 @@
+import sdk from '@stackblitz/sdk';
+import { getParameters } from 'codesandbox/lib/api/define';
+
+const TINY_DESIGN_VERSION = '^1.1.0';
+const TINY_ICONS_VERSION = '^1.1.0';
+
+/**
+ * Generate the shared file set used by both StackBlitz and CodeSandbox.
+ *
+ * With the new standalone demo format, the source code already contains
+ * real imports (e.g. `import { Button } from '@tiny-design/react'`) and
+ * a default export. It can be used directly as App.tsx.
+ */
+function buildSandboxFiles(sourceCode: string): Record
+ {isEditing ? (
+ runnerError ? (
+
+
+ {/* Action bar */}
+ {runnerError}
+ ) : (
+ liveElement
+ )
+ ) : (
+
+
+
+
+
+
+
+
+
+
+ {isEditing && (
+
+
+
+ )}
+ setShowCode(!showCode)}>
+ {showCode ? s.codeBlock.hideCode : s.codeBlock.showCode}
+
+
+
+ {/* Code panel: textarea overlay on syntax-highlighted pre */}
+
+
+
+
+
+ {/* Syntax-highlighted background layer */}
+
+ {({ className, style, tokens, getLineProps, getTokenProps }) => (
+
+ )}
+
+ {/* Transparent textarea on top for editing */}
+
+
+ 
+
-+
+
+
+
+
+
+ +100
+
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/avatar/demo/presence.md b/packages/react/src/avatar/demo/Presence.tsx
old mode 100755
new mode 100644
similarity index 64%
rename from packages/react/src/avatar/demo/presence.md
rename to packages/react/src/avatar/demo/Presence.tsx
index 28f11e3d..632082a4
--- a/packages/react/src/avatar/demo/presence.md
+++ b/packages/react/src/avatar/demo/Presence.tsx
@@ -1,15 +1,11 @@
-+
+
+
+
-
- -
-
-
- );
-}
-```
-
-
-
-
-
-
-
- +100
-
-
-
-
-
-
- )
-}
-```
-
--
-
-
-
+ UP
+
+
- UP
-
-
@@ -16,27 +12,27 @@ Buttons can be grouped by placing multiple `Button` components into a `Button.Gr
-
+
- +
+
+
+
This is a content.
+ This is a content.
+ This is a content.
+ This is a content.
+ This is a content.
+ This is a content.
+ This is a content.
+ This is a content.
+ This is a content.
+ Koala
++ The koala is an arboreal herbivorous marsupial native to Australia. It is + the only extant representative of the family Phascolarctidae and its closest + living relatives are the wombats, which comprise the family Vombatidae. +
+Group title
+Inner Card content
+ Inner Card content
+
+ More}>
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/card/demo/Simple.tsx b/packages/react/src/card/demo/Simple.tsx
new file mode 100644
index 00000000..633828b1
--- /dev/null
+++ b/packages/react/src/card/demo/Simple.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Card } from '@tiny-design/react';
+
+export default function SimpleDemo() {
+ return (
+ This is a content.
+ This is a content.
+ This is a content.
+ This is a content.
+ This is a content.
+ This is a content.
+ This is a content.
- This is a content.
- This is a content.
- This is a content.
- This is a content.
- This is a content.
- This is a content.
- This is a content.
- This is a content.
- Koala
-The koala is an arboreal herbivorous marsupial native to Australia. It is the only extant representative of the family Phascolarctidae and its closest living relatives are the wombats, which comprise the family Vombatidae.
-Group title
-Inner Card content
- Inner Card content
-
- More}>
-
-
-
-
-```
-
-This is a content.
- This is a content.
- This is a content.
- This is a content.
- This is a content.
- This is a content.
- Slide 3
);
-}
-```
-
-Slide 4
);
-}
-```
-
-Slide 3
);
-}
-```
-
-
+ {
+ const { checked } = e.currentTarget;
+ setCheckboxVal(checked ? ['a', 'b', 'c'] : []);
+ setIndeterminate(false);
+ setCheckAll(checked);
+ }}
+ checked={checkAll}
+ indeterminate={indeterminate}
+ >
+ Check All
+
+
+
+ +
- {
- const { checked } = e.currentTarget;
- this.setState({
- checkboxVal: checked ? ['a', 'b', 'c']: [],
- indeterminate: false,
- checkAll: checked,
- });
- }}
- checked={checkAll}
- indeterminate={indeterminate}>
- Check All
-
-
-
- {text}
+{text}
+{text}
+{text}
{text}
-{text}
-{text}
-
+ Message.success('Copy successfully')}>
+ Click me to copy
+
+
+
+ +
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/copy-to-clipboard/demo/UseInput.tsx b/packages/react/src/copy-to-clipboard/demo/UseInput.tsx
new file mode 100644
index 00000000..59b8ea4c
--- /dev/null
+++ b/packages/react/src/copy-to-clipboard/demo/UseInput.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { CopyToClipboard, Input, Button, Message } from '@tiny-design/react';
+
+export default function UseInputDemo() {
+ const [text, setText] = React.useState('');
+
+ return (
+ +
+ +
+ setText(e.currentTarget.value)}
+ placeholder="Input something and then click button"
+ />
+ Message.success('Copy successfully')}>
+
+
+
+
+ +
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/copy-to-clipboard/demo/basic.md b/packages/react/src/copy-to-clipboard/demo/basic.md
deleted file mode 100644
index ccbfb94e..00000000
--- a/packages/react/src/copy-to-clipboard/demo/basic.md
+++ /dev/null
@@ -1,16 +0,0 @@
-+
+ +
- Message.success('Copy successfully')}>
- Click me to copy
-
-
-
- -
-```
-
--
- -
- setText(e.currentTarget.value)} placeholder="Inout something and then click button"/>
- Message.success('Copy successfully')}>
-
-
-
-
- -
-)};
-```
-
--
- -
- {val.hour} :
- {val.min} :
- {val.sec} :
- {val.millisec}
+ {val.hour} :{val.min} :{val.sec} :{val.millisec}
)}
+ Database version: 3.4 +
+ Package: dds.mongo.mid +
+ Storage space: 10 GB +
+ Replication factor: 3 +
+ Region: East China 1 +
Replication factor: 3
- Region: East China 1
+ Region: East China 1
@@ -50,7 +46,4 @@ Customised sizes to fit in a variety of containers. ); -}; -``` - -
+ Database version: 3.4 +
+ Package: dds.mongo.mid +
+ Storage space: 10 GB +
+ Replication factor: 3 +
+ Region: East China 1 +
- Database version: 3.4 -
- Package: dds.mongo.mid -
- Storage space: 10 GB -
- Replication factor: 3 -
- Region: East China 1
-
- Database version: 3.4 -
- Package: dds.mongo.mid -
- Storage space: 10 GB -
- Replication factor: 3 -
- Region: East China 1
-
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti + licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti + licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. +
+ + ); +} \ No newline at end of file diff --git a/packages/react/src/divider/demo/Horizontal.tsx b/packages/react/src/divider/demo/Horizontal.tsx new file mode 100644 index 00000000..60ad3af8 --- /dev/null +++ b/packages/react/src/divider/demo/Horizontal.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import { Divider } from '@tiny-design/react'; + +export default function HorizontalDemo() { + return ( + <> ++ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti + licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti + licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti + licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti + licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. +
+ + ); +} \ No newline at end of file diff --git a/packages/react/src/divider/demo/Vertical.tsx b/packages/react/src/divider/demo/Vertical.tsx new file mode 100644 index 00000000..fc22942d --- /dev/null +++ b/packages/react/src/divider/demo/Vertical.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import { Divider } from '@tiny-design/react'; + +export default function VerticalDemo() { + return ( + <> + Text +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
- -``` - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
- -``` - -Some contents...
- Some contents...
- Some contents...
+ open={visible}
+ >
+ Some contents...
+ Some contents...
+ Some contents...
);
-};
-```
-
-
-
+ }}
+ >
+
@@ -54,7 +50,4 @@ Open a new drawer on top of an existing drawer to handle multi branch tasks.
);
-};
-```
-
-
+}
\ No newline at end of file
diff --git a/packages/react/src/drawer/demo/Placement.tsx b/packages/react/src/drawer/demo/Placement.tsx
new file mode 100644
index 00000000..b815a962
--- /dev/null
+++ b/packages/react/src/drawer/demo/Placement.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { Drawer, Button, Radio } from '@tiny-design/react';
+
+export default function PlacementDemo() {
+ const [visible, setVisible] = React.useState(false);
+ const [placement, setPlacement] = React.useState('left');
+
+ return (
+ <>
+ setPlacement(val)}>
+ Top
+ Bottom
+ Left
+ Right
+
+
+
+ + + + setVisible(false)}
+ open={visible}
+ >
+
+
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/drawer/demo/placement.md b/packages/react/src/drawer/demo/placement.md
deleted file mode 100644
index baf67643..00000000
--- a/packages/react/src/drawer/demo/placement.md
+++ /dev/null
@@ -1,49 +0,0 @@
-
-
-### Placement
-
-The Drawer can appear from any edge of the screen.
-
-```jsx live
-() => {
-const { Group } = Radio;
-
- const Wrapper = () => {
- const [visible, setVisible] = React.useState(false);
- const [placement, setPlacement] = React.useState('left');
-
- return(
- <>
- setPlacement(val)}>
- Top
- Bottom
- Left
- Right
-
-
-
- - - - setVisible(false)}
- visible={visible}>
-
-
- );
- };
-
- return (
-
diff --git a/packages/react/src/drawer/index.md b/packages/react/src/drawer/index.md
index 37b2ca76..6bc0e242 100644
--- a/packages/react/src/drawer/index.md
+++ b/packages/react/src/drawer/index.md
@@ -1,6 +1,9 @@
-import Basic from './demo/basic.md'
-import Placement from './demo/placement.md'
-import Level from './demo/multi-level.md'
+import BasicDemo from './demo/Basic';
+import BasicSource from './demo/Basic.tsx?raw';
+import PlacementDemo from './demo/Placement';
+import PlacementSource from './demo/Placement.tsx?raw';
+import MultiLevelDemo from './demo/MultiLevel';
+import MultiLevelSource from './demo/MultiLevel.tsx?raw';
# Drawer
@@ -24,11 +27,35 @@ import { Drawer } from 'tiny-design';
-
+
+### Basic
+
+Basic drawer.
+
+
+
+
+### Multi-level drawer
+
+Open a new drawer on top of an existing drawer to handle multi branch tasks.
+
+
-
+
+### Placement
+
+The Drawer can appear from any edge of the screen.
+
+
@@ -38,10 +65,10 @@ import { Drawer } from 'tiny-design';
| ----------------- | ----------------------------------------------------- | --------------------------------------------------------- | --------- |
| placement | The placement of the Drawer | enum: `top` | `bottom` | `left` | `right` | `right` |
| size | Drawer dialog width or height | number | string | 256 |
-| visible | Whether the Drawer dialog is visible or not | boolean | - |
-| header | Drawer header | ReactNode | - |
-| footer | Drawer footer | ReactNode | - |
-| closable | Display a close button | boolean | `true` |
-| unmountOnClose | Whether unmount child components when closing drawer | boolean | `true` |
+| open | Whether the Drawer dialog is visible or not | boolean | - |
+| header | Drawer header | ReactNode | - |
+| footer | Drawer footer | ReactNode | - |
+| closable | Display a close button | boolean | `true` |
+| unmountOnClose | Whether unmount child components when closing drawer | boolean | `true` |
| style | style object of container object | CSSProperties | - |
-| className | className of container | string | - |
+| className | className of container | string | - |
\ No newline at end of file
diff --git a/packages/react/src/drawer/index.zh_CN.md b/packages/react/src/drawer/index.zh_CN.md
index d03cdb6b..aa4c2e0c 100644
--- a/packages/react/src/drawer/index.zh_CN.md
+++ b/packages/react/src/drawer/index.zh_CN.md
@@ -1,6 +1,9 @@
-import Basic from './demo/basic.md'
-import Placement from './demo/placement.md'
-import Level from './demo/multi-level.md'
+import BasicDemo from './demo/Basic';
+import BasicSource from './demo/Basic.tsx?raw';
+import PlacementDemo from './demo/Placement';
+import PlacementSource from './demo/Placement.tsx?raw';
+import MultiLevelDemo from './demo/MultiLevel';
+import MultiLevelSource from './demo/MultiLevel.tsx?raw';
# Drawer
@@ -24,11 +27,35 @@ import { Drawer } from 'tiny-design';
-
+
+### 基本用法
+
+基本的抽屉。
+
+
+
+
+### 多层抽屉
+
+在现有抽屉上打开新抽屉以处理多分支任务。
+
+
-
+
+### 位置
+
+抽屉可以从屏幕的任何边缘出现。
+
+
@@ -38,10 +65,10 @@ import { Drawer } from 'tiny-design';
| ----------------- | --------------------------------------------- | --------------------------------------------------------- | --------- |
| placement | 抽屉的弹出位置 | enum: `top` | `bottom` | `left` | `right` | `right` |
| size | 抽屉的宽度或高度 | number | string | 256 |
-| visible | 抽屉是否可见 | boolean | - |
+| open | 抽屉是否可见 | boolean | - |
| header | 抽屉头部内容 | ReactNode | - |
| footer | 抽屉底部内容 | ReactNode | - |
| closable | 是否显示关闭按钮 | boolean | `true` |
| unmountOnClose | 关闭时是否卸载子组件 | boolean | `true` |
| style | 容器的样式对象 | CSSProperties | - |
-| className | 容器的类名 | string | - |
+| className | 容器的类名 | string | - |
\ No newline at end of file
diff --git a/packages/react/src/dropdown/demo/Arrow.tsx b/packages/react/src/dropdown/demo/Arrow.tsx
new file mode 100644
index 00000000..b1490613
--- /dev/null
+++ b/packages/react/src/dropdown/demo/Arrow.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { Dropdown, Menu, Message, Button, Flex } from '@tiny-design/react';
+
+export default function ArrowDemo() {
+ const renderOverlay = () => (
+
+ );
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/dropdown/demo/Basic.tsx b/packages/react/src/dropdown/demo/Basic.tsx
new file mode 100644
index 00000000..f07a7643
--- /dev/null
+++ b/packages/react/src/dropdown/demo/Basic.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { Dropdown, Menu, Message } from '@tiny-design/react';
+import { IconDown } from '@tiny-design/icons';
+
+export default function BasicDemo() {
+ return (
+ Message.info(`Click on item ${key}`)}>
+ 1st menu item
+ 2nd menu item
+ 3rd menu item
+
+ }
+ >
+ e.preventDefault()}>
+ Hover me
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/dropdown/demo/Cascade.tsx b/packages/react/src/dropdown/demo/Cascade.tsx
new file mode 100644
index 00000000..32f8d3d1
--- /dev/null
+++ b/packages/react/src/dropdown/demo/Cascade.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { Dropdown, Menu } from '@tiny-design/react';
+import { IconDown } from '@tiny-design/icons';
+
+export default function CascadeDemo() {
+ return (
+
+
+ 1st menu item
+ 2nd menu item
+
+
+ 3rd menu item
+ 4th menu item
+
+
+ 5th menu item
+ 6th menu item
+
+
+ }
+ >
+ e.preventDefault()}>
+ Cascade dropdowm
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/dropdown/demo/Close.tsx b/packages/react/src/dropdown/demo/Close.tsx
new file mode 100644
index 00000000..0d4e6859
--- /dev/null
+++ b/packages/react/src/dropdown/demo/Close.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Dropdown, Menu } from '@tiny-design/react';
+import { IconDown } from '@tiny-design/icons';
+
+export default function CloseDemo() {
+ const [visible, setVisible] = React.useState(false);
+
+ const handleMenuClick = (key) => {
+ if (key === '2') {
+ setVisible(false);
+ }
+ };
+
+ const handleVisibleChange = (vis) => {
+ if (vis) {
+ setVisible(vis);
+ }
+ };
+
+ const renderOverlay = () => (
+
+ );
+
+ return (
+
+ e.preventDefault()}>
+ Hover me
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/dropdown/demo/Other.tsx b/packages/react/src/dropdown/demo/Other.tsx
new file mode 100644
index 00000000..472198d2
--- /dev/null
+++ b/packages/react/src/dropdown/demo/Other.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { Dropdown, Menu, Message } from '@tiny-design/react';
+import { IconDown } from '@tiny-design/icons';
+
+export default function OtherDemo() {
+ return (
+ Message.info(`Click on item ${key}`)}>
+ 1st menu item
+ 2nd menu item
+ 3rd menu item
+
+ }
+ >
+ e.preventDefault()}>
+ Hover me
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/dropdown/demo/Placement.tsx b/packages/react/src/dropdown/demo/Placement.tsx
new file mode 100644
index 00000000..3584ef46
--- /dev/null
+++ b/packages/react/src/dropdown/demo/Placement.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { Dropdown, Menu, Message, Button, Flex } from '@tiny-design/react';
+
+export default function PlacementDemo() {
+ const renderOverlay = () => (
+
+ );
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/dropdown/demo/Trigger.tsx b/packages/react/src/dropdown/demo/Trigger.tsx
new file mode 100644
index 00000000..4b5e4348
--- /dev/null
+++ b/packages/react/src/dropdown/demo/Trigger.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { Dropdown, Menu, Message } from '@tiny-design/react';
+import { IconDown } from '@tiny-design/icons';
+
+export default function TriggerDemo() {
+ return (
+ Message.info(`Click on item ${key}`)}>
+ 1st menu item
+ 2nd menu item
+ 3rd menu item
+
+ }
+ >
+ e.preventDefault()}>
+ Click me
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/dropdown/demo/arrow.md b/packages/react/src/dropdown/demo/arrow.md
deleted file mode 100644
index bfc73c1d..00000000
--- a/packages/react/src/dropdown/demo/arrow.md
+++ /dev/null
@@ -1,51 +0,0 @@
-
-
-### Arrow
-
-Display an arrow.
-
-```jsx live
-class ArrowExample extends React.PureComponent {
- renderOverlay() {
- return (
-
- );
- }
-
- render() {
- return (
- <>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
- }
-}
-```
-
-+
+ + + +
Some contents...
+ Some contents...
+ Some contents...
+ -
- - - -
Some contents...
- Some contents...
- Some contents...
- +
+
-
-
Horizontal flip
@@ -28,9 +24,9 @@ I'm back - - - + + +Vertical flip
-
-
- ); -} -``` - -
col-4
col-4
-
+
col-4
@@ -62,7 +58,7 @@ Child elements vertically aligned.
col-4
col-4
col-4
@@ -71,8 +67,5 @@ Child elements vertically aligned.
col-4
col-6
- )
-}
-```
-
-Gutter Size:
-col-6
@@ -49,8 +45,5 @@ Use the `gutter` property of `Row` as grid spacing. It is recommended to set it
col-6
col-6 col-offset-6
- )
-}
-```
-
-4 col-order-4
- )
-}
-```
-
-
+
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/icon/demo/svg-spin.md b/packages/react/src/icon/demo/svg-spin.md
deleted file mode 100644
index 780514f4..00000000
--- a/packages/react/src/icon/demo/svg-spin.md
+++ /dev/null
@@ -1,26 +0,0 @@
-
-
- );
-}
-```
-
-
+
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/image/demo/Round.tsx b/packages/react/src/image/demo/Round.tsx
new file mode 100644
index 00000000..5f9792f1
--- /dev/null
+++ b/packages/react/src/image/demo/Round.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { Image } from '@tiny-design/react';
+
+export default function RoundDemo() {
+ return Scroll up to make images into the view area.
+ +
-
-```
-
-Scroll up to make images into the view area.
- -
+
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/input-number/demo/disabled.md b/packages/react/src/input-number/demo/Disabled.tsx
similarity index 66%
rename from packages/react/src/input-number/demo/disabled.md
rename to packages/react/src/input-number/demo/Disabled.tsx
index 52f45c4a..174afa30 100644
--- a/packages/react/src/input-number/demo/disabled.md
+++ b/packages/react/src/input-number/demo/Disabled.tsx
@@ -1,24 +1,17 @@
-- +
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/input-number/demo/basic.md b/packages/react/src/input-number/demo/basic.md
deleted file mode 100644
index 23ae7a49..00000000
--- a/packages/react/src/input-number/demo/basic.md
+++ /dev/null
@@ -1,13 +0,0 @@
-+
+
-
-```
-
-
-
-
-
-```
-
--
-
+
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/input-otp/demo/basic.md b/packages/react/src/input-otp/demo/Basic.tsx
similarity index 59%
rename from packages/react/src/input-otp/demo/basic.md
rename to packages/react/src/input-otp/demo/Basic.tsx
index c8a4bf56..13277096 100644
--- a/packages/react/src/input-otp/demo/basic.md
+++ b/packages/react/src/input-otp/demo/Basic.tsx
@@ -1,11 +1,7 @@
-
@@ -13,7 +9,4 @@ A basic OTP input.
);
-}
-```
-
-Entered: {value}
@@ -23,7 +19,4 @@ Use `value` for controlled mode and `formatter` to restrict input.
);
-}
-```
-
-Only digits are allowed
@@ -22,7 +18,4 @@ Set the number of OTP cells using the `length` prop.
@@ -24,7 +20,4 @@ Use `mask` to hide the input values (useful for PIN codes). You can also set a c
);
-}
-```
-
-Value: {value}
@@ -25,7 +21,4 @@ Customize the separator between cells using the `separator` prop.
-
- );
-}
-```
-
-
+
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/input-password/demo/HideButton.tsx b/packages/react/src/input-password/demo/HideButton.tsx
new file mode 100644
index 00000000..52a1c7fe
--- /dev/null
+++ b/packages/react/src/input-password/demo/HideButton.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { InputPassword } from '@tiny-design/react';
+
+export default function HideButtonDemo() {
+ return (
+
+
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/input-password/demo/Strength.tsx b/packages/react/src/input-password/demo/Strength.tsx
new file mode 100644
index 00000000..296a4b7d
--- /dev/null
+++ b/packages/react/src/input-password/demo/Strength.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { InputPassword, StrengthIndicator } from '@tiny-design/react';
+
+export default function StrengthDemo() {
+ const [password, setPassword] = React.useState('');
+
+ const checkPwd = (str: string) => {
+ const { length } = str;
+ let lv = 0;
+ if (str.length > 0 && str.length < 6) {
+ return ++lv;
+ }
+ if (length > 8) {
+ lv++;
+ }
+ if (/[0-9]/.test(str)) {
+ lv++;
+ }
+ if (/[a-z]/.test(str)) {
+ lv++;
+ }
+ if (/[A-Z]/.test(str)) {
+ lv++;
+ }
+ if (/[.|-|_]/.test(str)) {
+ lv++;
+ }
+
+ return lv;
+ };
+
+ return (
+
+ setPassword(e.currentTarget.value)} />
+
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/input-password/demo/basic.md b/packages/react/src/input-password/demo/basic.md
deleted file mode 100755
index bd080a2e..00000000
--- a/packages/react/src/input-password/demo/basic.md
+++ /dev/null
@@ -1,13 +0,0 @@
-
-
-```
-
-
-
-```
-
-
- this.setState({ password: e.currentTarget.value })}/>
-
- );
- }
-}
-```
-
-+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/input/demo/Basic.tsx b/packages/react/src/input/demo/Basic.tsx
new file mode 100644
index 00000000..42b53d7d
--- /dev/null
+++ b/packages/react/src/input/demo/Basic.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { Input } from '@tiny-design/react';
+
+export default function BasicDemo() {
+ return ;
+}
\ No newline at end of file
diff --git a/packages/react/src/input/demo/Clearable.tsx b/packages/react/src/input/demo/Clearable.tsx
new file mode 100644
index 00000000..4fe12800
--- /dev/null
+++ b/packages/react/src/input/demo/Clearable.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { Input } from '@tiny-design/react';
+
+export default function ClearableDemo() {
+ return ;
+}
\ No newline at end of file
diff --git a/packages/react/src/input/demo/PreSufFix.tsx b/packages/react/src/input/demo/PreSufFix.tsx
new file mode 100644
index 00000000..edb6bf6b
--- /dev/null
+++ b/packages/react/src/input/demo/PreSufFix.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { Input } from '@tiny-design/react';
+import { IconUser, IconSearch } from '@tiny-design/icons';
+
+export default function PreSufFixDemo() {
+ const { Group, Addon } = Input;
+
+ const searchOnClick = (e: any) => {
+ console.log(e);
+ };
+
+ return (
+ +
+
+
+
+ +
+ +
+ } /> +
+ } + /> +
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/input/demo/Size.tsx b/packages/react/src/input/demo/Size.tsx
new file mode 100644
index 00000000..27e3c8d3
--- /dev/null
+++ b/packages/react/src/input/demo/Size.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Input } from '@tiny-design/react';
+
+export default function SizeDemo() {
+ return (
+ + +
+ +
+ } /> +
+ } + /> +
+
+
+ +
+ +
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/input/demo/addon-button.md b/packages/react/src/input/demo/addon-button.md
deleted file mode 100755
index 7cbda9b8..00000000
--- a/packages/react/src/input/demo/addon-button.md
+++ /dev/null
@@ -1,46 +0,0 @@
-+ +
+ +
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-```
-
--
-
-
-
- -
- -
- }/> -
- } - /> -
- );
-}
-```
-
-- -
- -
- }/> -
- } - /> -
-
-
- -
- -
-```
-
-- -
- -
Using command + option + i to open "Developer Tool".
);
-}
-```
-
-- This link will refresh the current window. - -``` - -
- This is a link without underline style. - -``` - -
+ Blurred state：
+ setBlurred(val)} />
+
+
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/loader/demo/container.md b/packages/react/src/loader/demo/Container.tsx
old mode 100755
new mode 100644
similarity index 69%
rename from packages/react/src/loader/demo/container.md
rename to packages/react/src/loader/demo/Container.tsx
index f80e9ce4..04243000
--- a/packages/react/src/loader/demo/container.md
+++ b/packages/react/src/loader/demo/Container.tsx
@@ -1,11 +1,7 @@
-
+ Loading state：
+ setLoading(val)} />
+
+
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/loader/demo/Tips.tsx b/packages/react/src/loader/demo/Tips.tsx
new file mode 100644
index 00000000..1c1130f8
--- /dev/null
+++ b/packages/react/src/loader/demo/Tips.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Loader, Alert } from '@tiny-design/react';
+
+export default function TipsDemo() {
+ return (
+ <>
+ +
+
- Blurred state：
- setBlurred(val)} />
-
-
- );
- };
-
- return (
-
- Loading state：
- setLoading(val)} />
-
-
- );
- };
-
- return (
- -
-
Some contents...
+ Some contents...
+ Some contents...
+ Some contents...
+ Some contents...
+ Some contents...
+ Some contents...
+ Some contents...
+ Some contents...
+ Are you sure you want to proceed?
+Application settings go here.
+Some contents...
+ Some contents...
+ Some contents...
+ +
+ +
Some contents...
+ Some contents...
+ Some contents...
+ Some contents...
+ Some contents...
+ Some contents...
+ Some contents...
- Some contents...
- Some contents...
- Some contents...
- Some contents...
- Some contents...
- Some contents...
- Some contents...
- Some contents...
- Are you sure you want to proceed?
-Application settings go here.
-Some contents...
- Some contents...
- Some contents...
- -
- -
Some contents...
- Some contents...
- Some contents...
- Some contents...
- Some contents...
- Some contents...
-
+
-
-
+
+
-
+
@@ -29,7 +25,4 @@ Use `size` to set different size of select
);
-}
-```
-
-
+}
\ No newline at end of file
diff --git a/packages/react/src/native-select/index.md b/packages/react/src/native-select/index.md
index d3656f10..266efbdf 100644
--- a/packages/react/src/native-select/index.md
+++ b/packages/react/src/native-select/index.md
@@ -1,7 +1,11 @@
-import Basic from './demo/basic.md'
-import Disabled from './demo/disabled.md'
-import Group from './demo/group.md'
-import Size from './demo/size.md'
+import BasicDemo from './demo/Basic';
+import BasicSource from './demo/Basic.tsx?raw';
+import DisabledDemo from './demo/Disabled';
+import DisabledSource from './demo/Disabled.tsx?raw';
+import GroupDemo from './demo/Group';
+import GroupSource from './demo/Group.tsx?raw';
+import SizeDemo from './demo/Size';
+import SizeSource from './demo/Size.tsx?raw';
# Native Select
@@ -24,12 +28,38 @@ const { Group, Option } = NativeSelect;
-
+
+### Basic
+
+
+
+
+### Size
+
+Use `size` to set different size of select
+
+
-
+
+### Group
+
+
+
+
+### Disabled
+
+
@@ -41,4 +71,3 @@ const { Group, Option } = NativeSelect;
| disabled | disable to select | boolean | false |
| style | style object of container object | | - |
| className | className of container | string | - |
-
diff --git a/packages/react/src/native-select/index.zh_CN.md b/packages/react/src/native-select/index.zh_CN.md
index 9225d98e..9ac63f4d 100644
--- a/packages/react/src/native-select/index.zh_CN.md
+++ b/packages/react/src/native-select/index.zh_CN.md
@@ -1,7 +1,11 @@
-import Basic from './demo/basic.md'
-import Disabled from './demo/disabled.md'
-import Group from './demo/group.md'
-import Size from './demo/size.md'
+import BasicDemo from './demo/Basic';
+import BasicSource from './demo/Basic.tsx?raw';
+import DisabledDemo from './demo/Disabled';
+import DisabledSource from './demo/Disabled.tsx?raw';
+import GroupDemo from './demo/Group';
+import GroupSource from './demo/Group.tsx?raw';
+import SizeDemo from './demo/Size';
+import SizeSource from './demo/Size.tsx?raw';
# Native Select
@@ -24,12 +28,38 @@ const { Group, Option } = NativeSelect;
-
+
+### 基础用法
+
+
+
+
+### 尺寸
+
+使用 `size` 设置不同尺寸的选择器
+
+
-
+
+### 分组
+
+
+
+
+### 禁用
+
+
diff --git a/packages/react/src/notification/demo/basic.md b/packages/react/src/notification/demo/Basic.tsx
old mode 100755
new mode 100644
similarity index 75%
rename from packages/react/src/notification/demo/basic.md
rename to packages/react/src/notification/demo/Basic.tsx
index 25b9f38b..1613ea98
--- a/packages/react/src/notification/demo/basic.md
+++ b/packages/react/src/notification/demo/Basic.tsx
@@ -1,11 +1,7 @@
-
+import React from 'react';
+import { Button, Notification } from '@tiny-design/react';
-### Basic
-
-The simplest usage that close the notification box after 4.5s.
-
-```jsx live
-() => {
+export default function BasicDemo() {
const btnOnClick = () => {
Notification.open({
title: 'Notification Title',
@@ -15,9 +11,6 @@ The simplest usage that close the notification box after 4.5s.
},
});
};
-
- return ;
-}
-```
-
+ return ;
+}
\ No newline at end of file
diff --git a/packages/react/src/notification/demo/duration.md b/packages/react/src/notification/demo/Duration.tsx
old mode 100755
new mode 100644
similarity index 66%
rename from packages/react/src/notification/demo/duration.md
rename to packages/react/src/notification/demo/Duration.tsx
index 9d6ad3de..aa015d6c
--- a/packages/react/src/notification/demo/duration.md
+++ b/packages/react/src/notification/demo/Duration.tsx
@@ -1,11 +1,7 @@
-
+import React from 'react';
+import { Button, Notification } from '@tiny-design/react';
-### Control the close time
-
-If set the `duration` value to 0, the notification will never close automatically.
-
-```jsx live
-() => {
+export default function DurationDemo() {
const btnOnClick = () => {
Notification.open({
title: 'Notification Title',
@@ -13,11 +9,8 @@ If set the `duration` value to 0, the notification will never close automaticall
duration: 0,
});
};
-
+
return (
);
-}
-```
-
-
+}
\ No newline at end of file
diff --git a/packages/react/src/notification/demo/icon.md b/packages/react/src/notification/demo/Icon.tsx
old mode 100755
new mode 100644
similarity index 54%
rename from packages/react/src/notification/demo/icon.md
rename to packages/react/src/notification/demo/Icon.tsx
index 0291bc42..bf0e5bb6
--- a/packages/react/src/notification/demo/icon.md
+++ b/packages/react/src/notification/demo/Icon.tsx
@@ -1,23 +1,17 @@
-
+import React from 'react';
+import { Button, Notification } from '@tiny-design/react';
+import { IconBroadcast } from '@tiny-design/icons';
-### Customized Icon
-
-The icon can be customized to any react node.
-
-```jsx live
-() => {
+export default function IconDemo() {
const btnOnClick = () => {
Notification.open({
title: 'Notification Title',
description: 'This is the content of the notification. This is the content of the notification.',
- icon:
+}
\ No newline at end of file
diff --git a/packages/react/src/notification/demo/placement.md b/packages/react/src/notification/demo/Placement.tsx
old mode 100755
new mode 100644
similarity index 76%
rename from packages/react/src/notification/demo/placement.md
rename to packages/react/src/notification/demo/Placement.tsx
index 838d50a9..ebf97763
--- a/packages/react/src/notification/demo/placement.md
+++ b/packages/react/src/notification/demo/Placement.tsx
@@ -1,19 +1,15 @@
-
+import React from 'react';
+import { Button, Notification, Flex } from '@tiny-design/react';
-### Placement
-
-A notification box can appear from the `topRight`, `bottomRight`, `bottomLeft` or `topLeft` of the viewport.
-
-```jsx live
-() => {
- const btnOnClick = (placement) => {
+export default function PlacementDemo() {
+ const btnOnClick = (placement: string) => {
Notification.open({
title: 'Notification Title',
description: 'This is the content of the notification. This is the content of the notification.',
placement,
});
};
-
+
return (
<>
@@ -27,7 +23,4 @@ A notification box can appear from the `topRight`, `bottomRight`, `bottomLeft` o
);
-}
-```
-
-
+}
\ No newline at end of file
diff --git a/packages/react/src/notification/demo/type.md b/packages/react/src/notification/demo/Type.tsx
old mode 100755
new mode 100644
similarity index 79%
rename from packages/react/src/notification/demo/type.md
rename to packages/react/src/notification/demo/Type.tsx
index 00bd0a67..29de0ce6
--- a/packages/react/src/notification/demo/type.md
+++ b/packages/react/src/notification/demo/Type.tsx
@@ -1,12 +1,8 @@
-
+import React from 'react';
+import { Button, Notification, Flex } from '@tiny-design/react';
-### Different types of notification
-
-A notification box with a icon at the left side.
-
-```jsx live
-() => {
- const btnOnClick = (type) => {
+export default function TypeDemo() {
+ const btnOnClick = (type: string) => {
Notification[type]({
title: 'Notification Title',
description: 'This is the content of the notification. This is the content of the notification.',
@@ -15,7 +11,7 @@ A notification box with a icon at the left side.
},
});
};
-
+
return (
@@ -24,7 +20,4 @@ A notification box with a icon at the left side.
);
-}
-```
-
-
+}
\ No newline at end of file
diff --git a/packages/react/src/notification/index.md b/packages/react/src/notification/index.md
index f6154022..489a6dba 100755
--- a/packages/react/src/notification/index.md
+++ b/packages/react/src/notification/index.md
@@ -1,8 +1,13 @@
-import Basic from './demo/basic.md'
-import Duration from './demo/duration.md'
-import Icon from './demo/icon.md'
-import Placement from './demo/placement.md'
-import Type from './demo/type.md'
+import BasicDemo from './demo/Basic';
+import BasicSource from './demo/Basic.tsx?raw';
+import DurationDemo from './demo/Duration';
+import DurationSource from './demo/Duration.tsx?raw';
+import IconDemo from './demo/Icon';
+import IconSource from './demo/Icon.tsx?raw';
+import PlacementDemo from './demo/Placement';
+import PlacementSource from './demo/Placement.tsx?raw';
+import TypeDemo from './demo/Type';
+import TypeSource from './demo/Type.tsx?raw';
# Notification
@@ -28,13 +33,53 @@ import { Notification } from 'tiny-design';
-
+
+### Basic
+
+The simplest usage that close the notification box after 4.5s.
+
+
+
+
+### Control the close time
+
+If set the `duration` value to 0, the notification will never close automatically.
+
+
+
+
+### Customized Icon
+
+The icon can be customized to any react node.
+
+
-
+
+### Placement
+
+A notification box can appear from the `topRight`, `bottomRight`, `bottomLeft` or `topLeft` of the viewport.
+
+
+
+
+### Different types of notification
+
+A notification box with a icon at the left side.
+
+
@@ -61,4 +106,4 @@ Notification is called through static methods:
| icon | custom icon, or false to hide | ReactNode | boolean | - |
| onClick | click callback | (e: MouseEvent) => void | - |
| onClose | close callback | (e: MouseEvent) => void | - |
-| placement | position of the notification | enum: `top-right` | `top-left` | `bottom-right` | `bottom-left` | `top-right` |
+| placement | position of the notification | enum: `top-right` | `top-left` | `bottom-right` | `bottom-left` | `top-right` |
\ No newline at end of file
diff --git a/packages/react/src/notification/index.zh_CN.md b/packages/react/src/notification/index.zh_CN.md
index 93a95093..c08bdc5a 100644
--- a/packages/react/src/notification/index.zh_CN.md
+++ b/packages/react/src/notification/index.zh_CN.md
@@ -1,8 +1,13 @@
-import Basic from './demo/basic.md'
-import Duration from './demo/duration.md'
-import Icon from './demo/icon.md'
-import Placement from './demo/placement.md'
-import Type from './demo/type.md'
+import BasicDemo from './demo/Basic';
+import BasicSource from './demo/Basic.tsx?raw';
+import DurationDemo from './demo/Duration';
+import DurationSource from './demo/Duration.tsx?raw';
+import IconDemo from './demo/Icon';
+import IconSource from './demo/Icon.tsx?raw';
+import PlacementDemo from './demo/Placement';
+import PlacementSource from './demo/Placement.tsx?raw';
+import TypeDemo from './demo/Type';
+import TypeSource from './demo/Type.tsx?raw';
# Notification
@@ -28,13 +33,53 @@ import { Notification } from 'tiny-design';
-
+
+### 基本用法
+
+最简单的用法，4.5 秒后自动关闭。
+
+
+
+
+### 控制关闭时间
+
+通过设置 `duration` 为 0 可以禁用自动关闭。
+
+
+
+
+### 自定义图标
+
+可以自定义图标为任意 React 节点。
+
+
-
+
+### 位置
+
+通知框可以从视口的 `topRight`、`bottomRight`、`bottomLeft` 或 `topLeft` 弹出。
+
+
+
+
+### 不同类型的通知
+
+左侧带图标的通知。
+
+
@@ -61,4 +106,4 @@ Notification 通过静态方法调用：
| icon | 自定义图标，设为 false 则隐藏 | ReactNode | boolean | - |
| onClick | 点击回调 | (e: MouseEvent) => void | - |
| onClose | 关闭回调 | (e: MouseEvent) => void | - |
-| placement | 通知弹出位置 | enum: `top-right` | `top-left` | `bottom-right` | `bottom-left` | `top-right` |
+| placement | 通知弹出位置 | enum: `top-right` | `top-left` | `bottom-right` | `bottom-left` | `top-right` |
\ No newline at end of file
diff --git a/packages/react/src/overlay/demo/Basic.tsx b/packages/react/src/overlay/demo/Basic.tsx
new file mode 100644
index 00000000..2c13759a
--- /dev/null
+++ b/packages/react/src/overlay/demo/Basic.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Button, Overlay } from '@tiny-design/react';
+
+export default function BasicDemo() {
+ const [isShow, setIsShow] = React.useState(false);
+
+ return (
+ <>
+
+ setIsShow(false)}>
+
+
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/overlay/demo/Blurred.tsx b/packages/react/src/overlay/demo/Blurred.tsx
new file mode 100644
index 00000000..ab22aa9e
--- /dev/null
+++ b/packages/react/src/overlay/demo/Blurred.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Button, Overlay } from '@tiny-design/react';
+
+export default function BlurredDemo() {
+ const [isShow, setIsShow] = React.useState(false);
+
+ return (
+ <>
+
+ setIsShow(false)}>
+
+
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/overlay/demo/CustomContent.tsx b/packages/react/src/overlay/demo/CustomContent.tsx
new file mode 100644
index 00000000..02bd823f
--- /dev/null
+++ b/packages/react/src/overlay/demo/CustomContent.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Button, Overlay } from '@tiny-design/react';
+
+export default function CustomContentDemo() {
+ const [isShow, setIsShow] = React.useState(false);
+
+ return (
+ <>
+
+ setIsShow(false)}>
+
+
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/overlay/demo/MaskTypes.tsx b/packages/react/src/overlay/demo/MaskTypes.tsx
new file mode 100644
index 00000000..3f2dce87
--- /dev/null
+++ b/packages/react/src/overlay/demo/MaskTypes.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Button, Overlay, Flex } from '@tiny-design/react';
+
+export default function MaskTypesDemo() {
+ const [visible, setVisible] = React.useState(false);
+ const [type, setType] = React.useState('default');
+
+ const open = (t) => {
+ setType(t);
+ setVisible(true);
+ };
+
+ return (
+ <>
+
+
+
+
+
+ setVisible(false)}>
+
+
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/overlay/demo/basic.md b/packages/react/src/overlay/demo/basic.md
deleted file mode 100644
index ed8847e0..00000000
--- a/packages/react/src/overlay/demo/basic.md
+++ /dev/null
@@ -1,29 +0,0 @@
-
-
-### Basic
-
-Basic overlay with a default mask.
-
-
-```jsx live
-() => {
- const Wrapper = () => {
- const [isShow, setIsShow] = React.useState(false);
-
- return (
- <>
-
- setIsShow(false)}>
-
-
- );
- };
-
- return
diff --git a/packages/react/src/overlay/demo/blurred.md b/packages/react/src/overlay/demo/blurred.md
deleted file mode 100644
index cbc1783e..00000000
--- a/packages/react/src/overlay/demo/blurred.md
+++ /dev/null
@@ -1,29 +0,0 @@
-
-
-### Blurred
-
-Overlay with a blurred backdrop effect.
-
-
-```jsx live
-() => {
- const Wrapper = () => {
- const [isShow, setIsShow] = React.useState(false);
-
- return (
- <>
-
- setIsShow(false)}>
-
-
- );
- };
-
- return
diff --git a/packages/react/src/overlay/demo/custom-content.md b/packages/react/src/overlay/demo/custom-content.md
deleted file mode 100644
index f8e90ce8..00000000
--- a/packages/react/src/overlay/demo/custom-content.md
+++ /dev/null
@@ -1,43 +0,0 @@
-
-
-### Custom Content
-
-Overlay can wrap any custom content rendered above the mask.
-
-
-```jsx live
-() => {
- const Wrapper = () => {
- const [isShow, setIsShow] = React.useState(false);
-
- return (
- <>
-
- setIsShow(false)}>
-
-
- );
- };
-
- return
diff --git a/packages/react/src/overlay/demo/mask-types.md b/packages/react/src/overlay/demo/mask-types.md
deleted file mode 100644
index d5bd6156..00000000
--- a/packages/react/src/overlay/demo/mask-types.md
+++ /dev/null
@@ -1,39 +0,0 @@
-
-
-### Mask Types
-
-Overlay supports three mask types: `default`, `inverted`, and `none`.
-
-
-```jsx live
-() => {
- const Wrapper = () => {
- const [visible, setVisible] = React.useState(false);
- const [type, setType] = React.useState('default');
-
- const open = (t) => {
- setType(t);
- setVisible(true);
- };
-
- return (
- <>
-
-
-
-
-
- setVisible(false)}>
-
-
- );
- };
-
- return
diff --git a/packages/react/src/overlay/index.md b/packages/react/src/overlay/index.md
index 6736bdd6..8dad9a94 100644
--- a/packages/react/src/overlay/index.md
+++ b/packages/react/src/overlay/index.md
@@ -1,7 +1,11 @@
-import Basic from './demo/basic.md'
-import Blurred from './demo/blurred.md'
-import MaskTypes from './demo/mask-types.md'
-import CustomContent from './demo/custom-content.md'
+import BasicDemo from './demo/Basic';
+import BasicSource from './demo/Basic.tsx?raw';
+import BlurredDemo from './demo/Blurred';
+import BlurredSource from './demo/Blurred.tsx?raw';
+import MaskTypesDemo from './demo/MaskTypes';
+import MaskTypesSource from './demo/MaskTypes.tsx?raw';
+import CustomContentDemo from './demo/CustomContent';
+import CustomContentSource from './demo/CustomContent.tsx?raw';
# Overlay
@@ -21,12 +25,44 @@ import { Overlay } from 'tiny-design';
-
+
+### Basic
+
+Basic overlay with a default mask.
+
+
+
+
+### Mask Types
+
+Overlay supports three mask types: `default`, `inverted`, and `none`.
+
+
-
+
+### Blurred
+
+Overlay with a blurred backdrop effect.
+
+
+
+
+### Custom Content
+
+Overlay can wrap any custom content rendered above the mask.
+
+
@@ -46,4 +82,4 @@ import { Overlay } from 'tiny-design';
| onExited | callback after exit transition finishes | () => void | - |
| children | content rendered inside the overlay | ReactNode | - |
| style | style object of container | CSSProperties | - |
-| className | className of container | string | - |
+| className | className of container | string | - |
\ No newline at end of file
diff --git a/packages/react/src/overlay/index.zh_CN.md b/packages/react/src/overlay/index.zh_CN.md
index cbb34186..e9275d60 100644
--- a/packages/react/src/overlay/index.zh_CN.md
+++ b/packages/react/src/overlay/index.zh_CN.md
@@ -1,7 +1,11 @@
-import Basic from './demo/basic.md'
-import Blurred from './demo/blurred.md'
-import MaskTypes from './demo/mask-types.md'
-import CustomContent from './demo/custom-content.md'
+import BasicDemo from './demo/Basic';
+import BasicSource from './demo/Basic.tsx?raw';
+import BlurredDemo from './demo/Blurred';
+import BlurredSource from './demo/Blurred.tsx?raw';
+import MaskTypesDemo from './demo/MaskTypes';
+import MaskTypesSource from './demo/MaskTypes.tsx?raw';
+import CustomContentDemo from './demo/CustomContent';
+import CustomContentSource from './demo/CustomContent.tsx?raw';
# Overlay
@@ -21,12 +25,44 @@ import { Overlay } from 'tiny-design';
-
+
+### 基础用法
+
+带有默认遮罩的基础遮罩层。
+
+
+
+
+### 遮罩类型
+
+遮罩层支持三种类型：`default`、`inverted` 和 `none`。
+
+
-
+
+### 模糊背景
+
+带有模糊背景效果的遮罩层。
+
+
+
+
+### 自定义内容
+
+遮罩层可以包裹任意自定义内容并显示在遮罩上方。
+
+
@@ -46,4 +82,4 @@ import { Overlay } from 'tiny-design';
| onExited | 退出过渡结束后的回调 | () => void | - |
| children | 遮罩层内渲染的内容 | ReactNode | - |
| style | 容器的样式对象 | CSSProperties | - |
-| className | 容器的类名 | string | - |
+| className | 容器的类名 | string | - |
\ No newline at end of file
diff --git a/packages/react/src/pagination/demo/Align.tsx b/packages/react/src/pagination/demo/Align.tsx
new file mode 100644
index 00000000..e8399f64
--- /dev/null
+++ b/packages/react/src/pagination/demo/Align.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Pagination } from '@tiny-design/react';
+
+export default function AlignDemo() {
+ return (
+ <>
+
+
+
+import React from 'react';
+import { Pagination } from '@tiny-design/react';
-### Controlled
-
-Controlled page number.
-
-```jsx live
-() => {
+export default function ControlledDemo() {
const [current, setCurrent] = React.useState(3);
- const onChange = (page) => {
+ const onChange = (page: number) => {
console.log(page);
setCurrent(page);
};
-
- return
+ return
+
+
-
-### Alignment
-
-Set different alignments of pagination.
-
-```jsx live
-<>
-
-
-
diff --git a/packages/react/src/pagination/demo/basic.md b/packages/react/src/pagination/demo/basic.md
deleted file mode 100644
index a6ddd838..00000000
--- a/packages/react/src/pagination/demo/basic.md
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
-### Basic
-
-Basic pagination.
-
-```jsx live
-
diff --git a/packages/react/src/pagination/demo/disabled.md b/packages/react/src/pagination/demo/disabled.md
deleted file mode 100644
index 4b337eb8..00000000
--- a/packages/react/src/pagination/demo/disabled.md
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
-### Disabled
-
-Disabled style.
-
-```jsx live
-<>
-
-
diff --git a/packages/react/src/pagination/demo/more.md b/packages/react/src/pagination/demo/more.md
deleted file mode 100644
index fc7dd1bb..00000000
--- a/packages/react/src/pagination/demo/more.md
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
-### More Pages
-
-More pages.
-
-```jsx live
-
diff --git a/packages/react/src/pagination/demo/size.md b/packages/react/src/pagination/demo/size.md
deleted file mode 100644
index 41c591b7..00000000
--- a/packages/react/src/pagination/demo/size.md
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
-### Size
-
-Two different sizes of pagination.
-
-```jsx live
-<>
-
-
diff --git a/packages/react/src/pagination/index.md b/packages/react/src/pagination/index.md
index 9fe3021e..db802fb7 100644
--- a/packages/react/src/pagination/index.md
+++ b/packages/react/src/pagination/index.md
@@ -1,13 +1,19 @@
-import Basic from './demo/basic.md'
-import More from './demo/more.md'
-import Size from './demo/size.md'
-import Disabled from './demo/disabled.md'
-import Align from './demo/align.md'
-import Controlled from './demo/controlled.md'
+import BasicDemo from './demo/Basic';
+import BasicSource from './demo/Basic.tsx?raw';
+import MoreDemo from './demo/More';
+import MoreSource from './demo/More.tsx?raw';
+import SizeDemo from './demo/Size';
+import SizeSource from './demo/Size.tsx?raw';
+import DisabledDemo from './demo/Disabled';
+import DisabledSource from './demo/Disabled.tsx?raw';
+import AlignDemo from './demo/Align';
+import AlignSource from './demo/Align.tsx?raw';
+import ControlledDemo from './demo/Controlled';
+import ControlledSource from './demo/Controlled.tsx?raw';
# Pagination
-It is used to separate long sets of data so that it is easier for a user to consume information.
+It is used to separate long sets of data so that it is easier for a user to consume information.
## Scenario
@@ -23,12 +29,66 @@ import { Pagination } from 'tiny-design';
## Examples
-
+
+
+
+### Basic
+
+Basic pagination.
+
+
+
+
+### Size
+
+Two different sizes of pagination.
+
+
+
+
+### Alignment
+
+Set different alignments of pagination.
+
+
+
+
+
+
+### More Pages
+
+More pages.
+
+
+
+
+### Disabled
+
+Disabled style.
+
+
+
+
+### Controlled
+
+Controlled page number.
+
+
+
+
## API
diff --git a/packages/react/src/pagination/index.zh_CN.md b/packages/react/src/pagination/index.zh_CN.md
index bda17c48..06652680 100644
--- a/packages/react/src/pagination/index.zh_CN.md
+++ b/packages/react/src/pagination/index.zh_CN.md
@@ -1,9 +1,15 @@
-import Basic from './demo/basic.md'
-import More from './demo/more.md'
-import Size from './demo/size.md'
-import Disabled from './demo/disabled.md'
-import Align from './demo/align.md'
-import Controlled from './demo/controlled.md'
+import BasicDemo from './demo/Basic';
+import BasicSource from './demo/Basic.tsx?raw';
+import MoreDemo from './demo/More';
+import MoreSource from './demo/More.tsx?raw';
+import SizeDemo from './demo/Size';
+import SizeSource from './demo/Size.tsx?raw';
+import DisabledDemo from './demo/Disabled';
+import DisabledSource from './demo/Disabled.tsx?raw';
+import AlignDemo from './demo/Align';
+import AlignSource from './demo/Align.tsx?raw';
+import ControlledDemo from './demo/Controlled';
+import ControlledSource from './demo/Controlled.tsx?raw';
# Pagination
@@ -23,12 +29,66 @@ import { Pagination } from 'tiny-design';
## 代码示例
-
+
+
+
+### Basic
+
+基本分页。
+
+
+
+
+### Size
+
+两种不同大小的分页。
+
+
+
+
+### Alignment
+
+设置分页的对齐方式。
+
+
+
+
+
+
+### More Pages
+
+更多分页。
+
+
+
+
+### Disabled
+
+禁用状态。
+
+
+
+
+### Controlled
+
+受控的页码。
+
+
+
+
## API
diff --git a/packages/react/src/pop-confirm/demo/Basic.tsx b/packages/react/src/pop-confirm/demo/Basic.tsx
new file mode 100644
index 00000000..e177f1ce
--- /dev/null
+++ b/packages/react/src/pop-confirm/demo/Basic.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { PopConfirm, Message } from '@tiny-design/react';
+
+export default function BasicDemo() {
+ return (
+ Message.info('You clicked Yes')}
+ >
+
+ Delete
+
+
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/pop-confirm/demo/Icon.tsx b/packages/react/src/pop-confirm/demo/Icon.tsx
new file mode 100644
index 00000000..95c1e7b4
--- /dev/null
+++ b/packages/react/src/pop-confirm/demo/Icon.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { PopConfirm, Message } from '@tiny-design/react';
+import { IconQuestionFill } from '@tiny-design/icons';
+
+export default function IconDemo() {
+ return (
+ Message.info('You clicked Yes')}
+ >
+
+ Delete
+
+
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/pop-confirm/demo/Placement.tsx b/packages/react/src/pop-confirm/demo/Placement.tsx
new file mode 100644
index 00000000..9f57967a
--- /dev/null
+++ b/packages/react/src/pop-confirm/demo/Placement.tsx
@@ -0,0 +1,169 @@
+import React from 'react';
+import { PopConfirm, Button, Message } from '@tiny-design/react';
+
+export default function PlacementDemo() {
+ const btnStyle = {
+ width: 80,
+ };
+
+ const confirm = () => {
+ Message.info('Clicked on Yes.');
+ };
+
+ const content = (
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/pop-confirm/demo/basic.md b/packages/react/src/pop-confirm/demo/basic.md
deleted file mode 100755
index 63d9abfb..00000000
--- a/packages/react/src/pop-confirm/demo/basic.md
+++ /dev/null
@@ -1,13 +0,0 @@
-
-
-### Basic
-
-The simplest usage.
-
-```jsx live
- Message.info('You clicked Yes')}>
- Delete
-
-```
-
-
diff --git a/packages/react/src/pop-confirm/demo/icon.md b/packages/react/src/pop-confirm/demo/icon.md
deleted file mode 100755
index a5630087..00000000
--- a/packages/react/src/pop-confirm/demo/icon.md
+++ /dev/null
@@ -1,16 +0,0 @@
-
-
-### Customised Icon
-
-Set `icon` props to customize the icon.
-
-```jsx live
-
diff --git a/packages/react/src/pop-confirm/demo/locale.md b/packages/react/src/pop-confirm/demo/locale.md
deleted file mode 100755
index a49832aa..00000000
--- a/packages/react/src/pop-confirm/demo/locale.md
+++ /dev/null
@@ -1,13 +0,0 @@
-
-
-### Locale text
-
-Set `confirmText` and `cancelText` props to customise button's labels.
-
-```jsx live
- Message.info('You clicked Yes')}>
- Delete
-
-```
-
-
diff --git a/packages/react/src/pop-confirm/demo/placement.md b/packages/react/src/pop-confirm/demo/placement.md
deleted file mode 100755
index d4171248..00000000
--- a/packages/react/src/pop-confirm/demo/placement.md
+++ /dev/null
@@ -1,116 +0,0 @@
-
-
-### Placement
-
-There are 12 placement options available.
-
-```jsx live
-() => {
- const btnStyle = {
- width: 80,
- };
-
- const confirm = () => {
- Message.info('Clicked on Yes.');
- }
-
- const content = (
-
-
-
- );
-}
-```
-
-
diff --git a/packages/react/src/pop-confirm/index.md b/packages/react/src/pop-confirm/index.md
index 27c1caa7..47df36aa 100755
--- a/packages/react/src/pop-confirm/index.md
+++ b/packages/react/src/pop-confirm/index.md
@@ -1,7 +1,11 @@
-import Basic from './demo/basic.md'
-import Placement from './demo/placement.md'
-import Locale from './demo/locale.md'
-import Icon from './demo/icon.md'
+import BasicDemo from './demo/Basic';
+import BasicSource from './demo/Basic.tsx?raw';
+import PlacementDemo from './demo/Placement';
+import PlacementSource from './demo/Placement.tsx?raw';
+import LocaleDemo from './demo/Locale';
+import LocaleSource from './demo/Locale.tsx?raw';
+import IconDemo from './demo/Icon';
+import IconSource from './demo/Icon.tsx?raw';
# PopConfirm
@@ -23,12 +27,44 @@ import { PopConfirm } from 'tiny-design';
-
+
+### Basic
+
+The simplest usage.
+
+
+
+
+### Placement
+
+There are 12 placement options available.
+
+
-
+
+### Locale text
+
+Set `confirmText` and `cancelText` props to customise button's labels.
+
+
+
+
+### Customised Icon
+
+Set `icon` props to customize the icon.
+
+
@@ -42,4 +78,4 @@ Inherits all [Popover](#/components/popover) props, plus:
| cancelText | text of the cancel button | string | `Cancel` |
| onConfirm | confirm callback | (e: MouseEvent) => void | - |
| onCancel | cancel callback | (e: MouseEvent) => void | - |
-| icon | custom icon | ReactNode | - |
+| icon | custom icon | ReactNode | - |
\ No newline at end of file
diff --git a/packages/react/src/pop-confirm/index.zh_CN.md b/packages/react/src/pop-confirm/index.zh_CN.md
index f6d145f7..62f78b80 100644
--- a/packages/react/src/pop-confirm/index.zh_CN.md
+++ b/packages/react/src/pop-confirm/index.zh_CN.md
@@ -1,7 +1,11 @@
-import Basic from './demo/basic.md'
-import Placement from './demo/placement.md'
-import Locale from './demo/locale.md'
-import Icon from './demo/icon.md'
+import BasicDemo from './demo/Basic';
+import BasicSource from './demo/Basic.tsx?raw';
+import PlacementDemo from './demo/Placement';
+import PlacementSource from './demo/Placement.tsx?raw';
+import LocaleDemo from './demo/Locale';
+import LocaleSource from './demo/Locale.tsx?raw';
+import IconDemo from './demo/Icon';
+import IconSource from './demo/Icon.tsx?raw';
# PopConfirm
@@ -23,12 +27,44 @@ import { PopConfirm } from 'tiny-design';
-
+
+### 基本用法
+
+最简单的用法。
+
+
+
+
+### 位置
+
+共有12个位置可选。
+
+
-
+
+### 自定义按钮文字
+
+设置 `confirmText` 和 `cancelText` 自定义按钮文字。
+
+
+
+
+### 自定义图标
+
+设置 `icon` 属性自定义图标。
+
+
@@ -42,4 +78,4 @@ import { PopConfirm } from 'tiny-design';
| cancelText | 取消按钮文本 | string | `Cancel` |
| onConfirm | 确认回调 | (e: MouseEvent) => void | - |
| onCancel | 取消回调 | (e: MouseEvent) => void | - |
-| icon | 自定义图标 | ReactNode | - |
+| icon | 自定义图标 | ReactNode | - |
\ No newline at end of file
diff --git a/packages/react/src/popover/demo/basic.md b/packages/react/src/popover/demo/Basic.tsx
old mode 100755
new mode 100644
similarity index 64%
rename from packages/react/src/popover/demo/basic.md
rename to packages/react/src/popover/demo/Basic.tsx
index fb2f1140..6964efff
--- a/packages/react/src/popover/demo/basic.md
+++ b/packages/react/src/popover/demo/Basic.tsx
@@ -1,11 +1,7 @@
-
+import React from 'react';
+import { Popover, Button } from '@tiny-design/react';
-### Basic
-
-The simplest usage.
-
-```jsx live
-() => {
+export default function BasicDemo() {
const content = (
-
+
);
-}
-```
-
-
+}
\ No newline at end of file
diff --git a/packages/react/src/popover/demo/Controlled.tsx b/packages/react/src/popover/demo/Controlled.tsx
new file mode 100644
index 00000000..8b6a3385
--- /dev/null
+++ b/packages/react/src/popover/demo/Controlled.tsx
@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import { Popover, Button } from '@tiny-design/react';
+
+export default function ControlledDemo() {
+ const [visible, setVisible] = useState(false);
+
+ const content = (
+
+ );
+
+ return (
+ setVisible(v)}
+ title="Popover Title"
+ content={content}
+ >
+
+
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/popover/demo/placement.md b/packages/react/src/popover/demo/Placement.tsx
old mode 100755
new mode 100644
similarity index 95%
rename from packages/react/src/popover/demo/placement.md
rename to packages/react/src/popover/demo/Placement.tsx
index ce59f7f9..2e5b1212
--- a/packages/react/src/popover/demo/placement.md
+++ b/packages/react/src/popover/demo/Placement.tsx
@@ -1,11 +1,7 @@
-
+import React from 'react';
+import { Popover, Button } from '@tiny-design/react';
-### Placement
-
-There are 12 placement options available.
-
-```jsx live
-() => {
+export default function PlacementDemo() {
const btnStyle = {
width: 80,
};
@@ -106,7 +102,4 @@ There are 12 placement options available.
);
-}
-```
-
-
+}
\ No newline at end of file
diff --git a/packages/react/src/popover/demo/trigger.md b/packages/react/src/popover/demo/Trigger.tsx
similarity index 84%
rename from packages/react/src/popover/demo/trigger.md
rename to packages/react/src/popover/demo/Trigger.tsx
index a082d06b..072c907f 100644
--- a/packages/react/src/popover/demo/trigger.md
+++ b/packages/react/src/popover/demo/Trigger.tsx
@@ -1,11 +1,7 @@
-
+import React from 'react';
+import { Popover, Button } from '@tiny-design/react';
-### Four ways to trigger
-
-Mouse to click, right click, focus and move in.
-
-```jsx live
-() => {
+export default function TriggerDemo() {
const content = (
-
-### Controlled dialog
-
-Use `visible` prop to control the display of the card.
-
-```jsx live
-() => {
- const [visible, setVisible] = React.useState(false);
-
- const content = (
-
- );
-
- return (
- <>
- setVisible(visible)}
- title="Popover Title"
- content={content}>
-
-
-
- );
-};
-```
-
-
diff --git a/packages/react/src/popover/index.md b/packages/react/src/popover/index.md
index c6db85ed..bdb72554 100755
--- a/packages/react/src/popover/index.md
+++ b/packages/react/src/popover/index.md
@@ -1,7 +1,11 @@
-import Basic from './demo/basic.md'
-import Placement from './demo/placement.md'
-import Trigger from './demo/trigger.md'
-import Controlled from './demo/controlled.md'
+import BasicDemo from './demo/Basic';
+import BasicSource from './demo/Basic.tsx?raw';
+import PlacementDemo from './demo/Placement';
+import PlacementSource from './demo/Placement.tsx?raw';
+import TriggerDemo from './demo/Trigger';
+import TriggerSource from './demo/Trigger.tsx?raw';
+import ControlledDemo from './demo/Controlled';
+import ControlledSource from './demo/Controlled.tsx?raw';
# Popover
@@ -23,12 +27,44 @@ import { Popover } from 'tiny-design';
-
+
+### Basic
+
+The simplest usage.
+
+
+
+
+### Placement
+
+There are 12 placement options available.
+
+
-
+
+### Four ways to trigger
+
+Mouse to click, right click, focus and move in.
+
+
+
+
+### Controlled dialog
+
+Use `visible` prop to control the display of the card.
+
+
@@ -50,4 +86,4 @@ import { Popover } from 'tiny-design';
| mouseLeaveDelay | delay before hiding on mouse leave (seconds) | number | - |
| disabled | whether disabled | boolean | false |
| style | style object of container | CSSProperties | - |
-| className | className of container | string | - |
+| className | className of container | string | - |
\ No newline at end of file
diff --git a/packages/react/src/popover/index.zh_CN.md b/packages/react/src/popover/index.zh_CN.md
index 678917d0..f7a280a7 100644
--- a/packages/react/src/popover/index.zh_CN.md
+++ b/packages/react/src/popover/index.zh_CN.md
@@ -1,7 +1,11 @@
-import Basic from './demo/basic.md'
-import Placement from './demo/placement.md'
-import Trigger from './demo/trigger.md'
-import Controlled from './demo/controlled.md'
+import BasicDemo from './demo/Basic';
+import BasicSource from './demo/Basic.tsx?raw';
+import PlacementDemo from './demo/Placement';
+import PlacementSource from './demo/Placement.tsx?raw';
+import TriggerDemo from './demo/Trigger';
+import TriggerSource from './demo/Trigger.tsx?raw';
+import ControlledDemo from './demo/Controlled';
+import ControlledSource from './demo/Controlled.tsx?raw';
# Popover
@@ -23,12 +27,44 @@ import { Popover } from 'tiny-design';
-
+
+### 基础用法
+
+最简单的用法。
+
+
+
+
+### 位置
+
+有12个不同的弹出位置。
+
+
-
+
+### 触发方式
+
+四种触发方式：鼠标点击、右键菜单、获得焦点、悬停。
+
+
+
+
+### 受控模式
+
+使用 `visible` 属性来控制弹出层的显示状态。
+
+
@@ -50,4 +86,4 @@ import { Popover } from 'tiny-design';
| mouseLeaveDelay | 鼠标离开后延迟隐藏的时间（秒） | number | - |
| disabled | 是否禁用 | boolean | false |
| style | 容器样式对象 | CSSProperties | - |
-| className | 容器的 className | string | - |
+| className | 容器的 className | string | - |
\ No newline at end of file
diff --git a/packages/react/src/progress/demo/Active.tsx b/packages/react/src/progress/demo/Active.tsx
new file mode 100644
index 00000000..fb0a1e6a
--- /dev/null
+++ b/packages/react/src/progress/demo/Active.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { Progress } from '@tiny-design/react';
+
+export default function ActiveDemo() {
+ const { Bar } = Progress;
+
+ return (
+
-
-### Active Background Style
-
-Set `backgroundType` to display different bar backgrounds.
-
-```jsx live
-() => {
- const { Bar } = Progress;
-
- return (
-
diff --git a/packages/react/src/progress/demo/custom-text.md b/packages/react/src/progress/demo/custom-text.md
deleted file mode 100644
index 49ac6a5b..00000000
--- a/packages/react/src/progress/demo/custom-text.md
+++ /dev/null
@@ -1,48 +0,0 @@
-
-
-### Custom text format
-
-Set a custom text by setting the `format` prop.
-
-```jsx live
-() => {
- const { Bar, Circle } = Progress;
- const { Group } = Button;
-
- let label = '';
-
- const _barText = (val) => {
-
- if (val < 100)
- label = `${val} Days`;
- else
- label = 'Done';
-
- return (
- {label}
- );
- };
-
- const Wrapper = () => {
- const [percent, setPercent] = React.useState(90);
-
- return (
-
diff --git a/packages/react/src/progress/demo/dynamic.md b/packages/react/src/progress/demo/dynamic.md
deleted file mode 100644
index af266bc6..00000000
--- a/packages/react/src/progress/demo/dynamic.md
+++ /dev/null
@@ -1,34 +0,0 @@
-
-
-### Dynamic progress
-
-Control the value.
-
-```jsx live
-() => {
- const { Bar, Circle } = Progress;
- const { Group } = Button;
-
- const Wrapper = () => {
- const [percent, setPercent] = React.useState(0);
-
- return (
-
diff --git a/packages/react/src/progress/demo/internal-text.md b/packages/react/src/progress/demo/internal-text.md
deleted file mode 100644
index 6e5d3c17..00000000
--- a/packages/react/src/progress/demo/internal-text.md
+++ /dev/null
@@ -1,23 +0,0 @@
-
-
-### Internal Text
-
-Set `innerText` to display the text inside the bar.
-
-```jsx live
-() => {
- const { Bar } = Progress;
-
- return (
-
diff --git a/packages/react/src/progress/demo/linear-gradient.md b/packages/react/src/progress/demo/linear-gradient.md
deleted file mode 100644
index 2444abed..00000000
--- a/packages/react/src/progress/demo/linear-gradient.md
+++ /dev/null
@@ -1,22 +0,0 @@
-
-
-### Custom linear gradient
-
-A package of `linear-gradient`. Pass a color array to set the `strokeColor`.
-
-> More linear gradient color presets, please visit [Awesome Gradient](https://wangdicoder.github.io/awesome-gradient/).
-
-```jsx live
-() => {
- const { Bar } = Progress;
-
- return (
-
diff --git a/packages/react/src/progress/demo/progress-bar.md b/packages/react/src/progress/demo/progress-bar.md
deleted file mode 100644
index d575c190..00000000
--- a/packages/react/src/progress/demo/progress-bar.md
+++ /dev/null
@@ -1,24 +0,0 @@
-
-
-### Progress bar
-
-A standard progress bar.
-
-```jsx live
-() => {
- const { Bar } = Progress;
-
- return (
-
diff --git a/packages/react/src/progress/demo/progress-circle.md b/packages/react/src/progress/demo/progress-circle.md
deleted file mode 100644
index 1865c9b5..00000000
--- a/packages/react/src/progress/demo/progress-circle.md
+++ /dev/null
@@ -1,28 +0,0 @@
-
-
-### Progress circular
-
-A circular progress.
-
-```jsx live
-() => {
- const { Circle } = Progress;
-
- const style = {
- marginRight: '10px',
- };
-
- return (
-
diff --git a/packages/react/src/progress/demo/reverse.md b/packages/react/src/progress/demo/reverse.md
deleted file mode 100644
index ebdff4b7..00000000
--- a/packages/react/src/progress/demo/reverse.md
+++ /dev/null
@@ -1,38 +0,0 @@
-
-
-### Reverse direction
-
-Set `reverse` to control the direction.
-
-> This is only for **Circle** progress.
-
-```jsx live
-() => {
- const { Bar, Circle } = Progress;
- const { Group } = Button;
-
- const Wrapper = () => {
- const [percent, setPercent] = React.useState(0);
-
- return (
-
diff --git a/packages/react/src/progress/demo/square-linecaps.md b/packages/react/src/progress/demo/square-linecaps.md
deleted file mode 100644
index 9cf226ed..00000000
--- a/packages/react/src/progress/demo/square-linecaps.md
+++ /dev/null
@@ -1,20 +0,0 @@
-
-
-### Square linecaps
-
-By setting `strokeLinecap="square"`, you can change the linecaps from round to square.
-
-```jsx live
-() => {
- const { Bar, Circle } = Progress;
-
- return (
-
diff --git a/packages/react/src/progress/index.md b/packages/react/src/progress/index.md
index 974bb1d6..1da39ab9 100644
--- a/packages/react/src/progress/index.md
+++ b/packages/react/src/progress/index.md
@@ -1,12 +1,21 @@
-import Active from './demo/active.md'
-import CustomText from './demo/custom-text.md'
-import Dynamic from './demo/dynamic.md'
-import InternalText from './demo/internal-text.md'
-import LinearGradient from './demo/linear-gradient.md'
-import ProgressBar from './demo/progress-bar.md'
-import ProgressCircle from './demo/progress-circle.md'
-import Reverse from './demo/reverse.md'
-import SquareLinecaps from './demo/square-linecaps.md'
+import ProgressBarDemo from './demo/ProgressBar';
+import ProgressBarSource from './demo/ProgressBar.tsx?raw';
+import ProgressCircleDemo from './demo/ProgressCircle';
+import ProgressCircleSource from './demo/ProgressCircle.tsx?raw';
+import InternalTextDemo from './demo/InternalText';
+import InternalTextSource from './demo/InternalText.tsx?raw';
+import ActiveDemo from './demo/Active';
+import ActiveSource from './demo/Active.tsx?raw';
+import LinearGradientDemo from './demo/LinearGradient';
+import LinearGradientSource from './demo/LinearGradient.tsx?raw';
+import DynamicDemo from './demo/Dynamic';
+import DynamicSource from './demo/Dynamic.tsx?raw';
+import CustomTextDemo from './demo/CustomText';
+import CustomTextSource from './demo/CustomText.tsx?raw';
+import ReverseDemo from './demo/Reverse';
+import ReverseSource from './demo/Reverse.tsx?raw';
+import SquareLinecapsDemo from './demo/SquareLinecaps';
+import SquareLinecapsSource from './demo/SquareLinecaps.tsx?raw';
# Progress
@@ -29,17 +38,93 @@ const { Bar, Circle } = Progress;
-
+
+### Progress bar
+
+A standard progress bar.
+
+
+
+
+### Progress circular
+
+A circular progress.
+
+
+
+
+### Internal Text
+
+Set `innerText` to display the text inside the bar.
+
+
+
+
+### Active Background Style
+
+Set `backgroundType` to display different bar backgrounds.
+
+
+
+
+### Custom linear gradient
+
+A package of `linear-gradient`. Pass a color array to set the `strokeColor`.
+
+> More linear gradient color presets, please visit [Awesome Gradient](https://wangdicoder.github.io/awesome-gradient/).
+
+
-
+
+### Dynamic progress
+
+Control the value.
+
+
+
+
+### Custom text format
+
+Set a custom text by setting the `format` prop.
+
+
+
+
+### Reverse direction
+
+Set `reverse` to control the direction.
+
+> This is only for **Circle** progress.
+
+
+
+
+### Square linecaps
+
+By setting `strokeLinecap="square"`, you can change the linecaps from round to square.
+
+
@@ -50,5 +135,4 @@ const { Bar, Circle } = Progress;
| size | selection size | enum: `sm` | `md` | `lg` | `md` |
| disabled | disable to select | boolean | false |
| style | style object of container object | CSSProperties | - |
-| className | className of container | string | - |
-
+| className | className of container | string | - |
\ No newline at end of file
diff --git a/packages/react/src/progress/index.zh_CN.md b/packages/react/src/progress/index.zh_CN.md
index 25f88853..f252e11e 100644
--- a/packages/react/src/progress/index.zh_CN.md
+++ b/packages/react/src/progress/index.zh_CN.md
@@ -1,12 +1,21 @@
-import Active from './demo/active.md'
-import CustomText from './demo/custom-text.md'
-import Dynamic from './demo/dynamic.md'
-import InternalText from './demo/internal-text.md'
-import LinearGradient from './demo/linear-gradient.md'
-import ProgressBar from './demo/progress-bar.md'
-import ProgressCircle from './demo/progress-circle.md'
-import Reverse from './demo/reverse.md'
-import SquareLinecaps from './demo/square-linecaps.md'
+import ProgressBarDemo from './demo/ProgressBar';
+import ProgressBarSource from './demo/ProgressBar.tsx?raw';
+import ProgressCircleDemo from './demo/ProgressCircle';
+import ProgressCircleSource from './demo/ProgressCircle.tsx?raw';
+import InternalTextDemo from './demo/InternalText';
+import InternalTextSource from './demo/InternalText.tsx?raw';
+import ActiveDemo from './demo/Active';
+import ActiveSource from './demo/Active.tsx?raw';
+import LinearGradientDemo from './demo/LinearGradient';
+import LinearGradientSource from './demo/LinearGradient.tsx?raw';
+import DynamicDemo from './demo/Dynamic';
+import DynamicSource from './demo/Dynamic.tsx?raw';
+import CustomTextDemo from './demo/CustomText';
+import CustomTextSource from './demo/CustomText.tsx?raw';
+import ReverseDemo from './demo/Reverse';
+import ReverseSource from './demo/Reverse.tsx?raw';
+import SquareLinecapsDemo from './demo/SquareLinecaps';
+import SquareLinecapsSource from './demo/SquareLinecaps.tsx?raw';
# Progress
@@ -30,17 +39,93 @@ const { Bar, Circle } = Progress;
-
+
+### 进度条
+
+标准的进度条。
+
+
+
+
+### 圆形进度
+
+圆形进度。
+
+
+
+
+### 内部文本
+
+设置 `innerText` 来在进度条内部显示文本。
+
+
+
+
+### 动态背景样式
+
+设置 `backgroundType` 来显示不同的进度条背景。
+
+
+
+
+### 自定义线性渐变
+
+使用 `linear-gradient`。传入颜色数组到 `strokeColor` 属性。
+
+> 更多渐变颜色预设，请访问 [Awesome Gradient](https://wangdicoder.github.io/awesome-gradient/)。
+
+
-
+
+### 动态进度
+
+控制进度值。
+
+
+
+
+### 自定义文本格式
+
+通过设置 `format` 属性来自定义文本。
+
+
+
+
+### 反向
+
+设置 `reverse` 来控制方向。
+
+> 仅适用于 **Circle** 圆形进度。
+
+
+
+
+### 方头端点
+
+通过设置 `strokeLinecap="square"`，可以将端点从圆头改为方头。
+
+
@@ -51,4 +136,4 @@ const { Bar, Circle } = Progress;
| size | 选择尺寸 | enum: `sm` | `md` | `lg` | `md` |
| disabled | 是否禁用选择 | boolean | false |
| style | 容器样式对象 | CSSProperties | - |
-| className | 容器的 className | string | - |
+| className | 容器的 className | string | - |
\ No newline at end of file
diff --git a/packages/react/src/radio/demo/Basic.tsx b/packages/react/src/radio/demo/Basic.tsx
new file mode 100644
index 00000000..a6301995
--- /dev/null
+++ b/packages/react/src/radio/demo/Basic.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { Radio } from '@tiny-design/react';
+
+export default function BasicDemo() {
+ return I'm a radio ;
+}
\ No newline at end of file
diff --git a/packages/react/src/radio/demo/Disabled.tsx b/packages/react/src/radio/demo/Disabled.tsx
new file mode 100644
index 00000000..b57769e9
--- /dev/null
+++ b/packages/react/src/radio/demo/Disabled.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Radio, Button } from '@tiny-design/react';
+
+const { Group } = Radio;
+
+export default function DisabledDemo() {
+ const [value, setValue] = React.useState('a');
+ const [disabled, setDisabled] = React.useState(true);
+
+ return (
+ <>
+ setValue(val)}
+ disabled={disabled}
+ >
+ A
+ B
+
+ C
+
+ D
+
+
+
+ + + ); +} \ No newline at end of file diff --git a/packages/react/src/radio/demo/Group.tsx b/packages/react/src/radio/demo/Group.tsx new file mode 100644 index 00000000..53ed21e1 --- /dev/null +++ b/packages/react/src/radio/demo/Group.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import { Radio } from '@tiny-design/react'; + +const { Group } = Radio; + +export default function GroupDemo() { + const [value, setValue] = React.useState('a'); + + return ( + <> + setValue(val)}
+ >
+ A
+ B
+ C
+ D
+
+
+
+ +
+ A
+ B
+ C
+ D
+
+
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/radio/demo/basic.md b/packages/react/src/radio/demo/basic.md
deleted file mode 100644
index 3d452205..00000000
--- a/packages/react/src/radio/demo/basic.md
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
-### Basic
-
-The simplest use.
-
-```jsx live
-I'm a radio
-```
-
-
diff --git a/packages/react/src/radio/demo/disabled.md b/packages/react/src/radio/demo/disabled.md
deleted file mode 100644
index 1ccd8c6e..00000000
--- a/packages/react/src/radio/demo/disabled.md
+++ /dev/null
@@ -1,38 +0,0 @@
-
-
-### Disabled
-
-Disabled state of Radio.
-
-```jsx live
-() => {
- const { Group } = Radio;
-
- const Wrapper = () => {
- const [value, setValue] = React.useState('a');
- const [disabled, setDisabled] = React.useState(true);
-
- return(
- <>
- {
- setValue(val)
- }} disabled={disabled}>
- A
- B
- C
- D
-
-
-
- - - ); - }; - - return ( -
diff --git a/packages/react/src/radio/demo/group.md b/packages/react/src/radio/demo/group.md
deleted file mode 100644
index f1ddc89b..00000000
--- a/packages/react/src/radio/demo/group.md
+++ /dev/null
@@ -1,43 +0,0 @@
-
-
-### Radio Group
-
-A group of radio components.
-
-```jsx live
-() => {
- const { Group } = Radio;
-
- const Wrapper = () => {
- const [value, setValue] = React.useState('a');
-
- return(
- <>
- setValue(val)}>
- A
- B
- C
- D
-
-
-
- -
- A
- B
- C
- D
-
-
- );
- };
-
- return (
-
diff --git a/packages/react/src/radio/index.md b/packages/react/src/radio/index.md
index 0ebf7f6c..fc10416a 100644
--- a/packages/react/src/radio/index.md
+++ b/packages/react/src/radio/index.md
@@ -1,6 +1,9 @@
-import Basic from './demo/basic.md'
-import Disabled from './demo/disabled.md'
-import Group from './demo/group.md'
+import BasicDemo from './demo/Basic';
+import BasicSource from './demo/Basic.tsx?raw';
+import DisabledDemo from './demo/Disabled';
+import DisabledSource from './demo/Disabled.tsx?raw';
+import GroupDemo from './demo/Group';
+import GroupSource from './demo/Group.tsx?raw';
# Radio
@@ -23,11 +26,35 @@ const { Group } = Radio;
-
+
+### Basic
+
+The simplest use.
+
+
+
+
+### Disabled
+
+Disabled state of Radio.
+
+
-
+
+### Radio Group
+
+A group of radio components.
+
+
@@ -54,4 +81,4 @@ const { Group } = Radio;
| defaultValue | initial selected value | string | number | - |
| value | controlled selected value | string | number | - |
| onChange | callback when selection changes | (value: string | number) => void | - |
-| disabled | whether disabled all radios | boolean | false |
+| disabled | whether disabled all radios | boolean | false |
\ No newline at end of file
diff --git a/packages/react/src/radio/index.zh_CN.md b/packages/react/src/radio/index.zh_CN.md
index 82a02fc4..2ed10eca 100644
--- a/packages/react/src/radio/index.zh_CN.md
+++ b/packages/react/src/radio/index.zh_CN.md
@@ -1,6 +1,9 @@
-import Basic from './demo/basic.md'
-import Disabled from './demo/disabled.md'
-import Group from './demo/group.md'
+import BasicDemo from './demo/Basic';
+import BasicSource from './demo/Basic.tsx?raw';
+import DisabledDemo from './demo/Disabled';
+import DisabledSource from './demo/Disabled.tsx?raw';
+import GroupDemo from './demo/Group';
+import GroupSource from './demo/Group.tsx?raw';
# Radio
@@ -23,11 +26,35 @@ const { Group } = Radio;
-
+
+### 基本用法
+
+最简单的用法。
+
+
+
+
+### 禁用状态
+
+Radio 的禁用状态。
+
+
-
+
+### 单选组合
+
+一组单选按钮。
+
+
@@ -54,4 +81,4 @@ const { Group } = Radio;
| defaultValue | 初始选中值 | string | number | - |
| value | 受控选中值 | string | number | - |
| onChange | 选择项变化时的回调 | (value: string | number) => void | - |
-| disabled | 是否禁用所有单选按钮 | boolean | false |
+| disabled | 是否禁用所有单选按钮 | boolean | false |
\ No newline at end of file
diff --git a/packages/react/src/rate/demo/Basic.tsx b/packages/react/src/rate/demo/Basic.tsx
new file mode 100644
index 00000000..c3fbd488
--- /dev/null
+++ b/packages/react/src/rate/demo/Basic.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { Rate } from '@tiny-design/react';
+
+export default function BasicDemo() {
+ return
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/rate/demo/Disabled.tsx b/packages/react/src/rate/demo/Disabled.tsx
new file mode 100644
index 00000000..dc9ec1a1
--- /dev/null
+++ b/packages/react/src/rate/demo/Disabled.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { Rate } from '@tiny-design/react';
+
+export default function DisabledDemo() {
+ return
-
-### Basic
-
-The simplest usage.
-
-```jsx live
-
diff --git a/packages/react/src/rate/demo/character.md b/packages/react/src/rate/demo/character.md
deleted file mode 100755
index 117cbb55..00000000
--- a/packages/react/src/rate/demo/character.md
+++ /dev/null
@@ -1,19 +0,0 @@
-
-
-### Other Character
-
-Replace the default star to other character like alphabet, digit, iconfont or even other language word.
-
-```jsx live
-<>
- } half color="#f30"/>
-
-
-
-
diff --git a/packages/react/src/rate/demo/clearable.md b/packages/react/src/rate/demo/clearable.md
deleted file mode 100755
index 17a973d5..00000000
--- a/packages/react/src/rate/demo/clearable.md
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
-### Clear star
-
-Support set allow to clear star when click again.
-
-```jsx live
-<>
-
-
diff --git a/packages/react/src/rate/demo/disabled.md b/packages/react/src/rate/demo/disabled.md
deleted file mode 100755
index f0184619..00000000
--- a/packages/react/src/rate/demo/disabled.md
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
-### Read only
-
-Read only, can't be interactive.
-
-```jsx live
-
diff --git a/packages/react/src/rate/demo/half.md b/packages/react/src/rate/demo/half.md
deleted file mode 100755
index 26bf8615..00000000
--- a/packages/react/src/rate/demo/half.md
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
-### Half star
-
-Support select half star.
-
-```jsx live
-
diff --git a/packages/react/src/rate/index.md b/packages/react/src/rate/index.md
index 852ae4fb..7d88aeac 100755
--- a/packages/react/src/rate/index.md
+++ b/packages/react/src/rate/index.md
@@ -1,8 +1,13 @@
-import Basic from './demo/basic.md'
-import Character from './demo/character.md'
-import Clearable from './demo/clearable.md'
-import Disabled from './demo/disabled.md'
-import Half from './demo/half.md'
+import BasicDemo from './demo/Basic';
+import BasicSource from './demo/Basic.tsx?raw';
+import CharacterDemo from './demo/Character';
+import CharacterSource from './demo/Character.tsx?raw';
+import ClearableDemo from './demo/Clearable';
+import ClearableSource from './demo/Clearable.tsx?raw';
+import DisabledDemo from './demo/Disabled';
+import DisabledSource from './demo/Disabled.tsx?raw';
+import HalfDemo from './demo/Half';
+import HalfSource from './demo/Half.tsx?raw';
# Rate
@@ -24,13 +29,53 @@ import { Rate } from 'tiny-design';
-
+
+### Basic
+
+The simplest usage.
+
+
+
+
+### Half star
+
+Support select half star.
+
+
+
+
+### Clear star
+
+Support set allow to clear star when click again.
+
+
-
+
+### Read only
+
+Read only, can't be interactive.
+
+
+
+
+### Other Character
+
+Replace the default star to other character like alphabet, digit, iconfont or even other language word.
+
+
diff --git a/packages/react/src/rate/index.zh_CN.md b/packages/react/src/rate/index.zh_CN.md
index d0c904ce..d1409a95 100644
--- a/packages/react/src/rate/index.zh_CN.md
+++ b/packages/react/src/rate/index.zh_CN.md
@@ -1,8 +1,13 @@
-import Basic from './demo/basic.md'
-import Character from './demo/character.md'
-import Clearable from './demo/clearable.md'
-import Disabled from './demo/disabled.md'
-import Half from './demo/half.md'
+import BasicDemo from './demo/Basic';
+import BasicSource from './demo/Basic.tsx?raw';
+import CharacterDemo from './demo/Character';
+import CharacterSource from './demo/Character.tsx?raw';
+import ClearableDemo from './demo/Clearable';
+import ClearableSource from './demo/Clearable.tsx?raw';
+import DisabledDemo from './demo/Disabled';
+import DisabledSource from './demo/Disabled.tsx?raw';
+import HalfDemo from './demo/Half';
+import HalfSource from './demo/Half.tsx?raw';
# Rate
@@ -24,13 +29,53 @@ import { Rate } from 'tiny-design';
-
+
+### 基本用法
+
+最简单的用法。
+
+
+
+
+### 半星
+
+支持选择半星。
+
+
+
+
+### 清除星标
+
+支持设置允许再次点击清除星标。
+
+
-
+
+### 只读
+
+只读状态，不可交互。
+
+
+
+
+### 其他字符
+
+可以用其他字符如字母、数字、图标或其他语言的文字替换默认的五角星。
+
+
diff --git a/packages/react/src/result/demo/Error.tsx b/packages/react/src/result/demo/Error.tsx
new file mode 100644
index 00000000..4126d54a
--- /dev/null
+++ b/packages/react/src/result/demo/Error.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Result, Button } from '@tiny-design/react';
+
+export default function ErrorDemo() {
+ return (
+
+ Go Console
+
+ ]}
+ />
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/result/demo/Icon.tsx b/packages/react/src/result/demo/Icon.tsx
new file mode 100644
index 00000000..83208bfd
--- /dev/null
+++ b/packages/react/src/result/demo/Icon.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Result, Button } from '@tiny-design/react';
+
+export default function IconDemo() {
+ return (
+ 🎉 }
+ extra={[
+
+ ]}
+ />
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/result/demo/Info.tsx b/packages/react/src/result/demo/Info.tsx
new file mode 100644
index 00000000..303ca382
--- /dev/null
+++ b/packages/react/src/result/demo/Info.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Result, Button } from '@tiny-design/react';
+
+export default function InfoDemo() {
+ return (
+
+ Go Console
+
+ ]}
+ />
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/result/demo/Loading.tsx b/packages/react/src/result/demo/Loading.tsx
new file mode 100644
index 00000000..deb1deab
--- /dev/null
+++ b/packages/react/src/result/demo/Loading.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Result, Button } from '@tiny-design/react';
+
+export default function LoadingDemo() {
+ return (
+
+ Go Console
+
+ ]}
+ />
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/result/demo/Success.tsx b/packages/react/src/result/demo/Success.tsx
new file mode 100644
index 00000000..a6b2083e
--- /dev/null
+++ b/packages/react/src/result/demo/Success.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Result, Button, Flex } from '@tiny-design/react';
+
+export default function SuccessDemo() {
+ return (
+
+
+
+
+ }
+ />
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/result/demo/Warning.tsx b/packages/react/src/result/demo/Warning.tsx
new file mode 100644
index 00000000..4e35402e
--- /dev/null
+++ b/packages/react/src/result/demo/Warning.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Result, Button } from '@tiny-design/react';
+
+export default function WarningDemo() {
+ return (
+
+ Go Console
+
+ ]}
+ />
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/result/demo/error.md b/packages/react/src/result/demo/error.md
deleted file mode 100644
index f03a619e..00000000
--- a/packages/react/src/result/demo/error.md
+++ /dev/null
@@ -1,20 +0,0 @@
-
-
-### Error
-
-A complicated error feedback.
-
-```jsx live
-
- Go Console
-
- ]}
-/>
-```
-
-
diff --git a/packages/react/src/result/demo/icon.md b/packages/react/src/result/demo/icon.md
deleted file mode 100644
index e9769c78..00000000
--- a/packages/react/src/result/demo/icon.md
+++ /dev/null
@@ -1,20 +0,0 @@
-
-
-### Customised icon.
-
-Pass `icon` attribute to set the icon.
-
-```jsx live
-}
- extra={[
-
- ]}
-/>
-```
-
-
diff --git a/packages/react/src/result/demo/info.md b/packages/react/src/result/demo/info.md
deleted file mode 100644
index 0a594c48..00000000
--- a/packages/react/src/result/demo/info.md
+++ /dev/null
@@ -1,19 +0,0 @@
-
-
-### Info
-
-Show processing results.
-
-```jsx live
-
- Go Console
-
- ]}
-/>
-```
-
-
diff --git a/packages/react/src/result/demo/loading.md b/packages/react/src/result/demo/loading.md
deleted file mode 100644
index b9ec3e0d..00000000
--- a/packages/react/src/result/demo/loading.md
+++ /dev/null
@@ -1,19 +0,0 @@
-
-
-### Loading
-
-The result is in a loading status.
-
-```jsx live
-
- Go Console
-
- ]}
-/>
-```
-
-
diff --git a/packages/react/src/result/demo/success.md b/packages/react/src/result/demo/success.md
deleted file mode 100644
index 554c20bb..00000000
--- a/packages/react/src/result/demo/success.md
+++ /dev/null
@@ -1,23 +0,0 @@
-
-
-### Success
-
-Show successful results.
-
-```jsx live
-
-
-
-
- }
-/>
-```
-
-
diff --git a/packages/react/src/result/demo/warning.md b/packages/react/src/result/demo/warning.md
deleted file mode 100644
index f3b40506..00000000
--- a/packages/react/src/result/demo/warning.md
+++ /dev/null
@@ -1,19 +0,0 @@
-
-
-### Warning
-
-The result of the warning.
-
-```jsx live
-
- Go Console
-
- ]}
-/>
-```
-
-
diff --git a/packages/react/src/result/index.md b/packages/react/src/result/index.md
index 50a62753..1f2474ca 100644
--- a/packages/react/src/result/index.md
+++ b/packages/react/src/result/index.md
@@ -1,9 +1,15 @@
-import Success from './demo/success.md'
-import Loading from './demo/loading.md'
-import Error from './demo/error.md'
-import Warning from './demo/warning.md'
-import Info from './demo/info.md'
-import Icon from './demo/icon.md'
+import SuccessDemo from './demo/Success';
+import SuccessSource from './demo/Success.tsx?raw';
+import LoadingDemo from './demo/Loading';
+import LoadingSource from './demo/Loading.tsx?raw';
+import ErrorDemo from './demo/Error';
+import ErrorSource from './demo/Error.tsx?raw';
+import WarningDemo from './demo/Warning';
+import WarningSource from './demo/Warning.tsx?raw';
+import InfoDemo from './demo/Info';
+import InfoSource from './demo/Info.tsx?raw';
+import IconDemo from './demo/Icon';
+import IconSource from './demo/Icon.tsx?raw';
# Result
@@ -15,12 +21,66 @@ Use when important operations need to inform the user to process the results and
## Examples
-
+
+
+
+### Success
+
+Show successful results.
+
+
+
+
+### Loading
+
+The result is in a loading status.
+
+
+
+
+### Error
+
+A complicated error feedback.
+
+
+
+
+
+
+### Warning
+
+The result of the warning.
+
+
+
+
+### Info
+
+Show processing results.
+
+
+
+
+### Customised icon.
+
+Pass `icon` attribute to set the icon.
+
+
+
+
## API
@@ -32,4 +92,4 @@ Use when important operations need to inform the user to process the results and
| icon | customised icon | ReactNode | - |
| extra | operating area | ReactNode | - |
| style | style object of container object | CSSProperties | - |
-| className | className of container | string | - |
+| className | className of container | string | - |
\ No newline at end of file
diff --git a/packages/react/src/result/index.zh_CN.md b/packages/react/src/result/index.zh_CN.md
index bde54bd8..9b29e4ab 100644
--- a/packages/react/src/result/index.zh_CN.md
+++ b/packages/react/src/result/index.zh_CN.md
@@ -1,9 +1,15 @@
-import Success from './demo/success.md'
-import Loading from './demo/loading.md'
-import Error from './demo/error.md'
-import Warning from './demo/warning.md'
-import Info from './demo/info.md'
-import Icon from './demo/icon.md'
+import SuccessDemo from './demo/Success';
+import SuccessSource from './demo/Success.tsx?raw';
+import LoadingDemo from './demo/Loading';
+import LoadingSource from './demo/Loading.tsx?raw';
+import ErrorDemo from './demo/Error';
+import ErrorSource from './demo/Error.tsx?raw';
+import WarningDemo from './demo/Warning';
+import WarningSource from './demo/Warning.tsx?raw';
+import InfoDemo from './demo/Info';
+import InfoSource from './demo/Info.tsx?raw';
+import IconDemo from './demo/Icon';
+import IconSource from './demo/Icon.tsx?raw';
# Result
@@ -15,12 +21,66 @@ import Icon from './demo/icon.md'
## 代码示例
-
+
+
+
+### 成功
+
+显示处理成功的反馈结果。
+
+
+
+
+### 加载中
+
+结果显示加载状态。
+
+
+
+
+### 失败
+
+复杂的错误反馈。
+
+
+
+
+
+
+### 警告
+
+警告反馈结果。
+
+
+
+
+### 提示
+
+显示处理中的信息提示。
+
+
+
+
+### 自定义图标
+
+通过 `icon` 属性设置图标。
+
+
+
+
## API
@@ -32,4 +92,4 @@ import Icon from './demo/icon.md'
| icon | 自定义图标 | ReactNode | - |
| extra | 操作区域 | ReactNode | - |
| style | 容器的样式对象 | CSSProperties | - |
-| className | 容器的类名 | string | - |
+| className | 容器的类名 | string | - |
\ No newline at end of file
diff --git a/packages/react/src/scroll-indicator/demo/Basic.tsx b/packages/react/src/scroll-indicator/demo/Basic.tsx
new file mode 100644
index 00000000..f7eb8280
--- /dev/null
+++ b/packages/react/src/scroll-indicator/demo/Basic.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { ScrollIndicator } from '@tiny-design/react';
+
+export default function BasicDemo() {
+ return (
+ <>
+
+import React from 'react';
+import { ScrollIndicator } from '@tiny-design/react';
-### Container to scroll
-
-Set a target, which is listen to scroll event of target element (default is `window`).
-
-```jsx live
-() => {
- const targerRef = React.useRef(null);
+export default function TargetDemo() {
+ const targetRef = React.useRef(null);
return (
<>
- targerRef && targerRef.current}/>
-
+}
\ No newline at end of file
diff --git a/packages/react/src/select/demo/custom.md b/packages/react/src/select/demo/Custom.tsx
similarity index 82%
rename from packages/react/src/select/demo/custom.md
rename to packages/react/src/select/demo/Custom.tsx
index 4dffc745..cc51c3c0 100644
--- a/packages/react/src/select/demo/custom.md
+++ b/packages/react/src/select/demo/Custom.tsx
@@ -1,11 +1,7 @@
-
+import React from 'react';
+import { Select } from '@tiny-design/react';
-### Custom Rendering & Loading
-
-Use the `options` prop for data-driven rendering, `optionRender` for custom option content, and `loading` for async states.
-
-```jsx live
-() => {
+export default function CustomDemo() {
const [loading, setLoading] = React.useState(false);
const [options, setOptions] = React.useState([
{ value: 'react', label: 'React' },
@@ -41,7 +37,4 @@ Use the `options` prop for data-driven rendering, `optionRender` for custom opti
/>
);
-}
-```
-
-
+}
\ No newline at end of file
diff --git a/packages/react/src/select/demo/groups.md b/packages/react/src/select/demo/Groups.tsx
similarity index 87%
rename from packages/react/src/select/demo/groups.md
rename to packages/react/src/select/demo/Groups.tsx
index 54edb6ba..036c23c0 100644
--- a/packages/react/src/select/demo/groups.md
+++ b/packages/react/src/select/demo/Groups.tsx
@@ -1,11 +1,7 @@
-
+import React from 'react';
+import { Select } from '@tiny-design/react';
-### Option Groups
-
-Use `OptGroup` to group options together.
-
-```jsx live
-() => {
+export default function GroupsDemo() {
const [value, setValue] = React.useState('');
return (
@@ -28,7 +24,4 @@ Use `OptGroup` to group options together.
);
-}
-```
-
-
+ Click the overlay to close
+
+
+ Blurred backdrop overlay
+
+ e.stopPropagation()}
+ >
+
+ Custom Panel
+This content is rendered inside the overlay.
+ +
+ Mask type: {type} (click to close)
+
+
- Click the overlay to close
-
-
- Blurred backdrop overlay
-
- e.stopPropagation()}
- >
-
- Custom Panel
-This content is rendered inside the overlay.
- -
- Mask type: {type} (click to close)
-
- +
+
+
+
-
-
-
-
+
+ );
+
+ return (
+ This is the content
+ This is the content
+ | + |
+ |
+
+ |
+
+ |
+ + |
|
+ |
+ + | + | + |
+ |
+
|
+ |
+ + | + | + |
+ |
+
|
+ |
+ + | + | + |
+ |
+
| + |
+ |
+
+ |
+
+ |
+ + |
-
- );
-
- return (
- This is the content
- This is the content
- | - |
- |
-
- |
-
- |
- - |
|
- |
- - | - | - |
- |
-
|
- |
- - | - | - |
- |
-
|
- |
- - | - | - |
- |
-
| - |
- |
-
- |
-
- |
- - |
This is the content
@@ -16,9 +12,6 @@ The simplest usage.
return (
This is the content
@@ -31,7 +27,4 @@ Mouse to click, right click, focus and move in.
);
-}
-```
-
-
+}
\ No newline at end of file
diff --git a/packages/react/src/popover/demo/controlled.md b/packages/react/src/popover/demo/controlled.md
deleted file mode 100644
index af60abc5..00000000
--- a/packages/react/src/popover/demo/controlled.md
+++ /dev/null
@@ -1,35 +0,0 @@
-
+
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/progress/demo/CustomText.tsx b/packages/react/src/progress/demo/CustomText.tsx
new file mode 100644
index 00000000..d6e06cb3
--- /dev/null
+++ b/packages/react/src/progress/demo/CustomText.tsx
@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+import { Progress, Button } from '@tiny-design/react';
+
+export default function CustomTextDemo() {
+ const { Bar, Circle } = Progress;
+ const { Group } = Button;
+
+ const [percent, setPercent] = useState(90);
+
+ const renderText = (val: number) => {
+ if (val < 100) return `${val} Days`;
+ return 'Done';
+ };
+
+ return (
+
+
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/progress/demo/Dynamic.tsx b/packages/react/src/progress/demo/Dynamic.tsx
new file mode 100644
index 00000000..24197b2e
--- /dev/null
+++ b/packages/react/src/progress/demo/Dynamic.tsx
@@ -0,0 +1,21 @@
+import React, { useState } from 'react';
+import { Progress, Button } from '@tiny-design/react';
+
+export default function DynamicDemo() {
+ const { Bar, Circle } = Progress;
+ const { Group } = Button;
+
+ const [percent, setPercent] = useState(0);
+
+ return (
+
+
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/progress/demo/InternalText.tsx b/packages/react/src/progress/demo/InternalText.tsx
new file mode 100644
index 00000000..78f5fc2b
--- /dev/null
+++ b/packages/react/src/progress/demo/InternalText.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Progress } from '@tiny-design/react';
+
+export default function InternalTextDemo() {
+ const { Bar } = Progress;
+
+ return (
+
+
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/progress/demo/LinearGradient.tsx b/packages/react/src/progress/demo/LinearGradient.tsx
new file mode 100644
index 00000000..6ea290e7
--- /dev/null
+++ b/packages/react/src/progress/demo/LinearGradient.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { Progress } from '@tiny-design/react';
+
+export default function LinearGradientDemo() {
+ const { Bar } = Progress;
+
+ return (
+
+
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/progress/demo/ProgressBar.tsx b/packages/react/src/progress/demo/ProgressBar.tsx
new file mode 100644
index 00000000..64b178d7
--- /dev/null
+++ b/packages/react/src/progress/demo/ProgressBar.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Progress } from '@tiny-design/react';
+
+export default function ProgressBarDemo() {
+ const { Bar } = Progress;
+
+ return (
+
+
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/progress/demo/ProgressCircle.tsx b/packages/react/src/progress/demo/ProgressCircle.tsx
new file mode 100644
index 00000000..98eccad7
--- /dev/null
+++ b/packages/react/src/progress/demo/ProgressCircle.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { Progress } from '@tiny-design/react';
+
+export default function ProgressCircleDemo() {
+ const { Circle } = Progress;
+
+ const style = {
+ marginRight: '10px',
+ };
+
+ return (
+
+
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/progress/demo/Reverse.tsx b/packages/react/src/progress/demo/Reverse.tsx
new file mode 100644
index 00000000..b2b0643f
--- /dev/null
+++ b/packages/react/src/progress/demo/Reverse.tsx
@@ -0,0 +1,23 @@
+import React, { useState } from 'react';
+import { Progress, Button } from '@tiny-design/react';
+
+export default function ReverseDemo() {
+ const { Circle } = Progress;
+ const { Group } = Button;
+
+ const [percent, setPercent] = useState(0);
+
+ return (
+
+
+
+
+
+
+
+ +
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/progress/demo/SquareLinecaps.tsx b/packages/react/src/progress/demo/SquareLinecaps.tsx
new file mode 100644
index 00000000..963769be
--- /dev/null
+++ b/packages/react/src/progress/demo/SquareLinecaps.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { Progress } from '@tiny-design/react';
+
+export default function SquareLinecapsDemo() {
+ const { Bar, Circle } = Progress;
+
+ return (
+ + +
+
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/progress/demo/active.md b/packages/react/src/progress/demo/active.md
deleted file mode 100644
index 158bdd7f..00000000
--- a/packages/react/src/progress/demo/active.md
+++ /dev/null
@@ -1,20 +0,0 @@
-
-
- );
-}
-```
-
-
-
-
-
-
-
-
- );
- };
-
- return (
-
-
-
-
-
-
-
- );
- };
-
- return (
-
-
- );
-}
-```
-
-
-
- );
-}
-```
-
-
-
- );
-}
-```
-
-
-
-
-
-
-
-
- );
-}
-```
-
-
-
-
-
-
-
-
- -
- );
- };
-
- return (
- - -
-
- );
-}
-```
-
-+
+ + + ); +} \ No newline at end of file diff --git a/packages/react/src/radio/demo/Group.tsx b/packages/react/src/radio/demo/Group.tsx new file mode 100644 index 00000000..53ed21e1 --- /dev/null +++ b/packages/react/src/radio/demo/Group.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import { Radio } from '@tiny-design/react'; + +const { Group } = Radio; + +export default function GroupDemo() { + const [value, setValue] = React.useState('a'); + + return ( + <> +
Controlled
++ +
Uncontrolled
+-
- - - ); - }; - - return ( -
Controlled
-- -
Uncontrolled
-+
+
+
+
+
+ -
-
-
-
+
+
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/scroll-indicator/demo/target.md b/packages/react/src/scroll-indicator/demo/Target.tsx
similarity index 89%
rename from packages/react/src/scroll-indicator/demo/target.md
rename to packages/react/src/scroll-indicator/demo/Target.tsx
index 71f9723a..6ecdd92e 100644
--- a/packages/react/src/scroll-indicator/demo/target.md
+++ b/packages/react/src/scroll-indicator/demo/Target.tsx
@@ -1,17 +1,13 @@
-Scroll up to detect the change of the indicator on the top.
+ +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae justo eget magna fermentum iaculis eu non. Malesuada proin libero nunc consequat interdum varius sit amet mattis. A condimentum vitae sapien pellentesque habitant morbi tristique senectus. Erat nam at lectus urna duis convallis convallis tellus id. Ornare quam viverra orci sagittis eu volutpat odio facilisis. Ornare arcu dui vivamus arcu. Convallis aenean et tortor at. Tempus iaculis urna id volutpat lacus. Rhoncus mattis rhoncus urna neque viverra justo nec ultrices. Lectus sit amet est placerat in egestas erat imperdiet sed. Tristique sollicitudin nibh sit amet commodo nulla facilisi nullam. Non nisi est sit amet facilisis magna etiam tempor orci. Auctor neque vitae tempus quam pellentesque nec nam aliquam sem. Gravida arcu ac tortor dignissim. Mattis pellentesque id nibh tortor id aliquet lectus proin nibh. Etiam tempor orci eu lobortis elementum nibh tellus. Rhoncus dolor purus non enim praesent elementum facilisis leo vel. Varius sit amet mattis vulputate enim nulla aliquet porttitor lacus.
+ +Nec tincidunt praesent semper feugiat nibh sed. Velit ut tortor pretium viverra suspendisse potenti nullam ac tortor. Magna eget est lorem ipsum dolor. Arcu risus quis varius quam quisque id diam vel quam. Massa id neque aliquam vestibulum. Libero id faucibus nisl tincidunt eget. Consectetur adipiscing elit ut aliquam purus sit. Pellentesque diam volutpat commodo sed egestas egestas. Interdum velit laoreet id donec ultrices tincidunt. Fringilla urna porttitor rhoncus dolor purus. Et ultrices neque ornare aenean. Vitae ultricies leo integer malesuada nunc. A diam sollicitudin tempor id eu nisl nunc mi ipsum. Neque viverra justo nec ultrices dui sapien eget mi. Dictum non consectetur a erat nam at lectus. Aenean sed adipiscing diam donec adipiscing tristique risus nec.
+ +Mi quis hendrerit dolor magna eget est lorem. Dignissim enim sit amet venenatis urna cursus eget nunc scelerisque. Adipiscing diam donec adipiscing tristique risus. Viverra mauris in aliquam sem fringilla ut morbi tincidunt augue. Dui ut ornare lectus sit amet est. Nunc eget lorem dolor sed. Ac turpis egestas integer eget aliquet nibh praesent tristique. Mattis molestie a iaculis at erat pellentesque adipiscing. Est ullamcorper eget nulla facilisi etiam dignissim. Arcu ac tortor dignissim convallis. Orci ac auctor augue mauris. Commodo viverra maecenas accumsan lacus vel facilisis volutpat est. Amet commodo nulla facilisi nullam vehicula ipsum. Amet risus nullam eget felis eget. Et sollicitudin ac orci phasellus. Ultrices mi tempus imperdiet nulla. Tincidunt nunc pulvinar sapien et ligula ullamcorper. Diam vulputate ut pharetra sit. Suspendisse potenti nullam ac tortor vitae purus faucibus. Ultrices mi tempus imperdiet nulla malesuada pellentesque elit.
+
+ targetRef && targetRef.current}/>
+
);
-}
-```
-
-
+}
\ No newline at end of file
diff --git a/packages/react/src/scroll-indicator/demo/basic.md b/packages/react/src/scroll-indicator/demo/basic.md
deleted file mode 100644
index 12f5dd79..00000000
--- a/packages/react/src/scroll-indicator/demo/basic.md
+++ /dev/null
@@ -1,22 +0,0 @@
-
-
-### Basic
-
-A basic example.
-
-```jsx live
-<>
-
diff --git a/packages/react/src/scroll-indicator/index.md b/packages/react/src/scroll-indicator/index.md
index c49b9ef2..623b23f4 100644
--- a/packages/react/src/scroll-indicator/index.md
+++ b/packages/react/src/scroll-indicator/index.md
@@ -1,5 +1,7 @@
-import Basic from './demo/basic.md'
-import Target from './demo/target.md'
+import BasicDemo from './demo/Basic';
+import BasicSource from './demo/Basic.tsx?raw';
+import TargetDemo from './demo/Target';
+import TargetSource from './demo/Target.tsx?raw';
# Scroll Indicator
@@ -17,8 +19,24 @@ import { ScrollIndicator } from 'tiny-design';
## Examples
-
+
+### Basic
+
+A basic example.
+
+
+
+
+### Container to scroll
+
+Set a target, which is listen to scroll event of target element (default is `window`).
+
+
## API
diff --git a/packages/react/src/scroll-indicator/index.zh_CN.md b/packages/react/src/scroll-indicator/index.zh_CN.md
index f7abcf03..c5d54bbc 100644
--- a/packages/react/src/scroll-indicator/index.zh_CN.md
+++ b/packages/react/src/scroll-indicator/index.zh_CN.md
@@ -1,5 +1,7 @@
-import Basic from './demo/basic.md'
-import Target from './demo/target.md'
+import BasicDemo from './demo/Basic';
+import BasicSource from './demo/Basic.tsx?raw';
+import TargetDemo from './demo/Target';
+import TargetSource from './demo/Target.tsx?raw';
# Scroll Indicator
@@ -17,8 +19,24 @@ import { ScrollIndicator } from 'tiny-design';
## 代码示例
-
+
+### 基本用法
+
+一个基础示例。
+
+
+
+
+### 容器滚动
+
+设置 target 属性，监听目标元素的滚动事件（默认为 `window`）。
+
+
## API
diff --git a/packages/react/src/segmented/demo/basic.md b/packages/react/src/segmented/demo/Basic.tsx
similarity index 79%
rename from packages/react/src/segmented/demo/basic.md
rename to packages/react/src/segmented/demo/Basic.tsx
index 086c33ea..812375b1 100644
--- a/packages/react/src/segmented/demo/basic.md
+++ b/packages/react/src/segmented/demo/Basic.tsx
@@ -1,11 +1,7 @@
-
+import React from 'react';
+import { Segmented } from '@tiny-design/react';
-### Basic
-
-Simplest usage of Segmented control.
-
-```jsx live
-() => {
+export default function BasicDemo() {
return (
+}
\ No newline at end of file
diff --git a/packages/react/src/segmented/demo/disabled.md b/packages/react/src/segmented/demo/Disabled.tsx
similarity index 77%
rename from packages/react/src/segmented/demo/disabled.md
rename to packages/react/src/segmented/demo/Disabled.tsx
index 2266582a..8e897bf7 100644
--- a/packages/react/src/segmented/demo/disabled.md
+++ b/packages/react/src/segmented/demo/Disabled.tsx
@@ -1,11 +1,7 @@
-
+import React from 'react';
+import { Segmented } from '@tiny-design/react';
-### Disabled
-
-Disable the entire control or individual options.
-
-```jsx live
-() => {
+export default function DisabledDemo() {
return (
+}
\ No newline at end of file
diff --git a/packages/react/src/segmented/demo/icon.md b/packages/react/src/segmented/demo/Icon.tsx
similarity index 58%
rename from packages/react/src/segmented/demo/icon.md
rename to packages/react/src/segmented/demo/Icon.tsx
index ed004101..8604e3bb 100644
--- a/packages/react/src/segmented/demo/icon.md
+++ b/packages/react/src/segmented/demo/Icon.tsx
@@ -1,11 +1,8 @@
-
+import React from 'react';
+import { Segmented } from '@tiny-design/react';
+import { IconUser, IconStar, IconWifi } from '@tiny-design/icons';
-### With Icons
-
-Add icons to segmented options using the `icon` property.
-
-```jsx live
-() => {
+export default function IconDemo() {
return (
+}
\ No newline at end of file
diff --git a/packages/react/src/segmented/demo/size.md b/packages/react/src/segmented/demo/Size.tsx
similarity index 73%
rename from packages/react/src/segmented/demo/size.md
rename to packages/react/src/segmented/demo/Size.tsx
index 2f1aa5a1..ad2045c2 100644
--- a/packages/react/src/segmented/demo/size.md
+++ b/packages/react/src/segmented/demo/Size.tsx
@@ -1,11 +1,7 @@
-
+import React from 'react';
+import { Segmented } from '@tiny-design/react';
-### Size
-
-Three sizes: `sm`, `md`, and `lg`.
-
-```jsx live
-() => {
+export default function SizeDemo() {
return (
+}
\ No newline at end of file
diff --git a/packages/react/src/segmented/index.md b/packages/react/src/segmented/index.md
index 4fc07ebe..25437cf4 100644
--- a/packages/react/src/segmented/index.md
+++ b/packages/react/src/segmented/index.md
@@ -1,7 +1,11 @@
-import Basic from './demo/basic.md'
-import Disabled from './demo/disabled.md'
-import IconDemo from './demo/icon.md'
-import Size from './demo/size.md'
+import BasicDemo from './demo/Basic';
+import BasicSource from './demo/Basic.tsx?raw';
+import DisabledDemo from './demo/Disabled';
+import DisabledSource from './demo/Disabled.tsx?raw';
+import IconDemo from './demo/Icon';
+import IconSource from './demo/Icon.tsx?raw';
+import SizeDemo from './demo/Size';
+import SizeSource from './demo/Size.tsx?raw';
# Segmented
@@ -21,12 +25,44 @@ import { Segmented } from 'tiny-design';
-
+
+### Basic
+
+Simplest usage of Segmented control.
+
+
+
+
+### With Icons
+
+Add icons to segmented options using the `icon` property.
+
+
-
+
+### Size
+
+Three sizes: `sm`, `md`, and `lg`.
+
+
+
+
+### Disabled
+
+Disable the entire control or individual options.
+
+
@@ -49,4 +85,4 @@ import { Segmented } from 'tiny-design';
| label | display text | ReactNode | |
| value | option value | string \| number | |
| disabled | disable this option | boolean | false |
-| icon | icon node | ReactNode | |
+| icon | icon node | ReactNode | |
\ No newline at end of file
diff --git a/packages/react/src/segmented/index.zh_CN.md b/packages/react/src/segmented/index.zh_CN.md
index 5498f793..d91a64b0 100644
--- a/packages/react/src/segmented/index.zh_CN.md
+++ b/packages/react/src/segmented/index.zh_CN.md
@@ -1,4 +1,11 @@
-import Basic from './demo/basic.md'
+import BasicDemo from './demo/Basic';
+import BasicSource from './demo/Basic.tsx?raw';
+import DisabledDemo from './demo/Disabled';
+import DisabledSource from './demo/Disabled.tsx?raw';
+import IconDemo from './demo/Icon';
+import IconSource from './demo/Icon.tsx?raw';
+import SizeDemo from './demo/Size';
+import SizeSource from './demo/Size.tsx?raw';
# Segmented 分段控制器
@@ -18,7 +25,44 @@ import { Segmented } from 'tiny-design';
-
+
+### 基础用法
+
+最简单的使用方式。
+
+
+
+
+### 带图标
+
+使用 `icon` 属性为分段选项添加图标。
+
+
+
+
+
+
+### 尺寸
+
+三种尺寸: `sm`, `md`, `lg`。
+
+
+
+
+### 禁用
+
+禁用整个控件或单个选项。
+
+
@@ -41,4 +85,4 @@ import { Segmented } from 'tiny-design';
| label | 显示文本 | ReactNode | |
| value | 选项值 | string \| number | |
| disabled | 禁用此选项 | boolean | false |
-| icon | 图标 | ReactNode | |
+| icon | 图标 | ReactNode | |
\ No newline at end of file
diff --git a/packages/react/src/select/demo/basic.md b/packages/react/src/select/demo/Basic.tsx
similarity index 82%
rename from packages/react/src/select/demo/basic.md
rename to packages/react/src/select/demo/Basic.tsx
index a0292a77..732b7ab8 100644
--- a/packages/react/src/select/demo/basic.md
+++ b/packages/react/src/select/demo/Basic.tsx
@@ -1,11 +1,7 @@
-
+import React from 'react';
+import { Select } from '@tiny-design/react';
-### Basic
-
-Basic usage of Select.
-
-```jsx live
-() => {
+export default function BasicDemo() {
const [value, setValue] = React.useState('');
return (
@@ -22,7 +18,4 @@ Basic usage of Select.
);
-}
-```
-
-Scroll up to detect the change of the indicator.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae justo eget magna fermentum iaculis eu non. Malesuada proin libero nunc consequat interdum varius sit amet mattis. A condimentum vitae sapien pellentesque habitant morbi tristique senectus. Erat nam at lectus urna duis convallis convallis tellus id. Ornare quam viverra orci sagittis eu volutpat odio facilisis. Ornare arcu dui vivamus arcu. Convallis aenean et tortor at. Tempus iaculis urna id volutpat lacus. Rhoncus mattis rhoncus urna neque viverra justo nec ultrices. Lectus sit amet est placerat in egestas erat imperdiet sed. Tristique sollicitudin nibh sit amet commodo nulla facilisi nullam. Non nisi est sit amet facilisis magna etiam tempor orci. Auctor neque vitae tempus quam pellentesque nec nam aliquam sem. Gravida arcu ac tortor dignissim. Mattis pellentesque id nibh tortor id aliquet lectus proin nibh. Etiam tempor orci eu lobortis elementum nibh tellus. Rhoncus dolor purus non enim praesent elementum facilisis leo vel. Varius sit amet mattis vulputate enim nulla aliquet porttitor lacus.
@@ -22,7 +18,4 @@ Set a target, which is listen to scroll event of target element (default is `win
-
-
-```
-
-Scroll up to detect the change of the indicator on the top.
- -Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae justo eget magna fermentum iaculis eu non. Malesuada proin libero nunc consequat interdum varius sit amet mattis. A condimentum vitae sapien pellentesque habitant morbi tristique senectus. Erat nam at lectus urna duis convallis convallis tellus id. Ornare quam viverra orci sagittis eu volutpat odio facilisis. Ornare arcu dui vivamus arcu. Convallis aenean et tortor at. Tempus iaculis urna id volutpat lacus. Rhoncus mattis rhoncus urna neque viverra justo nec ultrices. Lectus sit amet est placerat in egestas erat imperdiet sed. Tristique sollicitudin nibh sit amet commodo nulla facilisi nullam. Non nisi est sit amet facilisis magna etiam tempor orci. Auctor neque vitae tempus quam pellentesque nec nam aliquam sem. Gravida arcu ac tortor dignissim. Mattis pellentesque id nibh tortor id aliquet lectus proin nibh. Etiam tempor orci eu lobortis elementum nibh tellus. Rhoncus dolor purus non enim praesent elementum facilisis leo vel. Varius sit amet mattis vulputate enim nulla aliquet porttitor lacus.
- -Nec tincidunt praesent semper feugiat nibh sed. Velit ut tortor pretium viverra suspendisse potenti nullam ac tortor. Magna eget est lorem ipsum dolor. Arcu risus quis varius quam quisque id diam vel quam. Massa id neque aliquam vestibulum. Libero id faucibus nisl tincidunt eget. Consectetur adipiscing elit ut aliquam purus sit. Pellentesque diam volutpat commodo sed egestas egestas. Interdum velit laoreet id donec ultrices tincidunt. Fringilla urna porttitor rhoncus dolor purus. Et ultrices neque ornare aenean. Vitae ultricies leo integer malesuada nunc. A diam sollicitudin tempor id eu nisl nunc mi ipsum. Neque viverra justo nec ultrices dui sapien eget mi. Dictum non consectetur a erat nam at lectus. Aenean sed adipiscing diam donec adipiscing tristique risus nec.
- -Mi quis hendrerit dolor magna eget est lorem. Dignissim enim sit amet venenatis urna cursus eget nunc scelerisque. Adipiscing diam donec adipiscing tristique risus. Viverra mauris in aliquam sem fringilla ut morbi tincidunt augue. Dui ut ornare lectus sit amet est. Nunc eget lorem dolor sed. Ac turpis egestas integer eget aliquet nibh praesent tristique. Mattis molestie a iaculis at erat pellentesque adipiscing. Est ullamcorper eget nulla facilisi etiam dignissim. Arcu ac tortor dignissim convallis. Orci ac auctor augue mauris. Commodo viverra maecenas accumsan lacus vel facilisis volutpat est. Amet commodo nulla facilisi nullam vehicula ipsum. Amet risus nullam eget felis eget. Et sollicitudin ac orci phasellus. Ultrices mi tempus imperdiet nulla. Tincidunt nunc pulvinar sapien et ligula ullamcorper. Diam vulputate ut pharetra sit. Suspendisse potenti nullam ac tortor vitae purus faucibus. Ultrices mi tempus imperdiet nulla malesuada pellentesque elit.
-
-
+
{option.label}
)}
@@ -37,7 +35,4 @@ Use `optionRender` to customize dropdown items and `labelRender` to customize th
)}
/>
);
-}
-```
-
-
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/select/demo/sizes.md b/packages/react/src/select/demo/sizes.md
deleted file mode 100644
index c3145eca..00000000
--- a/packages/react/src/select/demo/sizes.md
+++ /dev/null
@@ -1,24 +0,0 @@
-
-
-
-
-
-```
-
-
+
+
+
+
+
-
-
-
-
-
@@ -18,7 +14,4 @@ A basic SpeedDial that expands on hover.
@@ -17,7 +13,4 @@ Use `trigger="click"` to open the SpeedDial on click instead of hover.
@@ -20,7 +17,4 @@ Customize the FAB icon and the open icon.
-
+ Left
+
+
+ Right
+
+
+ Left
+
+
+ Right
+
+
+ Left
+
+
+ Top
+
+
+ Bottom
+
+
+ Left
+
+
+ Right
+
+
+ Left
+
+
+ Right
+
+
- Left
-
-
- Right
-
-
- Left
-
-
- Right
-
-
- Left
-
-
- Top
-
-
- Bottom
-
-
- Left
-
-
- Right
-
-
- Left
-
-
- Right
-
-
+
+
);
-}
-```
-
-
+
{val} / 10}
/>
-
+
);
-}
-```
-
-
+
+
);
-}
-```
-
-+
+ + + ); +} \ No newline at end of file diff --git a/packages/react/src/steps/demo/Vertical.tsx b/packages/react/src/steps/demo/Vertical.tsx new file mode 100644 index 00000000..897256af --- /dev/null +++ b/packages/react/src/steps/demo/Vertical.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { Steps } from '@tiny-design/react'; + +export default function VerticalDemo() { + return ( +
- - - ); -} -``` - -
+
+
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/sticky/demo/basic.md b/packages/react/src/sticky/demo/basic.md
deleted file mode 100644
index 0c9484ae..00000000
--- a/packages/react/src/sticky/demo/basic.md
+++ /dev/null
@@ -1,23 +0,0 @@
-
+ containerRef.current}>
+
+
+
+ -
-
- );
-}
-```
-
-
- containerRef.current}>
-
-
-
-
+
+ +
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/strength-indicator/demo/Label.tsx b/packages/react/src/strength-indicator/demo/Label.tsx
new file mode 100644
index 00000000..5b087caf
--- /dev/null
+++ b/packages/react/src/strength-indicator/demo/Label.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { StrengthIndicator } from '@tiny-design/react';
+
+export default function LabelDemo() {
+ return + +
+ setPassword(e.currentTarget.value)}
+ />
+
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/strength-indicator/demo/basic.md b/packages/react/src/strength-indicator/demo/basic.md
deleted file mode 100644
index 10359b39..00000000
--- a/packages/react/src/strength-indicator/demo/basic.md
+++ /dev/null
@@ -1,40 +0,0 @@
-
-
-
- -
- );
- }
-}
-```
-
-- -
- this.setState({ password: e.currentTarget.value })}/>
-
- );
- }
-}
-```
-
-+
+ + + ); +} \ No newline at end of file diff --git a/packages/react/src/switch/demo/Loading.tsx b/packages/react/src/switch/demo/Loading.tsx new file mode 100644 index 00000000..c0d3b8bb --- /dev/null +++ b/packages/react/src/switch/demo/Loading.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { Switch } from '@tiny-design/react'; + +export default function LoadingDemo() { + return ( +
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/switch/demo/Size.tsx b/packages/react/src/switch/demo/Size.tsx
new file mode 100644
index 00000000..34d0d20a
--- /dev/null
+++ b/packages/react/src/switch/demo/Size.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Switch } from '@tiny-design/react';
+
+export default function SizeDemo() {
+ return (
+ +
+
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/switch/demo/Text.tsx b/packages/react/src/switch/demo/Text.tsx
new file mode 100644
index 00000000..0f3255ad
--- /dev/null
+++ b/packages/react/src/switch/demo/Text.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { Switch } from '@tiny-design/react';
+
+export default function TextDemo() {
+ return (
+ +
+
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/switch/demo/basic.md b/packages/react/src/switch/demo/basic.md
deleted file mode 100644
index c2718ae3..00000000
--- a/packages/react/src/switch/demo/basic.md
+++ /dev/null
@@ -1,11 +0,0 @@
-+
+
- - - ); - } - - return ( -
-
-
- );
- }
-
- return (
- -
-
-
-
- );
- }
-
- return (
- -
-
-
-
- );
- }
-
- return (
- -
@@ -32,7 +28,7 @@ Use the `render` property on columns to customize cell content with tags, links,
{
title: 'Action',
dataIndex: 'action',
- render: (_, record) => (
+ render: (_: any, record: any) => (
alert('View ' + record.name)}>View
),
},
@@ -52,7 +48,4 @@ Use the `render` property on columns to customize cell content with tags, links,
pagination={false}
/>
);
-}
-```
-
-
+}
\ No newline at end of file
diff --git a/packages/react/src/table/demo/pagination.md b/packages/react/src/table/demo/Pagination.tsx
similarity index 78%
rename from packages/react/src/table/demo/pagination.md
rename to packages/react/src/table/demo/Pagination.tsx
index 3a6208fd..d508f640 100644
--- a/packages/react/src/table/demo/pagination.md
+++ b/packages/react/src/table/demo/Pagination.tsx
@@ -1,11 +1,7 @@
-
+import React from 'react';
+import { Table } from '@tiny-design/react';
-### Pagination
-
-Table with built-in pagination. Data is automatically sliced by page.
-
-```jsx live
-() => {
+export default function PaginationDemo() {
const columns = [
{ title: '#', dataIndex: 'id', width: 60 },
{ title: 'Title', dataIndex: 'title' },
@@ -26,7 +22,4 @@ Table with built-in pagination. Data is automatically sliced by page.
pagination={{ pageSize: 5 }}
/>
);
-}
-```
-
-
+}
\ No newline at end of file
diff --git a/packages/react/src/table/demo/selection.md b/packages/react/src/table/demo/Selection.tsx
similarity index 74%
rename from packages/react/src/table/demo/selection.md
rename to packages/react/src/table/demo/Selection.tsx
index 1680a1b3..37447f52 100644
--- a/packages/react/src/table/demo/selection.md
+++ b/packages/react/src/table/demo/Selection.tsx
@@ -1,12 +1,8 @@
-
+import React from 'react';
+import { Table } from '@tiny-design/react';
-### Row Selection
-
-Select rows with checkboxes. Use `rowSelection.type` for radio mode.
-
-```jsx live
-() => {
- const [selectedRowKeys, setSelectedRowKeys] = React.useState([]);
+export default function SelectionDemo() {
+ const [selectedRowKeys, setSelectedRowKeys] = React.useState([]);
const columns = [
{ title: 'Name', dataIndex: 'name' },
@@ -29,13 +25,10 @@ Select rows with checkboxes. Use `rowSelection.type` for radio mode.
dataSource={data}
rowSelection={{
selectedRowKeys,
- onChange: (keys) => setSelectedRowKeys(keys),
+ onChange: (keys: any) => setSelectedRowKeys(keys),
}}
pagination={false}
/>
);
-}
-```
-
-
+}
\ No newline at end of file
diff --git a/packages/react/src/table/demo/sizes.md b/packages/react/src/table/demo/Sizes.tsx
similarity index 75%
rename from packages/react/src/table/demo/sizes.md
rename to packages/react/src/table/demo/Sizes.tsx
index 6270c5d3..e17d1f59 100644
--- a/packages/react/src/table/demo/sizes.md
+++ b/packages/react/src/table/demo/Sizes.tsx
@@ -1,12 +1,8 @@
-
+ magenta
+ red
+ volcano
+ orange
+ gold
+ lime
+ green
+ cyan
+ blue
+ geekblue
+ purple
+
+
+
+ #f50
+ #2db7f5
+ #87d068
+ #108ee9
+
+
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/tag/demo/Controlled.tsx b/packages/react/src/tag/demo/Controlled.tsx
new file mode 100644
index 00000000..bcf88770
--- /dev/null
+++ b/packages/react/src/tag/demo/Controlled.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Tag, Button } from '@tiny-design/react';
+
+export default function ControlledDemo() {
+ const [visible, setVisible] = React.useState(true);
+
+ return (
+ <>
+ +
+ + + ); +} \ No newline at end of file diff --git a/packages/react/src/tag/demo/Dynamic.tsx b/packages/react/src/tag/demo/Dynamic.tsx new file mode 100644 index 00000000..3fa10311 --- /dev/null +++ b/packages/react/src/tag/demo/Dynamic.tsx @@ -0,0 +1,63 @@ +import React from 'react'; +import { Tag, Input } from '@tiny-design/react'; +import { IconPlus } from '@tiny-design/icons'; + +export default function DynamicDemo() { + const [tags, setTags] = React.useState(['Unremovable', 'Tag 2', 'Tag 3']); + const [inputVisible, setInputVisible] = React.useState(false); + const [inputValue, setInputValue] = React.useState(''); + const inputRef = React.useRef
+ {tags.map((tag, idx) => (
+ handleClose(tag)}>
+ {tag}
+
+ ))}
+ {inputVisible ? (
+
+ ) : (
+
+
+ )}
+
+ );
+}
\ No newline at end of file
diff --git a/packages/react/src/tag/demo/checkable.md b/packages/react/src/tag/demo/checkable.md
deleted file mode 100755
index ca78af06..00000000
--- a/packages/react/src/tag/demo/checkable.md
+++ /dev/null
@@ -1,27 +0,0 @@
-
- magenta
- red
- volcano
- orange
- gold
- lime
- green
- cyan
- blue
- geekblue
- purple
-
-
-
- #f50
- #2db7f5
- #87d068
- #108ee9
-
-
-```
-
--
- - - ); - }; - - return
- {tags.map((tag, idx) => (
- handleClose(tag)}>{tag}
- ))}
- {inputVisible ? (
-
- )
- :
- (
-
- New Tag
-
- )}
-
- );
- };
-
- return +
+
+
+
+
+
+
+
+
Click or drag file to this area to upload
++ Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files +
+
-
Click or drag file to this area to upload
-- Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files -
-