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

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

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

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 }/>

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

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

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

<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>

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

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

<Popover  visible={showIcon}  onClick={() => {    showIcon ? setShowIcon(false) : setShowIcon(true)  }}  list={iconItemList}></Popover>

<Popup  closeable  closeIconSize="16px"  closeIcon="heart"  position="bottom"  onClose={() => {    setShowIconDefine(false)  }}/>

<Progress  percentage={30}  fillColor="rgba(250,44,25,0.2)"  strokeColor="rgba(250,44,25,0.9)"  strokeWidth="15"  textColor="red"/>

<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  leftoutIcon={<Icon name="heart-fill1" size="16" />}  rightoutIcon={<Icon name="star-fill" size="14" />}  rightinIcon={<Icon name="star-fill" size="14" />}/>

<Steps  current={stepState.current1}  progressDot  onClickStep={handleClickStep}>  <Step activeIndex={1}>1</Step>  <Step activeIndex={2}>2</Step>  <Step activeIndex={3}>3</Step></Steps>

<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  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>