docs: add components documents

README.md

@@ -112,7 +112,7 @@ export default () => {
 * [x] ImagePicker
 * [ ] Indexes
 * [x] Input
-* [x] InputNumber
+* [x] [InputNumber](./docs/components/InputNumber.mdx)
 * [x] [List](./docs/components/List.mdx)
 * [x] [ListItem](./docs/components/List.mdx)
 * [x] Loading
@@ -123,22 +123,22 @@ export default () => {
 * [ ] Noticebar
 * [ ] Pagination
 * [ ] Picker
-* [x] Progress
+* [x] [Progress](./docs/components/Progress.mdx)
 * [ ] Radio
 * [ ] Rate
-* [x] SearchBar
+* [x] [SearchBar](./docs/components/SearchBar.mdx)
 * [ ] SegmentedControl
 * [ ] Slider
-* [x] Steps
+* [x] [Steps](./docs/components/Steps.mdx)
 * [ ] SwipeAction
 * [ ] Swiper
 * [ ] Switch
-* [x] TabBar
+* [x] [TabBar](./docs/components/TabBar.mdx)
 * [x] Tabs
   * [ ] Swipe 操作
 * [x] TabsPane
   * [ ] Swipe 操作
-* [x] Tag
+* [x] [Tag](./docs/components/Tag.mdx)
 * [x] Textarea
 * [ ] Timeline
 * [ ] Toast

docs/components/InputNumber.mdx

@@ -0,0 +1,66 @@
+---
+title: InputNumber 数字输入框
+---
+
+## 示例
+
+import { InputNumber } from '@tarojsx/ui'
+import { UI } from '@/ui'
+
+```jsx title="整数"
+<InputNumber />
+```
+
+<UI>
+    {() => {
+        const [value, setValue] = React.useState(0)
+        return <InputNumber value={value} onChange={(e) => setValue(e.detail.value)} />
+    }}
+</UI>
+
+```jsx title="小数"
+<InputNumber step={0.1} />
+```
+
+<UI>
+    {() => {
+        const [value, setValue] = React.useState(0)
+        return <InputNumber step={0.1} value={value} onChange={(e) => setValue(e.detail.value)} />
+    }}
+</UI>
+
+```jsx title="5-8"
+<InputNumber min={5} max={8} />
+```
+
+<UI>
+    {() => {
+        const [value, setValue] = React.useState(6)
+        return <InputNumber min={5} max={8} value={value} onChange={(e) => setValue(e.detail.value)} />
+    }}
+</UI>
+
+```jsx title="禁止输入"
+<InputNumber disabledInput />
+```
+
+<UI>
+    {() => {
+        const [value, setValue] = React.useState(0)
+        return <InputNumber disabledInput value={value} onChange={(e) => setValue(e.detail.value)} />
+    }}
+</UI>
+
+```jsx title="禁用"
+<InputNumber disabled />
+```
+
+<UI>
+    <InputNumber disabled />
+</UI>
+
+## API
+
+-   [Taro UI 文档](https://taro-ui.jd.com/#/docs/inputnumber)
+-   [`<InputNumber />`](../modules/_inputnumber_.md)
+-   [`InputNumberProps`](../interfaces/_inputnumber_.inputnumberprops.md)

docs/components/Progress.mdx

@@ -0,0 +1,119 @@
+---
+title: Progress 进度条
+---
+
+## 示例
+
+import { Progress } from '@tarojsx/ui'
+import { useHarmonicIntervalFn } from 'react-use'
+import { UI } from '@/ui'
+
+```jsx title="基础"
+<Progress />
+```
+
+<UI>
+    {() => {
+        const [percent, setPercent] = React.useState(0)
+        useHarmonicIntervalFn(() => setPercent(Math.round((Date.now() / 100) % 100)), 1000)
+        return <Progress percent={percent} />
+    }}
+</UI>
+
+```jsx title="隐藏文字"
+<Progress isHidePercent />
+```
+
+<UI>
+    {() => {
+        const [percent, setPercent] = React.useState(0)
+        useHarmonicIntervalFn(() => setPercent(Math.round((Date.now() / 100) % 100)), 1000)
+        return <Progress percent={percent} isHidePercent />
+    }}
+</UI>
+
+```jsx title="线宽"
+<Progress strokeWidth={6} />
+<Progress strokeWidth={8} />
+<Progress strokeWidth={10} />
+```
+
+<UI>
+    {() => {
+        const [percent, setPercent] = React.useState(0)
+        useHarmonicIntervalFn(() => setPercent(Math.round((Date.now() / 100) % 100)), 1000)
+        return (
+            <div>
+                <Progress percent={percent} strokeWidth={6} />
+                <Progress percent={percent} strokeWidth={8} />
+                <Progress percent={percent} strokeWidth={10} />
+            </div>
+        )
+    }}
+</UI>
+
+```jsx title="过渡时间"
+<Progress />
+<Progress transitionDuration={0} />
+<Progress transitionDuration={0.75} />
+```
+
+<UI>
+    {() => {
+        const [percent, setPercent] = React.useState(0)
+        useHarmonicIntervalFn(() => setPercent(Math.round((Date.now() / 100) % 100)), 1000)
+        return (
+            <div>
+                <Progress percent={percent} />
+                <Progress percent={percent} transitionDuration={0} />
+                <Progress percent={percent} transitionDuration={0.75} />
+            </div>
+        )
+    }}
+</UI>
+
+```jsx title="颜色"
+<Progress color='#FF4949' />
+<Progress color='#13CE66' />
+<Progress color='#FFC82C' />
+```
+
+<UI>
+    {() => {
+        const [percent, setPercent] = React.useState(0)
+        useHarmonicIntervalFn(() => setPercent(Math.round((Date.now() / 100) % 100)), 1000)
+        return (
+            <div>
+                <Progress percent={percent} color="#FF4949" />
+                <Progress percent={percent} color="#13CE66" />
+                <Progress percent={percent} color="#FFC82C" />
+            </div>
+        )
+    }}
+</UI>
+
+```jsx title="状态"
+<AtProgress status='error' />
+<AtProgress status='progress' />
+<AtProgress status='success' />
+```
+
+<UI>
+    {() => {
+        const [percent, setPercent] = React.useState(0)
+        useHarmonicIntervalFn(() => setPercent(Math.round((Date.now() / 100) % 100)), 1000)
+        return (
+            <div>
+                <Progress percent={percent} status="progress" />
+                <Progress percent={percent} status="success" />
+                <Progress percent={percent} status="error" />
+            </div>
+        )
+    }}
+</UI>
+
+## API
+
+-   [Taro UI 文档](https://taro-ui.jd.com/#/docs/progress)
+-   [`<Progress />`](../modules/_progress_.md)
+-   [`ProgressProps`](../interfaces/_progress_.progressprops.md)

docs/components/SearchBar.mdx

@@ -0,0 +1,24 @@
+---
+title: SearchBar 搜索栏
+---
+
+## 示例
+
+import { SearchBar } from '@tarojsx/ui'
+import { UI } from '@/ui'
+
+```jsx title="基础"
+<SearchBar />
+```
+
+<UI>
+    {() => {
+        return <SearchBar />
+    }}
+</UI>
+
+## API
+
+-   [Taro UI 文档](https://taro-ui.jd.com/#/docs/searchbar)
+-   [`<SearchBar />`](../modules/_searchbar_.md)
+-   [`SearchBarProps`](../interfaces/_searchbar_.searchbarprops.md)

docs/components/Steps.mdx

@@ -0,0 +1,96 @@
+---
+title: Steps 步骤条
+---
+
+## 示例
+
+import { Steps } from '@tarojsx/ui'
+import { UI } from '@/ui'
+
+```jsx title="基础"
+const Demo = () => {
+    const [current, setCurrent] = React.useState(0)
+    const onChange = React.useCallback((index) => {
+        setCurrent(index)
+    }, [])
+    return (
+        <Steps
+            items={[
+                { title: '选购' },
+                {
+                    title: '确认',
+                    desc: '这里是额外的信息，最多两行',
+                    icon: {
+                        value: 'shopping-cart',
+                        activeColor: '#fff',
+                        inactiveColor: '#78A4FA',
+                        size: '14',
+                    },
+                },
+                {
+                    title: '支付',
+                    icon: {
+                        value: 'credit-card',
+                        activeColor: '#fff',
+                        inactiveColor: '#78A4FA',
+                        size: '14',
+                    },
+                },
+                {
+                    title: '完成',
+                    status: 'success',
+                },
+            ]}
+            current={current}
+            onChange={onChange}
+        />
+    )
+}
+```
+
+<UI>
+    {() => {
+        const [current, setCurrent] = React.useState(0)
+        const onChange = React.useCallback((index) => {
+            setCurrent(index)
+        }, [])
+        return (
+            <Steps
+                items={[
+                    { title: '选购' },
+                    {
+                        title: '确认',
+                        desc: '这里是额外的信息，最多两行',
+                        icon: {
+                            value: 'shopping-cart',
+                            activeColor: '#fff',
+                            inactiveColor: '#78A4FA',
+                            size: '14',
+                        },
+                    },
+                    {
+                        title: '支付',
+                        icon: {
+                            value: 'credit-card',
+                            activeColor: '#fff',
+                            inactiveColor: '#78A4FA',
+                            size: '14',
+                        },
+                    },
+                    {
+                        title: '完成',
+                        status: 'success',
+                    },
+                ]}
+                current={current}
+                onChange={onChange}
+            />
+        )
+    }}
+</UI>
+
+## API
+
+-   [Taro UI 文档](https://taro-ui.jd.com/#/docs/steps)
+-   [`<Steps />`](../modules/_steps_.md)
+-   [`StepsProps`](../interfaces/_steps_.stepsprops.md)