Releases: duxapp/duxui
V1.0.63
Animated
跨端动画库,支持RN,多个动画效果都是用这个实现的
RollingView
新增自动滚动容器组件,将子元素滚动起来,像滚动的公告,就能用这个组件实现
ProgressCircle
新增环形进度条组件
InputNumber
新增数字进步输入器,点击加号和减号调整数字
PullView
- 使用新的动画功能实现
- side 新增 center 指定弹出到屏幕中间
Divider
优化 Divider 对为空子元素的处理
ModalForms
新增 onSubmitBefore 用来拦截表单提交,如果报错,表单不会被提交
PickerMultiSelect
修复对 children 的支持
PickerSelect
修复对 children 的支持
Tag
type 属性新增 default
Button
组件添加点击效果
Sign
修复组件在 H5 端无法使用的问题
Elevator
- 新增屏幕中间的索引显示
- 支持滑动选择索引
confirm
增加动画效果
message
增加动画效果
Menu
组件弹出菜单新增动画效果
V1.0.51
表单
完善了所有表单,支持非受控模式、禁用表单、设置默认值等功能
PickerSelect
新增 search
,开启后用于搜索选项
Switch
新增 values
属性,用于指定开关不同状态的值
Textarea
优化了文本显示
兼容新CLI
将npm依赖选项移动到package.json文件中
V1.0.48
图标组件
将图标放在本地,防止偶尔出现图标不显示的问题
loading
词函数已经移动到基础模块中
ModalForm
新增 onSubmitBefore
可以监听用户提交,通过抛出错误的方式阻止用户提交
修复一些H5端导致热重载报错的问题
并未完全修复
V1.0.47
List
在小程序端新增虚拟列表功能,这需要手动开启,且有一些使用限制
Checkbox
新增部分选中属性
Avatar
修复主题配置不生效的问题
主题
修复ui模块主题配置不生效的问题
Types
修复了一些类型提示
V1.0.45
Recorder
新增录音表单组建,用于录音上传
Upload
完善对视频、图片上传的预览功能
Step
新增 lineType
指定线条的类型
Cascade
修复对RN的兼容
Types
修复多个组建的types提示
V1.0.41
主要更改
- Taro更新到4.0.5 RN更新到0.75
- 完善大量组件类型提示
- 完善开发文档http://duxapp.cn/
- 完善多个组件
- 优化从Taro导入组件的防止兼容新版本RN
UploadImage
将上传图片的组件统一更换为Upload,支持图片和视频上传
Sign
去除组件的flex:1属性,需要手动设置组件的高度
V1.0.37
LinearGradient
修复RN设置rgba不显示透明度的问题
Cell
Cell.Group 添加样式属性支持
Checkbox Radio
新增 disabled 用于禁用选项
FormItem
- label属性如果为传入,则和原来逻辑一致,label传入空字符串则会按照传入的逻辑,但是不显示label内容,即可以显示desc,可以显示验证错误等
- 修复 rules 在组件卸载之后不清除的问题
- 新增 itemPadding 属性,boolean类型,可以设置开启或者关闭当前项目的内边距,默认开启
- 将 direction 属性更改为 vertical,用于指定是否竖向布局
- 新增两个主题配置,用于配置项目内边距和label的宽度
Form
- 新增 itemPadding 属性,boolean类型,可以设置开启或者关闭项目的内边距,默认开启
- 将 direction 属性更改为 vertical,用于指定是否竖向布局
UploadImages UploadImage
新增 option 属性,将会传入到上传函数的参数属性
其他修复
- 修复Input值可能不正确的问题
- Status type 属性新增 default
V1.0.34
Calendar
- 新增onDayClick属性,点击某一天的事件,可以返回 true 阻止默认操作,如选中日历
- 修复RN端显示错乱
- 修复types
Grade
修复分数有小数时,显示错误的问题
UploadImages
图片上传在RN端支持权限提示说明,此功能在华为APP上架时强制需求
Divider
- [破坏性更新]移除了padding属性,后续将不支持此属性
- 修改 direction 属性为 vertical 属性
- 修改Group组件 row 属性为 vertical 属性
其他优化
- 优化confirm显示
- 修复H5端Picker相关组件失效问题
- 修复Swiper可能显示0的问题
V1.0.31
HorseLanternLottery
新增跑马灯抽奖组件,使用示例如下,请安装ui库示例查看详情
import { Column, Header, HorseLanternLottery, Text, TopView, duxappTheme, px, GroupList, ScrollView, confirm } from '@/duxuiExample'
export default function HorseLanternLotteryExample() {
return (
<TopView isSafe>
<Header title='HorseLanternLottery' />
<ScrollView>
<GroupList>
<GroupList.Item title='随机结果'>
<HorseLanternLottery
list={list}
renderItem={Item}
onEnd={res => console.log('抽奖结果', res.index)}
renderStart={<Column grow className='items-center justify-center'>
<Text>开始</Text>
</Column>}
/>
</GroupList.Item>
<GroupList.Item title='异步获取结果'>
<HorseLanternLottery
list={list}
renderItem={Item}
onStart={async () => {
const status = await confirm({
content: '点击确定选中奖品3,点击取消取消抽奖'
})
if (status) {
return 2
}
throw '取消'
}}
onEnd={res => console.log('抽奖结果', res.index)}
renderStart={<Column grow className='items-center justify-center'>
<Text>开始</Text>
</Column>}
/>
</GroupList.Item>
<GroupList.Item title='指定行和列'>
<HorseLanternLottery
list={list}
column={4}
row={4}
renderItem={Item}
onEnd={res => console.log('抽奖结果', res.index)}
renderStart={<Column grow className='items-center justify-center'>
<Text>开始</Text>
</Column>}
/>
</GroupList.Item>
<GroupList.Item title='自定义间距'>
<HorseLanternLottery
list={list}
gap={64}
renderItem={Item}
onEnd={res => console.log('抽奖结果', res.index)}
renderStart={<Column grow className='items-center justify-center'>
<Text>开始</Text>
</Column>}
/>
</GroupList.Item>
<GroupList.Item title='禁用抽奖'>
<HorseLanternLottery
disabled
list={list}
onDisabledClick={() => confirm({ content: '抽奖次数已经用完了' })}
renderItem={Item}
onEnd={res => console.log('抽奖结果', res.index)}
renderStart={<Column grow className='items-center justify-center'>
<Text>抽奖次数已用完</Text>
</Column>}
/>
</GroupList.Item>
</GroupList>
</ScrollView>
</TopView>
)
}
const list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
const Item = ({ item, index, select }) => {
return <Column className='bg-white items-center justify-center'
style={
select ?
{
borderColor: duxappTheme.primaryColor,
borderWidth: 3,
height: px(180)
} :
{
height: px(180)
}
}
>
<Text>奖品{item}</Text>
</Column>
}
其他
- 修复
Form.Item
可能报错 - 修复Modal TS提示
- Status 优化显示
- Swiper 修复属性无效
V1.0.30
TopView
add 方法新增分组属性,多次调用add时,指定了同一个分组的元素,将会以队列的形式展示,即同时只会展示一个,当移除当前展示的内容后,会立即展示下一个
TopView.add(element, { group: '分组' })
对应的以下组件都新增了此属性
- PullView
- Absolute
- Modal
当这些组件指定了相同的属性时,将会加入展示队列
<PullView group='group'>
<Text>内容</Text>
</PullView>
<Modal show group='group'>
<Text>内容</Text>
</Modal>
<Absolute group='group'>
<Text>内容</Text>
</Absolute>
confirm
- 新增
renderTop
renderBottom
属性,用于自定义渲染弹窗顶部和底部的内容 - 返回的task新增
confirm
cancel
close
方法,分别用于触发确定、取消、reject
try {
const task = confirm({
title: '提示',
content: '这是一个任务',
renderBottom: <Text onClick={() => task.close()}>关闭</Text>
})
const status = await task
if(status) {
console.log('用户点击了确定')
} else {
console.log('用户点击了取消')
}
} catch (error) {
console.log('用户点击了关闭')
}
Calendar
新增 enabledDate
属性,表示可用的日期 除了传入的日期或者范围,其他的日期将被禁用,当 enabledDate 的日期在 disabledDate 里面时 此日期将不可用
TabBar
删除不必要的 dom 节点
ModalForms
修复设置多个值时,设置不成功