NutUI-React 京東移動端組件庫 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="https://www.cnblogs.com/Jcloud/archive/2023/03/16/NEW">
    <Avatar icon="my" shape="square" />
  </Badge>
</ConfigProvider>

查看Badge更多示例

Calendar：日期頂部和底部可配置內容

核心代碼：

const onTopInfo = () => {
    return (
        t
    )
}
const onBottomInfo = () => {
    return (
        b
    )
}

<Calendar
    visible={isVisible3}
    defaultValue=https://www.cnblogs.com/Jcloud/archive/2023/03/16/{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=https://www.cnblogs.com/Jcloud/archive/2023/03/16/{[]}
 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=https://www.cnblogs.com/Jcloud/archive/2023/03/16/{inputState.val5} />

查看更多示例

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)"
  stroke
  textColor="red"
/>

查看更多示例

Radio：選項值多行展示、支持換行

核心代碼：

<Radio.RadioGroup value="https://www.cnblogs.com/Jcloud/archive/2023/03/16/1">
  <Radio value="https://www.cnblogs.com/Jcloud/archive/2023/03/16/1" iconName="checklist" iconActiveName="checklist">
    我是標題
  </Radio>
  <Radio value="https://www.cnblogs.com/Jcloud/archive/2023/03/16/2" iconName="checklist" iconActiveName="checklist">
    <div>我是標題</div>
    <div style={{ fontSize: '12px', color: '#8c8c8c' }}>
      我是描述
    </div>
  </Radio>
</Radio.RadioGroup>

<Radio.RadioGroup value="https://www.cnblogs.com/Jcloud/archive/2023/03/16/1" direction="horizontal">
  <Radio value="https://www.cnblogs.com/Jcloud/archive/2023/03/16/1">選項1</Radio>
  <Radio value="https://www.cnblogs.com/Jcloud/archive/2023/03/16/2">
    選項選項選項2
  </Radio>
  <Radio value="https://www.cnblogs.com/Jcloud/archive/2023/03/16/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=https://www.cnblogs.com/Jcloud/archive/2023/03/16/{tab1value}
  leftAlign
  onChange={({ paneKey }) => {
    setTab1value(paneKey)
  }}
>