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

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

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

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

官网GitHub:点击进入

欢迎共建、使用！

Badge：样式自定义

核心代码：

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

 <ConfigProvider theme={customTheme}>   <Badge value="NEW">     <Avatar icon="my" shape="square" />   </Badge> </ConfigProvider>  

查看Badge更多示例

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

核心代码：

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

 <Calendar     visible={isVisible3}     defaultValue={date3}     type="range"     confirmText="submit"     startText="enter"     endText="leave"     onTopInfo={onTopInfo }     onBottomInfo={onBottomInfo } />  

查看更多示例

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

核心代码：

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

 <ConfigProvider theme={customTheme}>   <Cascader     color="#3768FA"     tabsColor="#3768FA"   /> </ConfigProvider>  

查看更多示例

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

核心代码：

 <Checkbox.Group   checkedValue={[]}  direction="horizontal" >   <Checkbox checked={false} label="1">     组合复选框   </Checkbox>   <Checkbox checked={false} label="2">     组合复选框   </Checkbox> </Checkbox.Group>  

查看更多示例

Collapse: 自定义title、图标样式

核心代码：

 <Collapse activeName={['1']} accordion icon="star">   <CollapseItem     title="标题1"     name="1"     titleIcon="checked"     titleIconSize="16"     titleIconColor="red"     titleIconPosition="left"   >     京东 NutUI 组件库   </CollapseItem>   <CollapseItem     title="标题2"     name="2"     titleIcon="heart-fill"     titleIconColor="red"     titleIconPosition="right"   >      京东 NutUI 组件库   </CollapseItem>   <CollapseItem title="标题3" name="3">      京东 NutUI 组件库   </CollapseItem> </Collapse>  

查看更多示例

InputNumber: 按钮样式可设置

核心代码：

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

 <ConfigProvider theme={customTheme}>   <InputNumber modelValue={inputState.val5} /> </ConfigProvider>  

查看更多示例

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

核心代码：

 <ConfigProvider theme={customTheme}>   <Badge value="NEW">     <Avatar icon="my" shape="square" />   </Badge> </ConfigProvider>  0

查看更多示例

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

核心代码：

 <ConfigProvider theme={customTheme}>   <Badge value="NEW">     <Avatar icon="my" shape="square" />   </Badge> </ConfigProvider>  1

查看更多示例

Progress：支持进度条颜色配置

核心代码：

 <ConfigProvider theme={customTheme}>   <Badge value="NEW">     <Avatar icon="my" shape="square" />   </Badge> </ConfigProvider>  2

查看更多示例

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

核心代码：

 <ConfigProvider theme={customTheme}>   <Badge value="NEW">     <Avatar icon="my" shape="square" />   </Badge> </ConfigProvider>  3

查看更多示例

SearchBar：可设置图标大小

核心代码：

 <ConfigProvider theme={customTheme}>   <Badge value="NEW">     <Avatar icon="my" shape="square" />   </Badge> </ConfigProvider>  4

查看更多示例

Steps: 点状横向进度条

核心代码：

 <ConfigProvider theme={customTheme}>   <Badge value="NEW">     <Avatar icon="my" shape="square" />   </Badge> </ConfigProvider>  5

查看更多示例

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

核心代码：

 <ConfigProvider theme={customTheme}>   <Badge value="NEW">     <Avatar icon="my" shape="square" />   </Badge> </ConfigProvider>  6

查看更多示例

Tabs：左对齐

核心代码：

 <ConfigProvider theme={customTheme}>   <Badge value="NEW">     <Avatar icon="my" shape="square" />   </Badge> </ConfigProvider>  7

查看更多示例

加入我们

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

赶紧加入我们吧！！