List component
npm install @uiw/react-listList 列表
===
列表组件
``jsx
import { List } from 'uiw';
import { ListItem } from 'uiw'; // @ v4.10.0+
// or
import List from '@uiw/react-list';
import List, { ListItem } from '@uiw/react-list'; // @ v4.10.0+
// List.Item === ListItem
`
`jsx mdx:preview
import React from 'react';
import { List } from 'uiw';
const data = [
'"X战警新变种人"首曝海报特写诡异人脸',
'六大变五大？传迪士尼600亿收购福斯',
'快跑!《侏罗纪世界2》正式预告要来了',
];
const Demo = () => (
$3
通过
和renderItem来创建列表，这两个属性是一起使用。`jsx mdx:preview
import React from 'react';
import { List } from 'uiw';const data = [
'"X战警新变种人"首曝海报特写诡异人脸',
'六大变五大？传迪士尼600亿收购福斯',
快跑!《侏罗纪世界2》正式预告要来了,
];
const Demo = () => (
列表头部}
footer={列表尾部}
dataSource={data}
renderItem={item => {
return ({item} );
}}
/>
)
export default Demo
`$3
jsx mdx:preview
import React from 'react';
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 (
列表头部}
footer={列表尾部}
dataSource={data}
renderItem={(item,index) => {
return (
{item.content}
);
}}
/>
)
}
}
export default Demo
`$3
设置 active 属性即可设置这张被激活的样式。`jsx mdx:preview
import React from 'react';
import { List } from 'uiw';const Demo = () => (
列表头部
$3
jsx mdx:preview
import React from 'react';
import { List } from 'uiw';const data = [
'人总是在接近幸福时倍感幸福，在幸福进行时却患得患失。',
'因为爱过，所以慈悲；因为懂得，所以宽容。',
'你如果认识从前的我，也许你会原谅现在的我。',
你还不来，我怎敢老去。,
];
const Demo = () => (
striped={true}
size="small"
renderItem={item => {
return ({item} );
}}
/>
)
export default Demo
`$3
设置了 href，List.Item就可以设置标签的所有属性了。`jsx mdx:preview
import React from 'react';
import { List } from 'uiw';const data = [
{
'href':'#/components',
'content': '"X战警新变种人"首曝海报特写诡异人脸'
},
{
'target':'_blank',
'href':'https://uiwjs.github.io/icons/',
'content': '从uiw组件库中抽离出来的，图标字体 uiw-iconfont 发布'
},
{
'href':'#/components',
'disabled': true,
'content': '快跑!《侏罗纪世界2》正式预告要来了'
},
];
const Demo = () => (
列表头部}
footer={列表尾部}
dataSource={data}
renderItem={(item, index) => {
return (
{item.content}
);
}}
/>
)
export default Demo
`
$3
设置了 extra，List.Item 就可以设置右侧内容。`jsx mdx:preview
import React from 'react';
import { List } from 'uiw';const data = [
{
'extra': '内容',
'content': '"X战警新变种人"首曝海报特写诡异人脸'
},
{
'extra': '内容',
'content': '从uiw组件库中抽离出来的，图标字体 uiw-iconfont 发布'
},
{
'href':'#/components',
'disabled': true,
'extra': '内容',
'content': '快跑!《侏罗纪世界2》正式预告要来了'
},
];
const Demo = () => (
列表头部}
footer={列表尾部}
dataSource={data}
renderItem={(item, index) => {
return (
{item.content}
);
}}
/>
)
export default Demo
`List
| 参数 | 说明 | 类型 | 默认值 |
|--------- |-------- |--------- |-------- |
| size | 设置行尺寸，分别大、中、小三种尺寸 | Enum{
,default,large} | default |
| bordered | 是否展示边框 | Boolean | true |
| noHover | 取消鼠标移过时边框阴影 | Boolean | false |
| active | 激活列表，鼠标经过边框阴影效果 | Boolean | false |
| striped | 斑马线效果 | Boolean | false |
| footer | 列表底部 | String/ReactNode | - |
| header | 列表头部 | String/ReactNode | - |
| dataSource | 列表数据源 | Array[] | - |
| renderItem | 通过回调函数返回Dome，渲染列表每个行 | Function(item,index) | - |List.Item
| 参数 | 说明 | 类型 | 默认值 |
| --------- | -------- | --------- | -------- |
| active | 激活 | Boolean |
false |
| extra | 额外内容，展示右侧内容 | React.ReactNode | - |
| disabled | 禁用 | Boolean | false |
| tagName | 设置子节点标签名，默认 标签，也可以指定路由 |
| href | 规定链接的目标，值存在并且 tagName 为 String 时候是个超链接，在超链接上加 href 的值就是你传进来的 href值，此时将可以设置标签的所有属性。 | Boolean/String | false |其它参数可根据 tagName 来设置，设置
tagName="a" 标签时，可设置 href="https://github.com" 或者 target="_blank" 等参数，你可以设置 react-router-dom 路由 ，例如：`jsx
import { List } from 'uiw';
import { Link } from 'react-router-dom';const Demo = () => {
return (
"X战警新变种人"首曝海报特写诡异人脸
六大变五大？传迪士尼600亿收购福斯
)
}
``