NutUI-React 京东移动端组件库 2月份上新！欢迎使用！

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

NutUI-React 京东移动端组件库 2月份上新！欢迎使用！

2023-03-16 10:55:08 来源：博客园

作者：京东零售佟恩

(资料图片)

NutUI 是一款京东风格的移动端组件库。NutUI 目前支持 Vue 和 React技术栈，支持Taro多端适配。本次，是2月的一个示例输出，希望对你有帮助！

2月，我们对组件交互、issue修复、增加示例上做了急行军，共合并70+PR，修复近40个issue。这里我们选取一些组件的新增示例，供您参考！

期待您早日成为我们共建大军中的一员！

微信群：hanyuxinting（暗号：NutUI-React）

官网GitHub:点击进入

欢迎共建、使用！

Badge：样式自定义

核心代码：

const customTheme = {  nutuiBadgeBorderRadius: "12px 12px 12px 0",}

查看Badge更多示例

Calendar：日期顶部和底部可配置内容

核心代码：

const onTopInfo = () => {    return (        t    )}const onBottomInfo = () => {    return (        b    )}

查看更多示例

Cascader：可配置颜色、分割线、check icon

核心代码：

const customTheme = {  nutuiCascaderItemHeight: "48px",  nutuiCascaderItemMargin: "0 10px",  nutuiCascaderItemPadding: "10px",  nutuiCascaderItemBorderBottom: "1px solid #F0F0F0",}

查看更多示例

CheckBox：增加横向布局、选项值多项展示

核心代码：

      组合复选框        组合复选框

查看更多示例

Collapse: 自定义title、图标样式

核心代码：

      京东 NutUI 组件库         京东 NutUI 组件库         京东 NutUI 组件库

查看更多示例

InputNumber: 按钮样式可设置

核心代码：

const customTheme = {  nutuiInputnumberButtonWidth: "30px",  nutuiInputnumberButtonHeight: "30px",  nutuiInputnumberButtonBorderRadius: "2px",  nutuiInputnumberButtonBackgroundColor: `#f4f4f4`,  nutuiInputnumberInputHeight: "30px",  nutuiInputnumberInputMargin: "0 2px",}

查看更多示例

PopOver：底部border可配置、支持hover样式

核心代码：

 {    showIcon ? setShowIcon(false) : setShowIcon(true)  }}  list={iconItemList}>

查看更多示例

PopUp：支持图标自定义+尺寸设置

核心代码：

 {    setShowIconDefine(false)  }}/>

查看更多示例

Progress：支持进度条颜色配置

核心代码：

查看更多示例

Radio：选项值多行展示、支持换行

核心代码：

      我是标题        我是标题
          我是描述    
    选项1      选项选项选项2    选项3

查看更多示例

SearchBar：可设置图标大小

核心代码：

}  rightoutIcon={}  rightinIcon={}/>

查看更多示例

Steps: 点状横向进度条

核心代码：

  1  2  3

查看更多示例

TabBar：初始选中状态、只配图片

核心代码：

 {    setActiveIndex(id)  }}>

查看更多示例

Tabs：左对齐

核心代码：

 {    setTab1value(paneKey)  }}>      {" "}    Tab 1{" "}     Tab 2    Tab 3

查看更多示例

加入我们

再次期待您早日成为我们共建大军中的一员！一起共建，一起使用！做站内最优秀的开源组件库！

赶紧加入我们吧！！

关键词：