Skip to content

Releases: duxapp/duxui

V1.0.63

11 Dec 13:55
Compare
Choose a tag to compare

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

06 Nov 09:27
Compare
Choose a tag to compare

表单

完善了所有表单,支持非受控模式、禁用表单、设置默认值等功能

PickerSelect

新增 search ,开启后用于搜索选项

Switch

新增 values 属性,用于指定开关不同状态的值

Textarea

优化了文本显示

兼容新CLI

将npm依赖选项移动到package.json文件中

V1.0.48

01 Nov 10:35
Compare
Choose a tag to compare

图标组件

将图标放在本地,防止偶尔出现图标不显示的问题

loading

词函数已经移动到基础模块中

ModalForm

新增 onSubmitBefore 可以监听用户提交,通过抛出错误的方式阻止用户提交

修复一些H5端导致热重载报错的问题

并未完全修复

V1.0.47

30 Oct 02:26
Compare
Choose a tag to compare

List

在小程序端新增虚拟列表功能,这需要手动开启,且有一些使用限制

Checkbox

新增部分选中属性

Avatar

修复主题配置不生效的问题

主题

修复ui模块主题配置不生效的问题

Types

修复了一些类型提示

V1.0.45

15 Oct 05:02
Compare
Choose a tag to compare

Recorder

新增录音表单组建,用于录音上传

Upload

完善对视频、图片上传的预览功能

Step

新增 lineType 指定线条的类型

Cascade

修复对RN的兼容

Types

修复多个组建的types提示

V1.0.41

20 Sep 02:15
Compare
Choose a tag to compare

主要更改

  • Taro更新到4.0.5 RN更新到0.75
  • 完善大量组件类型提示
  • 完善开发文档http://duxapp.cn/
  • 完善多个组件
  • 优化从Taro导入组件的防止兼容新版本RN

UploadImage

将上传图片的组件统一更换为Upload,支持图片和视频上传

Sign

去除组件的flex:1属性,需要手动设置组件的高度

V1.0.37

30 Aug 02:04
Compare
Choose a tag to compare

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

06 Aug 02:46
Compare
Choose a tag to compare

Calendar

  • 新增onDayClick属性,点击某一天的事件,可以返回 true 阻止默认操作,如选中日历
  • 修复RN端显示错乱
  • 修复types

Grade

修复分数有小数时,显示错误的问题

UploadImages

图片上传在RN端支持权限提示说明,此功能在华为APP上架时强制需求

Divider

  • [破坏性更新]移除了padding属性,后续将不支持此属性
  • 修改 direction 属性为 vertical 属性
  • 修改Group组件 row 属性为 vertical 属性

其他优化

  • 优化confirm显示
  • 修复H5端Picker相关组件失效问题
  • 修复Swiper可能显示0的问题

V1.0.31

09 Jul 14:01
Compare
Choose a tag to compare

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

25 Jun 06:39
Compare
Choose a tag to compare

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

修复设置多个值时,设置不成功