Skip to content

Commit a4da29b

Browse files
robinv8drl990114honlyHuangdependabot[bot]shixing.peng
authored
Feat/3.2.0 (#1697)
Co-authored-by: drl990114 <[email protected]> Co-authored-by: honlyHuang <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: shixing.peng <[email protected]> Co-authored-by: P4X666 <[email protected]>
1 parent 1cf2db6 commit a4da29b

File tree

23 files changed

+289
-471
lines changed

23 files changed

+289
-471
lines changed

‎.eslintrc.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,8 @@
7878
"^UNSAFE_"
7979
]
8080
}
81-
]
81+
],
82+
"@typescript-eslint/ban-ts-comment": "off"
8283
},
8384
"settings": {
8485
"import/ignore": [

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ Taro 是由 [凹凸实验室](https://aotu.io) 倾力打造的多端开发解决
2626

2727
## 相关链接
2828

29-
- [Taro UI 使用文档](https://taro-ui.jd.com)
29+
- [Taro UI 使用文档](https://taro-ui.taro.zone)
3030
- [Taro UI 官方示例](https://github.com/NervJS/taro-ui-demo)
3131
- [Taro](https://taro.jd.com/)
3232
- [Taro 物料市场](https://taro-ext.jd.com)

‎packages/taro-ui-demo-rn/src/pages/view/timeline/index.tsx

Lines changed: 33 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import './index.scss'
77

88
export default class TimelinePage extends React.Component {
99
public config: Taro.PageConfig = {
10-
navigationBarTitleText: 'Taro UI',
10+
navigationBarTitleText: 'Taro UI'
1111
}
1212

1313
public render(): JSX.Element {
@@ -26,7 +26,7 @@ export default class TimelinePage extends React.Component {
2626
{ title: '刷牙洗脸' },
2727
{ title: '吃早餐' },
2828
{ title: '上班' },
29-
{ title: '睡觉' },
29+
{ title: '睡觉' }
3030
]}
3131
></AtTimeline>
3232
</View>
@@ -43,7 +43,7 @@ export default class TimelinePage extends React.Component {
4343
{ title: '刷牙洗脸' },
4444
{ title: '吃早餐', color: 'green' },
4545
{ title: '上班', color: 'red' },
46-
{ title: '睡觉', color: 'yellow' },
46+
{ title: '睡觉', color: 'yellow' }
4747
]}
4848
></AtTimeline>
4949
</View>
@@ -60,7 +60,7 @@ export default class TimelinePage extends React.Component {
6060
{ title: '刷牙洗脸', icon: 'check-circle' },
6161
{ title: '吃早餐', icon: 'clock' },
6262
{ title: '上班', icon: 'clock' },
63-
{ title: '睡觉', icon: 'clock' },
63+
{ title: '睡觉', icon: 'clock' }
6464
]}
6565
></AtTimeline>
6666
</View>
@@ -78,7 +78,7 @@ export default class TimelinePage extends React.Component {
7878
{ title: '刷牙洗脸' },
7979
{ title: '吃早餐' },
8080
{ title: '上班' },
81-
{ title: '睡觉' },
81+
{ title: '睡觉' }
8282
]}
8383
></AtTimeline>
8484
</View>
@@ -96,24 +96,48 @@ export default class TimelinePage extends React.Component {
9696
{
9797
title: '刷牙洗脸',
9898
content: ['大概8:00'],
99-
icon: 'check-circle',
99+
icon: 'check-circle'
100100
},
101101
{
102102
title: '吃早餐',
103103
content: ['牛奶+面包', '餐后记得吃药'],
104-
icon: 'clock',
104+
icon: 'clock'
105105
},
106106
{
107107
title: '上班',
108108
content: ['查看邮件', '写PPT', '发送PPT给领导'],
109-
icon: 'clock',
109+
icon: 'clock'
110110
},
111-
{ title: '睡觉', content: ['不超过23:00'], icon: 'clock' },
111+
{ title: '睡觉', content: ['不超过23:00'], icon: 'clock' }
112112
]}
113113
></AtTimeline>
114114
</View>
115115
</View>
116116
</View>
117+
118+
{/* 点击节点事件 */}
119+
<View className='panel'>
120+
<View className='panel__title'>点击节点</View>
121+
<View className='panel__content'>
122+
<View className='example-item'>
123+
<AtTimeline
124+
pending
125+
items={[
126+
{ title: '刷牙洗脸' },
127+
{ title: '吃早餐' },
128+
{ title: '上班' },
129+
{ title: '睡觉' }
130+
]}
131+
onClickItem={index => {
132+
Taro.showToast({
133+
title: `点击了第 ${index} 个节点`,
134+
icon: 'none'
135+
})
136+
}}
137+
></AtTimeline>
138+
</View>
139+
</View>
140+
</View>
117141
</View>
118142
</View>
119143
)

‎packages/taro-ui-demo/src/pages/layout/card/index.tsx

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react'
2-
import { AtCard, AtIcon } from 'taro-ui'
2+
import { AtButton, AtCard, AtIcon } from 'taro-ui'
33
import { View } from '@tarojs/components'
44
import Taro from '@tarojs/taro'
55
import DocsHeader from '../../components/doc-header'
@@ -117,6 +117,25 @@ export default class CardPage extends React.Component {
117117
这也是内容区 可以随意定义功能
118118
</AtCard>
119119
</View>
120+
<View className='example-item'>
121+
<AtCard
122+
note='小Tips'
123+
extra={
124+
<AtButton size='small' type='primary'>
125+
提交
126+
</AtButton>
127+
}
128+
extraStyle={{
129+
fontSize: '12px',
130+
maxWidth: '200px',
131+
color: '#6190e8'
132+
}}
133+
title='这是个标题'
134+
thumb='http://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png'
135+
>
136+
这也是内容区 可以随意定义功能
137+
</AtCard>
138+
</View>
120139
</View>
121140
</View>
122141

‎packages/taro-ui-demo/src/pages/layout/list/index.tsx

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,26 @@ export default class ListPage extends React.Component {
125125
</View>
126126
</View>
127127
</View>
128-
128+
{/* 自定义图标 */}
129+
<View className='panel'>
130+
<View className='panel__title'>
131+
支持自定义图标(不能与thumb同时存在)
132+
</View>
133+
<View className='panel__content no-padding'>
134+
<View className='example-item'>
135+
<AtList>
136+
<AtListItem
137+
title='标题文字'
138+
note='描述信息'
139+
arrow='right'
140+
iconInfo={{ size: 25, color: '#78A4FA', value: 'calendar' }}
141+
thumb='http://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png'
142+
icon={<View className='at-icon at-icon-bookmark' />}
143+
/>
144+
</AtList>
145+
</View>
146+
</View>
147+
</View>
129148
{/* 无边框 */}
130149
<View className='panel'>
131150
<View className='panel__title'>无边框</View>

‎packages/taro-ui-demo/src/pages/view/timeline/index.tsx

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,30 @@ export default class TimelinePage extends React.Component {
114114
</View>
115115
</View>
116116
</View>
117+
118+
{/* 点击节点事件 */}
119+
<View className='panel'>
120+
<View className='panel__title'>点击节点</View>
121+
<View className='panel__content'>
122+
<View className='example-item'>
123+
<AtTimeline
124+
pending
125+
items={[
126+
{ title: '刷牙洗脸' },
127+
{ title: '吃早餐' },
128+
{ title: '上班' },
129+
{ title: '睡觉' }
130+
]}
131+
onClickItem={index => {
132+
Taro.showToast({
133+
title: `点击了第 ${index} 个节点`,
134+
icon: 'none'
135+
})
136+
}}
137+
></AtTimeline>
138+
</View>
139+
</View>
140+
</View>
117141
</View>
118142
</View>
119143
)

‎packages/taro-ui-docs/components/footer/index.jsx

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const Footer = () => (
2424
<p>
2525
<a
2626
className='link'
27-
href='https://taro-ui.jd.com/'
27+
href='https://taro-ui.taro.zone/'
2828
target='_blank'
2929
rel='noopener noreferrer'
3030
>
@@ -87,33 +87,27 @@ const Footer = () => (
8787
微信
8888
<span className='wechat_qrcode_icon'>
8989
<svg
90-
t='1554966525626'
9190
className='icon svgicon'
9291
viewBox='0 0 1024 1024'
9392
version='1.1'
9493
xmlns='http://www.w3.org/2000/svg'
95-
p-id='2588'
9694
data-spm-anchor-id='a313x.7781069.0.i0'
9795
>
9896
<path
9997
d='M240.071 241.095h59.278v59.278h-59.278v-59.278z'
10098
fill=''
101-
p-id='2589'
10299
/>
103100
<path
104101
d='M405.959 134.485h-272.611v272.611h106.723v47.445h59.278v-47.445h106.723v-59.278h47.445v-47.445h-47.445l-0.114-165.888zM346.795 347.819h-154.169v-154.055h154.055v154.055h0.114zM240.071 727.154h59.278v59.278h-59.278v-59.278zM726.016 241.095h59.278v59.278h-59.278v-59.278zM512.683 509.042v63.943h59.278v-59.165h47.445v-59.278h-47.445v-47.445h-59.278v101.945zM512.683 725.789v60.643h59.278v-106.723h47.445v-59.278h-106.723v105.358zM571.961 786.432h47.445v47.445h-47.445v-47.445zM453.405 833.877v59.165h118.557v-59.165h-118.557z'
105102
fill=''
106-
p-id='2590'
107103
/>
108104
<path
109105
d='M678.685 679.709h-59.278v106.723h106.61v-59.278h-47.331v-47.445zM726.016 893.042h166.002v-59.165h-106.723v-47.445h-59.278v106.61zM892.018 513.821v-59.278h-106.723v59.278h106.723zM832.739 727.154h59.278v59.278h-59.278v-59.278zM453.405 347.819h59.278v59.278h-59.278v-59.278zM726.016 454.542v-47.445h166.002v-272.611h-272.611v59.278h-106.723v47.445h106.723v59.165h-47.445v47.445h47.445v59.278h59.278v47.445h47.331zM678.685 193.763h154.055v154.055h-154.055v-154.055zM678.685 572.985h47.331v47.445h-47.331v-47.445zM785.294 679.709h-59.278v47.445h106.723v-106.723h59.278v-47.445h-106.723v106.723zM453.405 241.095h59.278v59.278h-59.278v-59.278zM299.349 513.821h47.445v59.165h-47.445v-59.165zM453.405 454.542h-106.61v59.278h59.165v59.165h47.445v-118.443z'
110106
fill=''
111-
p-id='2591'
112107
/>
113108
<path
114109
d='M405.959 786.432v-106.723h47.445v-59.278h-213.333v-106.61h-106.723v59.278h59.278v47.445h-59.278v272.611h272.611v-59.278h47.445v-47.445h-47.445zM346.795 833.877h-154.169v-154.169h154.055v154.169h0.114zM453.405 572.985h59.278v47.445h-59.278v-47.445zM619.406 513.821h59.278v59.165h-59.278v-59.165zM726.016 513.821h59.278v59.165h-59.278v-59.165z'
115110
fill=''
116-
p-id='2592'
117111
/>
118112
</svg>
119113
</span>

‎packages/taro-ui-docs/markdown/card.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ import { AtCard } from "taro-ui"
4747
| note | 元素的辅助信息 | String | - | - |
4848
| thumb | 元素的缩略图 | String | - | - |
4949
| renderIcon | 元素自定义图标 | Jsx | - | - |
50-
| extra | 元素的额外信息 | String | - | - |
50+
| extra | 元素的额外信息 | Jsx | - | - |
5151
| extraStyle | 元素的额外信息自定义样式 | Object | - | - |
5252
| isFull | 是否通栏 | Boolean | - | - |
5353

‎packages/taro-ui-docs/markdown/list.md

Lines changed: 39 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,29 @@ import { AtList, AtListItem } from "taro-ui"
107107
/>
108108
</AtList>
109109
```
110+
:::
111+
112+
## 支持图标的 Item
113+
114+
:::demo
110115

116+
```jsx
117+
<AtList>
118+
<AtListItem
119+
title='标题文字'
120+
note='描述信息'
121+
arrow='right'
122+
iconInfo={{ size: 25, color: '#78A4FA', value: 'calendar' }}
123+
thumb='http://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png'
124+
icon={<View className='at-icon at-icon-bookmark' />}
125+
/>
126+
</AtList>
127+
```
128+
:::
129+
130+
::: caution
131+
132+
当 icon、thumb、iconInfo 属性同时存在时，优先级为 icon > iconInfo > thumb
111133
:::
112134

113135
## 无边框的 Item
@@ -149,6 +171,7 @@ import { AtList, AtListItem } from "taro-ui"
149171

150172
:::
151173

174+
152175
## AtList 参数
153176

154177
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
@@ -157,24 +180,26 @@ import { AtList, AtListItem } from "taro-ui"
157180

158181
## AtListItem 参数
159182

160-
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
161-
| ------------- | ---------------- | -------------------------------------------------------------------- | ---------------------- | ------- |
162-
| title | 元素的标题 | JSX.Element | - | - |
163-
| disabled | 是否禁用 | Boolean | - | `false` |
164-
| note | 元素的描述信息 | JSX.Element | - | - |
165-
| thumb | 元素的主要缩略图 | String | - | - |
166-
| arrow | 箭头的方向 | String | `right`,`top`,`down` | - |
167-
| extraText | 额外信息的文本 | JSX.Element | - | - |
168-
| extraThumb | 额外信息的缩略图 | String | - | - |
169-
| isSwitch | 额外信息是否开关 | Boolean | - | `false` |
170-
| switchColor | 开关的颜色 | String | - | `#6190E8` |
171-
| switchIsCheck | 额外信息开关的值 | Boolean | - | `false` |
172-
| hasBorder | 是否有边框 | Boolean | - | `true` |
173-
| iconInfo | icon 信息 | {'{ value , size? , color?, prefixClass?,className?,customStyle? }'} | - | `true` |
183+
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
184+
| ------------- | ---------------- | -------------------------------------------------------------------- | -------------------- | --------- |
185+
| title | 元素的标题 | JSX.Element | - | - |
186+
| disabled | 是否禁用 | Boolean | - | `false` |
187+
| note | 元素的描述信息 | JSX.Element | - | - |
188+
| thumb | 元素的主要缩略图 | String | - | - |
189+
| arrow | 箭头的方向 | String | `right`,`top`,`down` | - |
190+
| extraText | 额外信息的文本 | JSX.Element | - | - |
191+
| extraThumb | 额外信息的缩略图 | String | - | - |
192+
| isSwitch | 额外信息是否开关 | Boolean | - | `false` |
193+
| switchColor | 开关的颜色 | String | - | `#6190E8` |
194+
| switchIsCheck | 额外信息开关的值 | Boolean | - | `false` |
195+
| hasBorder | 是否有边框 | Boolean | - | `true` |
196+
| iconInfo | icon 信息 | {'{ value , size? , color?, prefixClass?,className?,customStyle? }'} | - | `true` |
197+
| icon | icon 的内容 | JSX.Element | - | - |
174198

175199
## AtListItem 事件
176200

177201
| 事件名称 | 说明 | 返回参数 |
178202
| -------------- | -------------------------- | -------- |
179203
| onClick | 用户点击元素触发的事件 | - |
180204
| onSwitchChange | 用户点击切换 Switch 时触发 | - |
205+

‎packages/taro-ui-docs/markdown/timeline.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,12 @@ import { AtTimeline } from 'taro-ui'
106106
|:-------------|:----------------------------------------|:----------------|:-----------------|:-------|
107107
| pending | 最后一项是否为未完成态 | Boolean | - | false |
108108
| items | 需展示的内容。数组对象参数参考下文 item | Array Of Object | - | [] |
109+
| onClickItem | 点击 item 触发的事件 | (current, e) => void | - | [] |
110+
111+
## Timeline 事件
112+
| 事件名称 | 说明 | 返回参数 |
113+
|---------- |-------------- |---------- |
114+
| onClickItem | 点击 item 触发的事件 | current,步骤索引值 |
109115

110116
## items object 字段详解
111117

0 commit comments

Comments
 (0)