关于react.js:NutUIReact-京东移动端组件库-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>

查看更多示例

退出咱们

再次期待您早日成为咱们共建大军中的一员！
一起共建，一起应用！
做站内 最优良 的开源组件库！

连忙退出咱们吧！！