作者:京东零售佟恩 NutUI是一款京东风格的移动端组件库。NutUI目前支持Vue和React技术栈,支持Taro多端适配。本次,是2月的一个示例输出,希望对你有帮助! 2月,我们对组件交互、issue修复、增加示例上做了急行军,共合并70PR,修复近40个issue。这里我们选取一些组件的新增示例。Badge:样式自定义 核心代码:constcustomTheme{nutuiBadgeBorderRadius:12px12px12px0,}ConfigProvidertheme{customTheme}BadgevalueNEWBadgeConfigProvider 查看Badge更多示例:https:nutui。jd。comh5react1xzhCNcomponentbadgeCalendar:日期顶部和底部可配置内容 核心代码:constonTopInfo(){return(t)}constonBottomInfo(){return(b)}Calendarvisible{isVisible3}defaultValue{date3}typerangeconfirmTextsubmitstartTextenterendTextleaveonTopInfo{onTopInfo}onBottomInfo{onBottomInfo} 查看更多示例:https:nutui。jd。comh5react1xzhCNcomponentCalendarCascader:可配置颜色、分割线、checkicon 核心代码:constcustomTheme{nutuiCascaderItemHeight:48px,nutuiCascaderItemMargin:010px,nutuiCascaderItemPadding:10px,nutuiCascaderItemBorderBottom:1pxsolidF0F0F0,}ConfigProvidertheme{customTheme}Cascadercolor3768FAtabsColor3768FAConfigProvider 查看更多示例:https:nutui。jd。comh5react1xzhCNcomponentCascaderCheckBox:增加横向布局、选项值多项展示 核心代码:Checkbox。GroupcheckedValue{〔〕}directionhorizontalCheckboxchecked{false}label1组合复选框CheckboxCheckboxchecked{false}label2组合复选框CheckboxCheckbox。Group 查看更多示例:https:nutui。jd。comh5react1xzhCNcomponentCheckBoxCollapse:自定义title、图标样式 核心代码:CollapseactiveName{〔1〕}accordioniconstarCollapseItemtitle标题1name1titleIconcheckedtitleIconSize16titleIconColorredtitleIconPositionleft京东NutUI组件库CollapseItemCollapseItemtitle标题2name2titleIconheartfilltitleIconColorredtitleIconPositionright京东NutUI组件库CollapseItemCollapseItemtitle标题3name3京东NutUI组件库CollapseItemCollapse 查看更多示例:https:nutui。jd。comh5react1xzhCNcomponentCollapseInputNumber:按钮样式可设置 核心代码:constcustomTheme{nutuiInputnumberButtonWidth:30px,nutuiInputnumberButtonHeight:30px,nutuiInputnumberButtonBorderRadius:2px,nutuiInputnumberButtonBackgroundColor:f4f4f4,nutuiInputnumberInputHeight:30px,nutuiInputnumberInputMargin:02px,}ConfigProvidertheme{customTheme}InputNumbermodelValue{inputState。val5}ConfigProvider 查看更多示例:https:nutui。jd。comh5react1xzhCNcomponentInputNumberPopOver:底部border可配置、支持hover样式 核心代码:Popovervisible{showIcon}onClick{(){showIcon?setShowIcon(false):setShowIcon(true)}}list{iconItemList}Popover 查看更多示例:https:nutui。jd。comh5react1xzhCNcomponentPopOverPopUp:支持图标自定义尺寸设置 核心代码:PopupcloseablecloseIconSize16pxcloseIconheartpositionbottomonClose{(){setShowIconDefine(false)}} 查看更多示例:https:nutui。jd。comh5react1xzhCNcomponentPopUpProgress:支持进度条颜色配置 核心代码:Progresspercentage{30}fillColorrgba(250,44,25,0。2)strokeColorrgba(250,44,25,0。9)strokeWidth15textColorred 查看更多示例:https:nutui。jd。comh5react1xzhCNcomponentProgressRadio:选项值多行展示、支持换行 核心代码:Radio。RadioGroupvalue1Radiovalue1iconNamechecklisticonActiveNamechecklist我是标题RadioRadiovalue2iconNamechecklisticonActiveNamechecklist我是标题我是描述RadioRadio。RadioGroupRadio。RadioGroupvalue1directionhorizontalRadiovalue1选项1RadioRadiovalue2选项选项选项2RadioRadiovalue3选项3RadioRadio。RadioGroup 查看更多示例:https:nutui。jd。comh5react1xzhCNcomponentRadioSearchBar:可设置图标大小 核心代码:SearchBarleftoutIcon{Iconnameheartfill1size16}rightoutIcon{Iconnamestarfillsize14}rightinIcon{Iconnamestarfillsize14} 查看更多示例:https:nutui。jd。comh5react1xzhCNcomponentSearchBarSteps:点状横向进度条 核心代码:Stepscurrent{stepState。current1}progressDotonClickStep{handleClickStep}StepactiveIndex{1}1StepStepactiveIndex{2}2StepStepactiveIndex{3}3StepSteps 查看更多示例:https:nutui。jd。comh5react1xzhCNcomponentStepsTabBar:初始选中状态、只配图片 核心代码:Tabbarvisible{0}activeVisible{activeIndex}onSwitch{(child,id){setActiveIndex(id)}}TabbarItemtabTitle{translated。c3a3a1d2}iconhomeTabbarItemtabTitle{translated。d04fcbda}iconcategoryTabbarItemiconfindiconSize{24}TabbarItemtabTitle{translated〔7db1a8b2〕}iconcartTabbarItemtabTitle{translated。e51e4582}iconmyTabbar 查看更多示例:https:nutui。jd。comh5react1xzhCNcomponentTabBarTabs:左对齐 核心代码:Tabsvalue{tab1value}leftAlignonChange{({paneKey}){setTab1value(paneKey)}}TabPanetitleTab1classNamecustomclass{}Tab1{}TabPaneTabPanetitleTab2Tab2TabPaneTabPanetitleTab3Tab3TabPaneTabs 查看更多示例:https:nutui。jd。comh5react1xzhCNcomponentTabs