作者：京东零售 佟恩

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

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

Badge：样式自定义

核心代码：

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

查看Badge更多示例：https://nutui.jd.com/h5/react/1x/#/zh-CN/component/badge

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

核心代码：

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

查看更多示例：https://nutui.jd.com/h5/react/1x/#/zh-CN/component/Calendar

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

核心代码：

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

查看更多示例：https://nutui.jd.com/h5/react/1x/#/zh-CN/component/Cascader

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

核心代码：

  
    组合复选框
  
  
    组合复选框
  

查看更多示例：https://nutui.jd.com/h5/react/1x/#/zh-CN/component/CheckBox

Collapse: 自定义title、图标样式

核心代码：

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

查看更多示例：https://nutui.jd.com/h5/react/1x/#/zh-CN/component/Collapse

InputNumber: 按钮样式可设置

核心代码：

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

查看更多示例：https://nutui.jd.com/h5/react/1x/#/zh-CN/component/InputNumber

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

核心代码：

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

查看更多示例：https://nutui.jd.com/h5/react/1x/#/zh-CN/component/PopOver

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

核心代码：

 {
    setShowIconDefine(false)
  }}
/>

查看更多示例：https://nutui.jd.com/h5/react/1x/#/zh-CN/component/PopUp

Progress：支持进度条颜色配置

核心代码：

查看更多示例：https://nutui.jd.com/h5/react/1x/#/zh-CN/component/Progress

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

核心代码：

  
    我是标题
  
  
    我是标题
    
      我是描述
    
  



  选项1
  
    选项选项选项2
  
  选项3

查看更多示例：https://nutui.jd.com/h5/react/1x/#/zh-CN/component/Radio

SearchBar：可设置图标大小

核心代码：

}
  rightoutIcon={}
  rightinIcon={}
/>

查看更多示例：https://nutui.jd.com/h5/react/1x/#/zh-CN/component/SearchBar

Steps: 点状横向进度条

核心代码：

  1
  2
  3

查看更多示例：https://nutui.jd.com/h5/react/1x/#/zh-CN/component/Steps

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

核心代码：

 {
    setActiveIndex(id)
  }}
>
  
  
  
  
  

查看更多示例：https://nutui.jd.com/h5/react/1x/#/zh-CN/component/TabBar

Tabs：左对齐

核心代码：

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

查看更多示例：https://nutui.jd.com/h5/react/1x/#/zh-CN/component/Tabs