2023年3月，NutUI-React 更新了这些示例，值得关注！【更新中，欢迎补充】

[xiaoyatong]

3月，我们对组件交互、issue修复、增加示例上做了更多的努力，共合并x+PR，修复近x个issue。这里我们选取一些组件的新增示例，供您参考：

[irisSong]

Table组件-支持排序替换ICON

核心代码

import  React, { useState } from "react";
import { Table, Button } from '@nutui/nutui-react';
import { TriangleDown } from '@nutui/icons-react'

const App = () => {
  const [data5, setData5] = useState([
    {
      name: 'Tom',
      sex: '男',
      record: '小学',
      age: 10,
    },
    {
      name: 'Lucy',
      sex: '女',
      record: '本科',
      age: 30,
    },
    {
      name: 'Jack',
      sex: '男',
      record: '高中',
      age: 4,
    },
  ])

   const [columns5, setColumns5] = useState<Array<TableColumnProps>>([
    {
      title: '姓名',
      key: 'name',
      align: 'center',
      sorter: true,
    },
    {
      title: '性别',
      key: 'sex',
    },
    {
      title: '学历',
      key: 'record',
    },
    {
      title: '年龄',
      key: 'age',
      sorter: (row1: any, row2: any) => {
        return row1.age - row2.age
      },
    },
  ])
  
  const handleSorter = (item: TableColumnProps, data: Array<any>) => {
    Toast.text(`${JSON.stringify(item)}`)
    setData5([...data])
  }

  return <Table
          columns={columns5}
          data={data5}
          onSorter={handleSorter}
          style={{ background: '#fff' }}
          sorterIcon={<TriangleDown width="12px" height="12px" />}
        />;
};
export default App;

查看Table组件更多示例

[irisSong]

DatePicker组件-选择时分

核心代码

import  React, { useState  } from "react";
import { DatePicker,Cell  } from '@nutui/nutui-react';
const App = () => {
  const minDate = new Date(2020, 0, 1)
  const maxDate = new Date(2025, 10, 1)
  const [show8, setShow8] = useState(false)
  const [desc8, setDesc8] = useState('10:10')
  const confirm4 = (values:(string|number)[],options:PickerOption[])=>{
    setDesc4(options.map((option) => option.text).join(':'))
  }
  return ( 
    <>   
      <Cell title="时间选择" desc={desc8} onClick={() => setShow8(true)} />
      <DatePicker
          title="时间选择"
          type="hour-minutes"
          minDate={minDate}
          maxDate={maxDate}
          visible={show8}
          onCloseDatePicker={() => setShow8(false)}
          onConfirmDatePicker={(values,options) => confirm8(values,options)}
        />
    </>
  );
};  
export default App;

查看DatePicker更多示例

[oasis-cloud]

Button组件-支持 color 属性设置 rgba

核心代码

import React from "react";
import { Button } from '@nutui/nutui-react';

const App = () => {
  return (
    <>
      <Button color="rgba(10,101,208,0.75)">单色按钮</Button>
    </>
  );
};
export default App;

查看Button更多示例

[junjun666]

Form 表单 - 支持Radio默认值

核心代码

import  React from "react";
import { Form, Input, Cell } from '@nutui/nutui-react';

const App = () => {
  const [form] = Form.useForm()
  const onMenuChange = (value: string | number | boolean) => {
    switch (value) {
      case 'male':
        form.setFieldsValue({ note: 'Hi, man!' })
        break
      case 'female':
        form.setFieldsValue({ note: 'Hi, lady!' })
        break
      case 'other':
        form.setFieldsValue({ note: 'Hi there!' })
        break
      default:
    }
  }
  return (
    <>
      <Form
        form={form}
        onFinish={(obj) => submitSucceed(obj)}
        onFinishFailed={(error) => submitFailed(error)}
      >
        <Form.Item
          label={translated.name}
          name="username"
          rules={[{ required: true, message: translated.nameTip }]}
        >
          <Input placeholder={translated.nameTip1} type="text" />
        </Form.Item>
        <Form.Item label="标注" name="note">
          <Input placeholder="请输入标注" type="string" />
        </Form.Item>
        <Form.Item label={translated.radiogroup} name="radiogroup">
          <Radio.RadioGroup value="female" onChange={onMenuChange}>
            <Radio value="male">male</Radio>
            <Radio value="female">female</Radio>
            <Radio value="other">other</Radio>
          </Radio.RadioGroup>
        </Form.Item>
        <Cell>
          <input type="submit" value={translated.submit} />
        </Cell>
      </Form>
    </>
  )
}

export default App;

查看Form组件更多示例

[oasis-cloud]

Checkbox组件-支持跨层级嵌套

核心代码

import React from "react";
import { Checkbox } from '@nutui/nutui-react';

const App = () => {
  return (<>
      <Checkbox.Group textPosition="left" checkedValue='选项1'>
        <span>
          <Checkbox label='选项1' checked={false} />
        </span>
        <Checkbox label='选项2' checked={false} />
        <Checkbox label='选项3' checked={false} />
      </Checkbox.Group>
    </>
  )
}
export default App;

查看Checkbox更多示例

[junjun666]

Cell 单元格 - 保证左右文案不挤压和长英文字符换行

核心代码

import  React from "react";
import { Cell } from '@nutui/nutui-react';

const App = () => {
  return (
    <>
    <Cell title="我是标题我是标题我是标题我是标题我是标题我是标题" desc="adedasxnakdnkadnxkasnxkanskxnaskdnak" />
    </>
  );
};
export default App;

查看Cell组件更多示例