Wondering what’s next for npm?Check out our public roadmap! »

@uiw/react-listTypeScript icon, indicating that this package has built-in type declarations

4.7.7 • Public • Published

List 列表

列表组件

import { List } from 'uiw';
// or
import List from '@uiw/react-list';

基础用法

import ReactDOM from 'react-dom';
import { List } from 'uiw';

const data = [
  '"X战警新变种人"首曝海报特写诡异人脸',
  '六大变五大?传迪士尼600亿收购福斯',
  '快跑!《侏罗纪世界2》正式预告要来了',
];
const Demo = () => (
  <div>
    <List header={<div>列表头部</div>} footer={<div>列表尾部</div>}>
      <List.Item>"X战警新变种人"首曝海报特写诡异人脸</List.Item>
      <List.Item>六大变五大?传迪士尼600亿收购福斯</List.Item>
      <List.Item>快跑!《侏罗纪世界2》正式预告要来了</List.Item>
    </List>
    <h4 style={{ margin: '16px 10px' }}>默认尺寸,没有头部和尾部</h4>
    <List
      dataSource={data}
      noHover
      renderItem={item => (<List.Item>{item}</List.Item>)}
    />
    <h4 style={{ margin: '16px 10px' }}>小尺寸</h4>
    <List
      size="small"
      header={<div>列表头部</div>} 
      footer={<div>列表尾部</div>}
      dataSource={data}
      renderItem={item => (<List.Item>{item}</List.Item>)}
    />
    <h4 style={{ margin: '16px 10px' }}>大尺寸</h4>
    <List
      size="large"
      header={<div>列表头部</div>} 
      footer={<div>列表尾部</div>}
      dataSource={data}
      renderItem={item => (<List.Item>{item}</List.Item>)}
    />
  </div>
)
ReactDOM.render(<Demo />, _mount_);

特殊方法

通过dataSourcerenderItem来创建列表,这两个属性是一起使用。

import ReactDOM from 'react-dom';
import { List } from 'uiw';

const data = [
  '"X战警新变种人"首曝海报特写诡异人脸',
  '六大变五大?传迪士尼600亿收购福斯',
  <span>快跑!《侏罗纪世界2》正式预告要来了</span>,
];
const Demo = () => (
  <List
    header={<div>列表头部</div>}
    footer={<div>列表尾部</div>}
    dataSource={data}
    renderItem={item => {
      return (<List.Item>{item}</List.Item>);
    }}
  />
)
ReactDOM.render(<Demo />, _mount_);

禁用行

import ReactDOM from 'react-dom';
import { List } from 'uiw';

const data = [
  {
    'content': '"X战警新变种人"首曝海报特写诡异人脸'
  },
  {
    'content': '六大变五大?传迪士尼600亿收购福斯'
  },
  {
    'disabled': true,
    'content': '快跑!《侏罗纪世界2》正式预告要来了'
  },
];
class Demo extends React.Component {
  onClick(item,index,e){
    e.stopPropagation();
    console.log('item',item,e);
  }
  render() {
    return (
      <List
        header={<div>列表头部</div>}
        footer={<div>列表尾部</div>}
        dataSource={data}
        renderItem={(item,index) => {
          return (
            <List.Item onClick={this.onClick.bind(this, item, index)} disabled={item.disabled}>
              {item.content}
            </List.Item>
          );
        }}
      />
    )
  }
}
ReactDOM.render(<Demo />, _mount_);

行激活

List.Item 设置 active 属性即可设置这张被激活的样式。

import ReactDOM from 'react-dom';
import { List } from 'uiw';

const Demo = () => (
  <List size="small" header={<div>列表头部</div>} footer={<div>列表尾部</div>}>
    <List.Item active>"X战警新变种人"首曝海报特写诡异人脸</List.Item>
    <List.Item>六大变五大?传迪士尼600亿收购福斯</List.Item>
    <List.Item>快跑!《侏罗纪世界2》正式预告要来了</List.Item>
  </List>
)
ReactDOM.render(<Demo />, _mount_);

斑马线

import ReactDOM from 'react-dom';
import { List } from 'uiw';

const data = [
  '人总是在接近幸福时倍感幸福,在幸福进行时却患得患失。',
  '因为爱过,所以慈悲;因为懂得,所以宽容。',
  '你如果认识从前的我,也许你会原谅现在的我。',
  <span>你还不来,我怎敢老去。</span>,
];
const Demo = () => (
  <List
    dataSource={data}
    striped={true}
    size="small"
    renderItem={item => {
      return (<List.Item>{item}</List.Item>);
    }}
  />
)
ReactDOM.render(<Demo />, _mount_);

列表为超链接

List.Item 设置了 hrefList.Item就可以设置标签<a>的所有属性了。

import ReactDOM from 'react-dom';
import { List } from 'uiw';

const data = [
  {
    'href':'#/components',
    'content': '"X战警新变种人"首曝海报特写诡异人脸'
  },
  {
    'target':'_blank',
    'href':'https://uiw-react.github.io/icons/',
    'content': '从uiw组件库中抽离出来的,图标字体 uiw-iconfont 发布'
  },
  {
    'href':'#/components',
    'disabled': true,
    'content': '快跑!《侏罗纪世界2》正式预告要来了'
  },
];
const Demo = () => (
  <List
    header={<div>列表头部</div>}
    footer={<div>列表尾部</div>}
    dataSource={data}
    renderItem={(item, index) => {
      return (
        <List.Item {...item}>
          {item.content}
        </List.Item>
      );
    }}
  />
)
ReactDOM.render(<Demo />, _mount_);

展示额外内容

List.Item 设置了 extraList.Item 就可以设置右侧内容。

import ReactDOM from 'react-dom';
import { List } from 'uiw';

const data = [
  {
    'extra': '内容',
    'content': '"X战警新变种人"首曝海报特写诡异人脸'
  },
  {
    'extra': '内容',
    'content': '从uiw组件库中抽离出来的,图标字体 uiw-iconfont 发布'
  },
  {
    'href':'#/components',
    'disabled': true,
    'extra': '内容',
    'content': '快跑!《侏罗纪世界2》正式预告要来了'
  },
];
const Demo = () => (
  <List
    header={<div>列表头部</div>}
    footer={<div>列表尾部</div>}
    dataSource={data}
    renderItem={(item, index) => {
      return (
        <List.Item {...item}>
          {item.content}
        </List.Item>
      );
    }}
  />
)
ReactDOM.render(<Demo />, _mount_);

List

参数 说明 类型 默认值
size 设置行尺寸,分别大、中、小三种尺寸 Enum{small,default,large} default
bordered 是否展示边框 Boolean true
noHover 取消鼠标移过时边框阴影 Boolean false
active 激活列表,鼠标经过边框阴影效果 Boolean false
striped 斑马线效果 Boolean false
footer 列表底部 String/ReactNode -
header 列表头部 String/ReactNode -
dataSource 是否展示边框 Boolean -
renderItem 通过毁掉函数返回Dome,渲染列表每个行 Function(item,index) -

List.Item

参数 说明 类型 默认值
active 激活 Boolean false
extra 额外内容,展示右侧内容 React.ReactNode -
disabled 禁用 Boolean false
tagName 设置子节点标签名,默认 <div /> 标签,也可以指定路由 <Link /> String/Link div
href 规定链接的目标,值存在并且 tagNameString 时候是个超链接,在超链接上加 href 的值就是你传进来的 href值,此时将可以设置标签<a>的所有属性。 Boolean/String false

其它参数可根据 tagName 来设置,设置 tagName="a" 标签时,可设置 href="https://github.com" 或者 target="_blank" 等参数,你可以设置 react-router-dom 路由 <Link>,例如:

import { List } from 'uiw';
import { Link } from 'react-router-dom';

const Demo = () => {
  return (
    <List>
      <List.Item tagName={Link} to="/home">"X战警新变种人"首曝海报特写诡异人脸</List.Item>
      <List.Item>六大变五大?传迪士尼600亿收购福斯</List.Item>
    </List>
  )
}

Install

npm i @uiw/react-list

DownloadsWeekly Downloads

358

Version

4.7.7

License

MIT

Unpacked Size

46.1 kB

Total Files

21

Last publish

Collaborators

  • avatar