Skip to content

Commit

Permalink
docs: update documents
Browse files Browse the repository at this point in the history
  • Loading branch information
cncolder committed Jun 10, 2020
1 parent f613841 commit 3e16ca5
Show file tree
Hide file tree
Showing 6 changed files with 168 additions and 27 deletions.
8 changes: 4 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ export default () => {
* [x] ActivityIndicator
* [ ] Article
* [x] [Avatar](./docs/components/Avatar.mdx)
* [x] Badge
* [x] [Badge](./docs/components/Badge.mdx)
* [x] [Button](./docs/components/Button.mdx)
* [x] Calendar
* [ ] Swipe 操作
Expand All @@ -113,8 +113,8 @@ export default () => {
* [ ] Indexes
* [x] Input
* [x] InputNumber
* [x] List
* [x] ListItem
* [x] [List](./docs/components/List.mdx)
* [x] [ListItem](./docs/components/List.mdx)
* [x] Loading
* [ ] Loadmore
* [x] Message
Expand Down Expand Up @@ -146,7 +146,7 @@ export default () => {
扩展组件

* [x] CustomTabBar
* [x] ListHeader
* [x] [ListHeader](./docs/components/List.mdx)
* [x] Statistic

## 支持
Expand Down
30 changes: 15 additions & 15 deletions docs/components/ActivityIndicator.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,47 +6,47 @@ title: ActivityIndicator 活动指示器

## 示例

import { UI } from '@/ui'
import { ActivityIndicator } from '@tarojsx/ui'
import { UI } from '@/ui'

```jsx
```jsx title="常规"
<ActivityIndicator isOpened />
```

<UI block>
<ActivityIndicator isOpened />
</UI>

```jsx
<ActivityIndicator isOpened size="60" mode="center" />
```jsx title="颜色"
<ActivityIndicator isOpened color="red" />
```

<UI block>
<ActivityIndicator style={{ zIndex: 1 }} isOpened size="60" mode="center" />
<ActivityIndicator isOpened color="red" />
</UI>

```jsx
<ActivityIndicator isOpened size="20" />
```jsx title="尺寸"
<ActivityIndicator isOpened size="128" />
```

<UI block>
<ActivityIndicator isOpened size="20" />
<ActivityIndicator isOpened size="128" />
</UI>

```jsx
<ActivityIndicator isOpened color="red" />
```jsx title="文字"
<ActivityIndicator isOpened content="加载中..." />
```

<UI block>
<ActivityIndicator isOpened color="red" />
<ActivityIndicator isOpened content="加载中..." />
</UI>

```jsx
<ActivityIndicator isOpened content="加载中..." />
```jsx title="居中"
<ActivityIndicator isOpened size="60" mode="center" />
```

<UI block>
<ActivityIndicator isOpened content="加载中..." />
<UI block style={{ width: 200, height: 200, background: '#eee' }}>
<ActivityIndicator isOpened size="60" mode="center" />
</UI>

## API
Expand Down
4 changes: 2 additions & 2 deletions docs/components/Avatar.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ title: Avatar 头像

## 示例

import { UI } from '@/ui'
import useBaseUrl from '@docusaurus/useBaseUrl'
import { Avatar } from '@tarojsx/ui'
import useBaseUrl from '@docusaurus/useBaseUrl'
import { UI } from '@/ui'

```jsx title="头像"
<Avatar image="img/logo.svg" />
Expand Down
61 changes: 61 additions & 0 deletions docs/components/Badge.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
---
title: Badge 徽标
---

## 示例

import { Badge, Button } from '@tarojsx/ui'
import { UI } from '@/ui'

```jsx title="数字"
<Badge value={10}>
<Button size="small">按钮</Button>
</Badge>

<Badge value={100} maxValue={99}>
<Button size="small">按钮</Button>
</Badge>
```

<UI>
<span style={{ marginRight: 60 }}>
<Badge value={10}>
<Button size="small">按钮</Button>
</Badge>
</span>
<span>
<Badge value={100} maxValue={99}>
<Button size="small">按钮</Button>
</Badge>
</span>
</UI>

```jsx title="小红点"
<Badge dot>
<Button size="small">按钮</Button>
</Badge>
```

<UI>
<Badge dot>
<Button size="small">按钮</Button>
</Badge>
</UI>

```jsx title="文字"
<Badge value="NEW">
<Button size="small">按钮</Button>
</Badge>
```

<UI>
<Badge value="NEW">
<Button size="small">按钮</Button>
</Badge>
</UI>

## API

- [Taro UI 文档](https://taro-ui.jd.com/#/docs/badge)
- [`<Badge />`](../modules/_badge_.md)
- [`BadgeProps`](../interfaces/_badge_.badgeprops.md)
35 changes: 29 additions & 6 deletions docs/components/Button.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,13 @@ title: Button 按钮

## 示例

import { Button } from '@tarojsx/ui'
import { Image } from '@tarojs/components'
import useBaseUrl from '@docusaurus/useBaseUrl'
import dayjs from 'dayjs'
import { UI } from '@/ui'
import { Button, Avatar } from '@tarojsx/ui'

```jsx title="按钮类型"
```jsx title="类型"
<Button>default</Button>

<Button type="primary">primary</Button>
Expand Down Expand Up @@ -39,7 +42,7 @@ import { Button, Avatar } from '@tarojsx/ui'
<Button type="error">error</Button>
</UI>

```jsx title="按钮尺寸"
```jsx title="尺寸"
<Button size="mini">mini</Button>

<Button size="small">small</Button>
Expand All @@ -57,16 +60,36 @@ import { Button, Avatar } from '@tarojsx/ui'

```jsx title="透明按钮"
<Button transparent openType="getUserInfo">
<Avatar circle text="User" />
<Image src={useBaseUrl('img/logo.svg')} />
</Button>
```

<UI>
<UI style={{ display: 'inline-block' }}>
<Button transparent openType="getUserInfo">
<Avatar style={{ background: 'orange' }} circle text="User" />
<Image src={useBaseUrl('img/logo.svg')} />
</Button>
</UI>

```jsx title="点击节流"
<Button clickThrottle>快速点我!</Button>
```

<UI>
{() => {
const [times, setTimes] = React.useState([])
return (
<>
<Button type="error" clickThrottle onClick={() => setTimes((prev) => [dayjs(), ...prev.slice(0, 4)])}>
快速点我!
</Button>
{times.map((time, index) => (
<div key={index}>{time.format(`ss' SSS''`)}</div>
))}
</>
)
}}
</UI>

## API

| 参数 | 说明 | 类型 | 默认值 |
Expand Down
57 changes: 57 additions & 0 deletions docs/components/List.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
---
title: List 列表
---

## 示例

import { List, ListHeader, ListItem, Icon, Tag } from '@tarojsx/ui'
import { Text } from '@tarojs/components'
import { UI } from '@/ui'

```jsx title="基本用法"
<List>
<ListHeader title="基本用法" />
<ListItem title="文字" />
<ListItem title="箭头" arrow="right" />
<ListItem title="文字" extra="详细信息" />
<ListItem title="禁用" disabled arrow="right" />
</List>
```

```jsx title="高级用法"
<List>
<ListHeader title="高级用法" />
<ListItem title={<Text style={{ color: 'orange' }}>标题组件</Text>} extra={<Icon value="download" />} />
<ListItem title="子组件" arrow="right">
children
</ListItem>
</List>
```

<UI phone title="列表">
<List>
<ListHeader title="基本用法" />
<ListItem title="文字" />
<ListItem title="箭头" arrow="right" />
<ListItem title="文字" extra="详细信息" />
<ListItem title="禁用" disabled arrow="right" />
</List>
<List>
<ListHeader title="高级用法" />
<ListItem title={<Text style={{ color: 'orange' }}>标题组件</Text>} extra={<Icon value="download" />} />
<ListItem title="子组件" arrow="right">
{['TaroX', 'UI', 'ListItem'].map((c) => (
<Tag style={{ marginRight: 20 }} size="small">
{c}
</Tag>
))}
</ListItem>
<ListItem title="清除按钮" extra="2020-06-06" arrow="clear" onClear={() => alert('清除')} />
</List>
</UI>

## API

- [Taro UI 文档](https://taro-ui.jd.com/#/docs/list)
- [`<List />`](../modules/_list_.md)
- [`ListProps`](../interfaces/_list_.listprops.md)

0 comments on commit 3e16ca5

Please sign in to comment.