docs: update component documents

tarojsx · Jun 8, 2020 · 74755fa · 74755fa
1 parent f1c50df
commit 74755fa
Show file tree

Hide file tree

Showing 3 changed files with 175 additions and 24 deletions.
diff --git a/docs/components/ActivityIndicator.mdx b/docs/components/ActivityIndicator.mdx
@@ -0,0 +1,56 @@
+---
+title: ActivityIndicator 活动指示器
+---
+
+该组件提供一个加载等待元素，也就是 Loading 组件
+
+## 示例
+
+import { UI } from '@/ui'
+import { ActivityIndicator } from '@tarojsx/ui'
+
+```jsx
+<ActivityIndicator isOpened />
+```
+
+<UI block>
+    <ActivityIndicator isOpened />
+</UI>
+
+```jsx
+<ActivityIndicator isOpened size="60" mode="center" />
+```
+
+<UI block>
+    <ActivityIndicator style={{ zIndex: 1 }} isOpened size="60" mode="center" />
+</UI>
+
+```jsx
+<ActivityIndicator isOpened size="20" />
+```
+
+<UI block>
+    <ActivityIndicator isOpened size="20" />
+</UI>
+
+```jsx
+<ActivityIndicator isOpened color="red" />
+```
+
+<UI block>
+    <ActivityIndicator isOpened color="red" />
+</UI>
+
+```jsx
+<ActivityIndicator isOpened content="加载中..." />
+```
+
+<UI block>
+    <ActivityIndicator isOpened content="加载中..." />
+</UI>
+
+## API
+
+-   [Taro UI 文档 | 活动指示器](https://taro-ui.jd.com/#/docs/activityindicator)
+-   [`<ActivityIndicator />`](modules/_activityindicator_.md)
+-   [`ActivityIndicatorProps`](interfaces/_activityindicator_.activityindicatorprops.md)
diff --git a/docs/components/Avatar.mdx b/docs/components/Avatar.mdx
@@ -4,12 +4,81 @@ title: Avatar 头像
 
 用于展示用户头像
 
+## 示例
+
+import { UI } from '@/ui'
+import useBaseUrl from '@docusaurus/useBaseUrl'
+import { Avatar } from '@tarojsx/ui'
+
+```jsx title="头像"
+<Avatar image="img/logo.svg" />
+```
+
+<UI>
+    <Avatar image={useBaseUrl('img/logo.svg')} />
+</UI>
+
+```jsx title="文字"
+<Avatar text="UI" />
+```
+
+<UI>
+    <Avatar text="UI" />
+</UI>
+
+```jsx title="圆形头像"
+<Avatar circle image="img/logo.svg" />
+```
+
+<UI>
+    <Avatar circle image={useBaseUrl('img/logo.svg')} />
+</UI>
+
+```jsx title="圆形文字"
+<Avatar circle text="UI" />
+```
+
+<UI>
+    <Avatar circle text="UI" />
+</UI>
+
+```jsx title="尺寸"
+<Avatar size="tiny" image="img/logo.svg" />
+<Avatar size="mini" image="img/logo.svg" />
+<Avatar size="small" image="img/logo.svg" />
+<Avatar image="img/logo.svg" />
+<Avatar size="large" image="img/logo.svg" />
+```
+
+<div style={{ display: 'flex', justifyContent: 'space-around', alignItems: 'center' }}>
+    <UI>
+        tiny
+        <Avatar size="tiny" image={useBaseUrl('img/logo.svg')} />
+    </UI>
+    <UI>
+        mini
+        <Avatar size="mini" image={useBaseUrl('img/logo.svg')} />
+    </UI>
+    <UI>
+        small
+        <Avatar size="small" image={useBaseUrl('img/logo.svg')} />
+    </UI>
+    <UI>
+        default
+        <Avatar image={useBaseUrl('img/logo.svg')} />
+    </UI>
+    <UI>
+        large
+        <Avatar size="large" image={useBaseUrl('img/logo.svg')} />
+    </UI>
+</div>
+
 ## API
 
 | 参数 | 说明 | 类型                          | 默认值 |
 | ---- | ---- | ----------------------------- | ------ |
 | size | 尺寸 | `tiny` `mini` `small` `large` |        |
 
--   [Taro UI 文档](https://taro-ui.jd.com/#/docs/avatar)
+-   [Taro UI 文档 | 头像](https://taro-ui.jd.com/#/docs/avatar)
 -   [`<Avatar />`](modules/_avatar_.md)
 -   [`AvatarProps`](interfaces/_avatar_.avatarprops.md)
diff --git a/docs/components/Button.mdx b/docs/components/Button.mdx
@@ -4,9 +4,10 @@ title: Button 按钮
 
 ## 示例
 
-```tsx
-import { Button } from '@tarojsx/ui'
+import { UI } from '@/ui'
+import { Button, Avatar } from '@tarojsx/ui'
 
+```jsx title="按钮类型"
 <Button>default</Button>
 
 <Button type="primary">primary</Button>
@@ -18,29 +19,54 @@ import { Button } from '@tarojsx/ui'
 <Button type="error">error</Button>
 ```
 
-```tsx live
-function Clock(props) {
-    const [date, setDate] = useState(new Date())
-    useEffect(() => {
-        var timerID = setInterval(() => tick(), 1000)
-
-        return function cleanup() {
-            clearInterval(timerID)
-        }
-    })
-
-    function tick() {
-        setDate(new Date())
-    }
-
-    return (
-        <div>
-            <h2>It is {date.toLocaleTimeString()}.</h2>
-        </div>
-    )
-}
+<UI>
+    <Button>default</Button>
+</UI>
+
+<UI>
+    <Button type="primary">primary</Button>
+</UI>
+
+<UI>
+    <Button type="secondary">secondary</Button>
+</UI>
+
+<UI>
+    <Button type="warn">warn</Button>
+</UI>
+
+<UI>
+    <Button type="error">error</Button>
+</UI>
+
+```jsx title="按钮尺寸"
+<Button size="mini">mini</Button>
+
+<Button size="small">small</Button>
 ```
 
+<UI>
+    <Button size="mini" type="primary">
+        mini
+    </Button>
+</UI>
+
+<UI>
+    <Button size="small">small</Button>
+</UI>
+
+```jsx title="透明按钮"
+<Button transparent openType="getUserInfo">
+    <Avatar circle text="User" />
+</Button>
+```
+
+<UI>
+    <Button transparent openType="getUserInfo">
+        <Avatar style={{ background: 'orange' }} circle text="User" />
+    </Button>
+</UI>
+
 ## API
 
 | 参数          | 说明                                | 类型                                           | 默认值 |