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

京东云开发者
• 阅读 325

作者:京东零售 佟恩

NutUI 是一款京东风格的移动端组件库。NutUI 目前支持 Vue 和 React技术栈,支持Taro多端适配。 本次,是2月的一个示例输出,希望对你有帮助!

2月,我们对组件交互、issue修复、增加示例上做了急行军,共合并70+PR,修复近40个issue。这里我们选取一些组件的新增示例,供您参考!

期待您早日成为我们共建大军中的一员!

微信群:hanyuxinting(暗号:NutUI-React)

官网GitHub:点击进入

欢迎共建、使用!

Badge:样式自定义

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

核心代码:

const customTheme = {
  nutuiBadgeBorderRadius: '12px 12px 12px 0',
}
<ConfigProvider theme={customTheme}>
  <Badge value="NEW">
    <Avatar icon="my" shape="square" />
  </Badge>
</ConfigProvider>

查看Badge更多示例

Calendar:日期顶部和底部可配置内容

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

核心代码:

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

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

核心代码:

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

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

查看更多示例

CheckBox:增加横向布局、选项值多项展示

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

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

核心代码:

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

查看更多示例

Collapse: 自定义title、图标样式

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

核心代码:

<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: 按钮样式可设置

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

核心代码:

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

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

核心代码:

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

查看更多示例

PopUp:支持图标自定义+尺寸设置

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

核心代码:

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

查看更多示例

Progress:支持进度条颜色配置

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

核心代码:

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

查看更多示例

Radio:选项值多行展示、支持换行

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

核心代码:

<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:可设置图标大小

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

核心代码:

<SearchBar
  leftoutIcon={<Icon name="heart-fill1" size="16" />}
  rightoutIcon={<Icon name="star-fill" size="14" />}
  rightinIcon={<Icon name="star-fill" size="14" />}
/>

查看更多示例

Steps: 点状横向进度条

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

核心代码:

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

查看更多示例

TabBar:初始选中状态、只配图片

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

核心代码:

<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:左对齐

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

核心代码:

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

查看更多示例

加入我们

再次期待您早日成为我们共建大军中的一员!
一起共建,一起使用!
做站内最优秀的开源组件库!

赶紧加入我们吧!!

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Wesley13 Wesley13
3年前
PPDB:今晚老齐直播
【今晚老齐直播】今晚(本周三晚)20:0021:00小白开始“用”飞桨(https://www.oschina.net/action/visit/ad?id1185)由PPDE(飞桨(https://www.oschina.net/action/visit/ad?id1185)开发者专家计划)成员老齐,为深度学习小白指点迷津。
Wesley13 Wesley13
3年前
VBox 启动虚拟机失败
在Vbox(5.0.8版本)启动Ubuntu的虚拟机时,遇到错误信息:NtCreateFile(\\Device\\VBoxDrvStub)failed:0xc000000034STATUS\_OBJECT\_NAME\_NOT\_FOUND(0retries) (rc101)Makesurethekern
Wesley13 Wesley13
3年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300(0x012C),那么在FLV文件中存放的顺序是:|0x01|0x2C|。如果是无符号32位数字300(0x0000012C),那么在FLV文件中的存放顺序是:|0x00|0x00|0x00|0x01|0x2C。2.  
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
PHP创建多级树型结构
<!lang:php<?php$areaarray(array('id'1,'pid'0,'name''中国'),array('id'5,'pid'0,'name''美国'),array('id'2,'pid'1,'name''吉林'),array('id'4,'pid'2,'n
Wesley13 Wesley13
3年前
Java日期时间API系列36
  十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰。二十四小时和十二时辰对照表:时辰时间24时制子时深夜11:00凌晨01:0023:0001:00丑时上午01:00上午03:0001:0003:00寅时上午03:00上午0
Stella981 Stella981
3年前
Jenkins 插件开发之旅:两天内从 idea 到发布(上篇)
本文首发于:Jenkins中文社区(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fjenkinszh.cn)!huashan(https://oscimg.oschina.net/oscnet/f499d5b4f76f20cf0bce2a00af236d10265.jpg)
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_