作者：京东零售 佟恩

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