作者：京东批发 佟恩
NutUI 是一款京东格调的挪动端组件库。NutUI 目前反对 Vue 和 React技术栈，反对Taro多端适配。 本次，是2月的一个示例输入，心愿对你有帮忙！
2月，咱们对组件交互、issue修复、减少示例上做了急行军，共合并70+PR，修复近40个issue。这里咱们选取一些组件的新增示例，供您参考！
期待您早日成为咱们共建大军中的一员！
微信群：hanyuxinting（暗号：NutUI-React）
官网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款式
外围代码：
<Popover visible={showIcon} onClick={() => { showIcon ? setShowIcon(false) : setShowIcon(true) }} list={iconItemList}></Popover>查看更多示例
PopUp：反对图标自定义+尺寸设置
外围代码：
<Popup closeable closeIconSize="16px" closeIcon="heart" position="bottom" onClose={() => { setShowIconDefine(false) }}/>查看更多示例
Progress：反对进度条色彩配置
外围代码：
<Progress percentage={30} fillColor="rgba(250,44,25,0.2)" strokeColor="rgba(250,44,25,0.9)" strokeWidth="15" textColor="red"/>查看更多示例
Radio：选项值多行展现、反对换行
外围代码：
<Radio.RadioGroup value="1"> <Radio value="1" iconName="checklist" iconActiveName="checklist"> 我是题目 </Radio> <Radio value="2" iconName="checklist" iconActiveName="checklist"> <div>我是题目</div> <div style={{ fontSize: '12px', color: '#8c8c8c' }}> 我是形容 </div> </Radio></Radio.RadioGroup><Radio.RadioGroup value="1" direction="horizontal"> <Radio value="1">选项1</Radio> <Radio value="2"> 选项选项选项2 </Radio> <Radio value="3">选项3</Radio></Radio.RadioGroup>查看更多示例
SearchBar：可设置图标大小
外围代码：
<SearchBar leftoutIcon={<Icon name="heart-fill1" size="16" />} rightoutIcon={<Icon name="star-fill" size="14" />} rightinIcon={<Icon name="star-fill" size="14" />}/>查看更多示例
Steps: 点状横向进度条
外围代码：
<Steps current={stepState.current1} progressDot onClickStep={handleClickStep}> <Step activeIndex={1}>1</Step> <Step activeIndex={2}>2</Step> <Step activeIndex={3}>3</Step></Steps>查看更多示例
TabBar：初始选中状态、只配图片
外围代码：
<Tabbar visible={0} activeVisible={activeIndex} onSwitch={(child, id) => { setActiveIndex(id) }}> <TabbarItem tabTitle={translated.c3a3a1d2} icon="home" /> <TabbarItem tabTitle={translated.d04fcbda} icon="category" /> <TabbarItem icon="find" iconSize={24} /> <TabbarItem tabTitle={translated['7db1a8b2']} icon="cart" /> <TabbarItem tabTitle={translated.e51e4582} icon="my" /></Tabbar>查看更多示例
Tabs：左对齐
外围代码：
<Tabs value={tab1value} leftAlign onChange={({ paneKey }) => { setTab1value(paneKey) }}> <TabPane title="Tab 1" className="custom-class"> {' '} Tab 1{' '} </TabPane> <TabPane title="Tab 2"> Tab 2 </TabPane> <TabPane title="Tab 3"> Tab 3 </TabPane></Tabs>查看更多示例
退出咱们
再次期待您早日成为咱们共建大军中的一员！
一起共建，一起应用！
做站内最优良的开源组件库！
连忙退出咱们吧！！