NutUI-React 2月份上新!
source link: https://jelly.jd.com/article/63f6d2903519850b21108da3
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
2月,我们对组件交互、issue修复、增加示例上做了急行军,共合并70+PR,修复近40个issue。这里我们选取一些组件的新增示例,供您参考!
期待您早日成为我们共建大军中的一员!
咚咚群号:1025679314
微信群:hanyuxinting(暗号:NutUI-React)
官网GitHub: https://github.com/jdf2e/nutui-react
欢迎共建、使用!
Badge:样式自定义
<img width="362" alt="image" src="https://user-images.githubusercontent.com/84436086/220606841-1be96998-0381-4371-ac7d-6ebc1f3c27d4.png">
核心代码:
const customTheme = {
nutuiBadgeBorderRadius: '12px 12px 12px 0',
}
<ConfigProvider theme={customTheme}>
<Badge value="NEW">
<Avatar icon="my" shape="square" />
</Badge>
</ConfigProvider>
Calendar:日期顶部和底部可配置内容
<img width="375" alt="image" src="https://user-images.githubusercontent.com/84436086/220607736-b97c1586-317a-4905-abe3-40b7b469391c.png">
核心代码:
const onTopInfo = () => {
return (
<span>t</span>
)
}
const onBottomInfo = () => {
return (
<span>b</span>
)
}
<Calendar
visible={isVisible3}
defaultValue={date3}
type="range"
confirmText="submit"
startText="enter"
endText="leave"
onTopInfo={onTopInfo }
onBottomInfo={onBottomInfo }
/>
Cascader:可配置颜色、分割线、check icon
<img width="373" alt="image" src="https://user-images.githubusercontent.com/84436086/220608065-2cb3c073-5385-43a3-b49d-4b6e9090c11a.png">
核心代码:
const customTheme = {
nutuiCascaderItemHeight: '48px',
nutuiCascaderItemMargin: '0 10px',
nutuiCascaderItemPadding: '10px',
nutuiCascaderItemBorderBottom: '1px solid #F0F0F0',
}
<ConfigProvider theme={customTheme}>
<Cascader
color="#3768FA"
tabsColor="#3768FA"
/>
</ConfigProvider>
CheckBox:增加横向布局、选项值多项展示
<img width="362" alt="image" src="https://user-images.githubusercontent.com/84436086/220608881-a860d2e0-3b15-42d2-9496-cc46101edaa6.png">
<img width="359" alt="image" src="https://user-images.githubusercontent.com/84436086/220608447-beeb462e-b385-4e27-996a-e0106e948c84.png">
核心代码:
<Checkbox.Group
checkedValue={[]}
direction="horizontal"
>
<Checkbox checked={false} label="1">
组合复选框
</Checkbox>
<Checkbox checked={false} label="2">
组合复选框
</Checkbox>
</Checkbox.Group>
Collapse: 自定义title、图标样式
<img width="360" alt="image" src="https://user-images.githubusercontent.com/84436086/220606649-dcdc6eff-c461-47cb-8dc1-57367dc4b318.png">
核心代码:
<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: 按钮样式可设置
<img width="360" alt="image" src="https://user-images.githubusercontent.com/84436086/220605867-02fbe61e-d04e-47b0-bcbd-b846acd0a27e.png">
核心代码:
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样式
<img width="379" alt="image" src="https://user-images.githubusercontent.com/84436086/220605627-000812cd-6ed7-4ad6-bc57-a42f69c7cc00.png">
核心代码:
<Popover
visible={showIcon}
onClick={() => {
showIcon ? setShowIcon(false) : setShowIcon(true)
}}
list={iconItemList}
>
</Popover>
PopUp:支持图标自定义+尺寸设置
<img width="374" alt="image" src="https://user-images.githubusercontent.com/84436086/220603922-97f3cefc-3110-4827-b7a0-300e6d6f838f.png">
核心代码:
<Popup
closeable
closeIconSize="16px"
closeIcon="heart"
position="bottom"
onClose={() => {
setShowIconDefine(false)
}}
/>
Progress:支持进度条颜色配置
<img width="371" alt="image" src="https://user-images.githubusercontent.com/84436086/220603554-5f0b7931-4922-4807-9fad-e621b3053346.png">
核心代码:
<Progress
percentage={30}
fillColor="rgba(250,44,25,0.2)"
strokeColor="rgba(250,44,25,0.9)"
strokeWidth="15"
textColor="red"
/>
Radio:选项值多行展示、支持换行
<img width="361" alt="image" src="https://user-images.githubusercontent.com/84436086/220602710-72cd7c5e-a2d2-4a57-a1f4-f47a1102c4db.png"> <img width="363" alt="image" src="https://user-images.githubusercontent.com/84436086/220605119-25307925-a07b-428a-bd63-a8b50d27b6a9.png">
核心代码:
<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:可设置图标大小
<img width="357" alt="image" src="https://user-images.githubusercontent.com/84436086/220602849-c446dc1e-ad23-4b3d-97a3-c80811cd5f5b.png">
核心代码:
<SearchBar
leftoutIcon={<Icon name="heart-fill1" size="16" />}
rightoutIcon={<Icon name="star-fill" size="14" />}
rightinIcon={<Icon name="star-fill" size="14" />}
/>
Steps: 点状横向进度条
<img width="358" alt="image" src="https://user-images.githubusercontent.com/84436086/220607050-95103953-9320-4d82-aeb0-12053c5c19e7.png"> <img width="357" alt="image" src="https://user-images.githubusercontent.com/84436086/220607181-e654ade4-630f-4cfc-8e89-b3207738c6b6.png">
核心代码:
<Steps
current={stepState.current1}
progressDot
onClickStep={handleClickStep}
>
<Step activeIndex={1}>1</Step>
<Step activeIndex={2}>2</Step>
<Step activeIndex={3}>3</Step>
</Steps>
TabBar:初始选中状态、只配图片
<img width="358" alt="image" src="https://user-images.githubusercontent.com/84436086/220601731-9a3a8a12-ab6f-4510-abef-c23a393ded7c.png">
核心代码:
<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:左对齐
<img width="364" alt="image" src="https://user-images.githubusercontent.com/84436086/220604826-8c991d73-1a47-46bf-a0f5-01385a68d122.png"> <img width="366" alt="image" src="https://user-images.githubusercontent.com/84436086/220604969-c56213fc-f2ef-48ea-8f2e-74028cd431ff.png">
核心代码:
<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>
再次期待您早日成为我们共建大军中的一员! 一起共建,一起使用! 做站内最优秀的开源组件库!
咚咚群号:1025679314
赶紧加入我们吧!!
更多文章:
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK