2023年5月，NutUI-React 更新了这些示例，值得关注！

[eiinu]

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

[eiinu]

Button 组件-填充模式

核心代码

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

const App = () => {
  return (
    <>
      <Button fill="solid">Solid</Button>
      <Button fill="outline">Outline</Button>
      <Button fill="none">None</Button>
    </>
  );
};
export default App;

查看 Button 组件更多示例

[eiinu]

Grid 组件-内容横向+翻转

核心代码

import React from 'react'
import { Grid } from '@nutui/nutui-react'
import { Dongdong } from '@nutui/icons-react'

const App = () => {
  return (
    <Grid reverse direction="horizontal">
      <Grid.Item text="文字"><Dongdong /></Grid.Item>
      <Grid.Item text="文字"><Dongdong /></Grid.Item>
      <Grid.Item text="文字"><Dongdong /></Grid.Item>
      <Grid.Item text="文字"><Dongdong /></Grid.Item>
    </Grid>
  )
}
export default App

查看 Grid 组件更多示例

[eiinu]

Elevator 组件-不展示右侧导航

核心代码

import React from 'react'
import { Elevator } from '@nutui/nutui-react'

const App = () => {
  const dataList = []
  return (
    <Elevator
      pagation={false}
      list={dataList}
      height="260"
    />
  )
}
export default App

查看 Elevator 组件更多示例

[eiinu]

NumberKeyboard 组件-透传 Popup 属性

核心代码

import React, { useState } from "react";
import { Cell, NumberKeyboard, Toast } from '@nutui/nutui-react';

const App = () => {
  const [visible, setVisible] = useState(false)
  const onChange = (number: string) => {
    Toast.show(`enter:${number}`)
  }
  const onDelete = () => {
    Toast.show('delete')
  }
  return (
    <>
      <Cell
        title="Show IdNumber Keyboard"
        onClick={() => setVisible(true)}
      />
      <NumberKeyboard
        visible={visible}
        onChange={onChange}
        onDelete={onDelete}
        onClose={() => setVisible(false)}
        duration={1}
        overlayClassName="number-keyboard-overlay"
        onOpen={() => {
          Toast.show('onOpen')
        }}
      />
    </>
  )
}
export default App;

查看 NumberKeyboard 组件更多示例

[eiinu]

Range 组件-受控方式

核心代码

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

const App = () => {
  const cellStyle = {
    padding: '40px 18px',
  };
  const [value, setValue] = useState(40)
  return <Cell style={{cellStyle}}>
    <Range value={value} onChange={(val) => setValue(val)} />
  </Cell>
};
export default App;

查看 Range 组件更多示例

[eiinu]

Search 组件-自定义设置

核心代码

import React from "react";
import { SearchBar, PopOver } from '@nutui/nutui-react';
import {  ArrowDown } from '@nutui/icons-react'

const App = () => {
  return <>
    <SearchBar
      leftIn={
        <PopOver
          visible={lightTheme}
          onClick={() => {
            lightTheme ? setLightTheme(false) : setLightTheme(true)
          }}
          list={itemList}
        >
          <div style={{ fontSize: '12px', width: '50px', display: 'flex' }}>
            更多
            <ArrowDown />
          </div>
        </PopOver>
      }
    />
  </>
}
export default App;

查看 SearchBar 组件更多示例

[eiinu]

ShortPassword 组件-展示明文

核心代码

import React, { useState } from "react";
import { Cell, ShortPassword, NumberKeyboard } from '@nutui/nutui-react';

const App = () => {
  const [visible2, setVisible2] = useState(false)
  const [visible, setVisible] = useState(false)
  const [value, setValue] = useState('')
  const onChange = (v: string) => {
    setValue((value) => value + v)
  }
  const onDelete = () => {
    setValue((value) => value.slice(0, -1))
  }
  return (
    <>
      <Cell title="显示明文" onClick={() => setVisible2(true)} />
      <ShortPassword
        visible={visible2}
        value={value}
        plain
        onFocus={() => setVisible(true)}
        onClose={() => {
          setVisible2(false)
          setValue('')
        }}
        onChange={(value) => setValue(value)}
      />
      <NumberKeyboard
        visible={visible}
        onClose={() => setVisible(false)}
        onChange={onChange}
        onDelete={onDelete}
      />
    </>
  )
}
export default App;

查看 ShortPassword 组件更多示例

[eiinu]

ActionSheet 组件-自定义key

核心代码

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

const App = () => {
  const [isVisible6, setIsVisible6] = useState(false)
  const optionsFour: ItemType<string | boolean>[] = [
    {
      title: '着色选项',
      danger: true
    },
    {
      title: '禁用选项',
      disable: true,
    },
  ]
  const optionKey = {
    name: 'title',
  }
  return ( 
    <>   
      <Cell  onClick={() => setIsVisible6(!isVisible6)}>
        <span>自定义key</span>
      </Cell>
      <ActionSheet
        visible={isVisible6}
        optionKey={optionKey}
        options={optionsFour}
        onSelect={() => {
          setIsVisible6(false)
        }}
        onCancel={() => setIsVisible6(false)}
      />
    </>
  );
};  
export default App;

查看 ActionSheet 组件更多示例