NutUI-React 京东移动端组件库 2月份上新！欢迎运用！
作者：京东零售 佟恩
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>
检查更多示例
参加咱们
再次等待您提前成为咱们共建大军中的一员！
一同共建，一同运用！
做站内最优异的开源组件库！
赶忙参加咱们吧！！
