List Component #4905

afc163 · 2017-02-16T08:56:09Z

ghost · 2017-03-08T14:58:03Z

List组件计划什么时候可用？现有的组件怎么调制一个List？可不可以直接引入Material-UI的List组件？

ddcat1115 · 2017-03-14T10:03:14Z

这个预计要到 3.0 才能用，你可以试下 Table[showHeader=false] 能不能满足需求

afc163 · 2017-06-21T08:51:16Z

nikogu · 2017-07-28T06:23:02Z

内容形态太多了，只能抽离 content（像 card 一样），但是感觉外框不如 card 统一，不太好搞，除非设计上统一内部内容的部分规范，如新 card 那样。

<Card
  cover={<img src="xxxx" />}
  actions={[<Icon type="xx" />, <Icon type="xx" />, <Icon type="xx" />]}
+ title="title"
+ avatar={<Avatar src="xxxx" />}
+ description="description"
+ extraContent={<div>xxxx</div>}
/>

nikogu · 2017-07-28T06:24:38Z

1

2

3

4

5

nikogu · 2017-08-08T03:39:56Z

@afc163 @ddcat1115 看看用法和 API 是否可行

可配合 Card 使用，变成 Card List。

import { List } from 'antd';

ReactDOM.render(
  <div>
    <List
      toolbars={}  // 这两个位置形态固定，所以不抽离成组件，作为配置项
      footer={}
    >
      {/* 水平典型用法 */}
      <List.NewItem type='card | normal' />
      <List.Item>
        <List.Item.logo src='xxx' size={40} radius={40} />
        <List.Item.Meta
          title="Title"     
          description="描述"
        />
        <List.Item.Content>
          Content
        </List.Item.Content>
        <List.Item.Action>
          <a>操作一</a> | <a>操作二</a> 
        </List.Item.Action>
      </List.Item>

      {/* 竖直典型用法 */}
      <List.Item 
        vertical // 垂直形态
      >
        <List.Item.logo src='xxx' size={60} radius={5} />
        <List.Item.Meta
          title="Title"     
          description="描述"
          tags=['tag 1', 'tag 2', 'tag 3']
          extra={<Tags />}
        />
        <List.Item.Content>
          Content
        </List.Item.Content>
        <List.Item.Action 
          actions=[{
            icon: '',
            text: '156',
            href: '',
            onClick: () => {},
          }] 
        />
      </List.Item>
    </List>
  </div>
, mountNode);

afc163 · 2017-08-08T03:46:54Z

NewItem 直接用 Button[dashed]。
toolbars 是啥？
vertical => layout="vertical"
Meta 下的 tags、extra 都不要，全部用 description 自定义。
logo => Avatar：和 Card 保持一致。
<List.Item.Action actions={[ ... ]}> 这种看着蛋疼，我也没想到好的方案。@nikogu 可以和 @ddcat1115 碰下，和 Card 一并再想想。

nikogu · 2017-08-08T06:20:06Z

toolbars 是啥？

这货（其实就是 header？感觉 footer 和 header 都没必要，额外写模板好了）：

<List.Item.Action actions={[ ... ]}> 这种看着蛋疼，我也没想到好的方案。

<List.Item.Action>
    <List.Item.IconText type="start" title="156" onClick={} /> // 这样如何，在 action 里面，默认加 `split`
</List.Item.Action>

afc163 · 2017-08-08T06:32:13Z

toolbars 不要包括在 List 里。

下面这个是 LoadMore，这个要有。而且，List 组件要集成抽象的 infinite load 的功能。

ddcat1115 · 2017-08-08T06:35:02Z

不管是横向还是竖向 List，action 位置应该都是固定的（行尾或者尾行），是不是用 prop 比用 child component 好点？

ddcat1115 · 2017-08-08T06:56:02Z

而且我觉得实现 List 的时候，不用考虑设计稿中的『网格列表』，也就是长得很像 Card 的那一块，因为这块跟普通认知里面的『列表』不一样，用户肯定不会想到去 List 里找这种效果，列表概念本来也比较宽泛，不可能看到一个一个排列的效果都在 List 里实现。

或者这块可以参考下 http://wiki.jikexueyuan.com/project/bootstrap4/components/card/#section-11

afc163 · 2017-08-08T06:59:05Z

对，不用考虑，那个就是 Card 和栅格配合。

nikogu · 2017-08-08T07:51:07Z

@ddcat1115 action 这里，List 的场景有可能会有扩展：

所以如何抽离成套件的话，再灵活性和规范上面有一个平衡

afc163 · 2017-08-08T07:55:18Z

另外也要支持下面的最简用法。

<List.Item>
   xxxx
</List.Item>

nikogu · 2017-08-08T08:02:39Z

actions 这个，要不支持两种：

props，采用设计模板
children，方便自定义

<List.Item.Action>
    <a>123</a> <Dropdown />
</List.Item.Action>

<List.Item.Action
    actions={}
/>

这样的话，虽然 actions props 确实很蛋疼，但是用起来还是方便不少。 @ddcat1115 怎么看

ddcat1115 · 2017-08-09T02:13:26Z

<List.Item actions={array} /> 这样会有什么问题吗？组件做的只是把每一个元素渲染出来，加上分割的竖线，然后渲染位置是固定的

afc163 · 2017-08-09T02:30:17Z

不要都支持，选一种。

nikogu · 2017-08-09T06:53:20Z

#7150

nikogu · 2017-08-11T03:00:43Z

afc163 · 2017-08-21T08:07:51Z

Demo 演示顺序：

最基本的，类似：
信息流，复杂一点，增加头像和描述：
完整全面的。
其余功能...
其余功能...
其余功能...
其余功能...
其余功能...

afc163 · 2017-09-02T03:58:46Z

@nikogu 目前好像还没实现 scroll infinite load 功能？

nikogu · 2017-09-02T04:00:37Z

@afc163 是的，还没有实现。。。。争取下周实现了

afc163 · 2017-09-06T06:54:41Z

Use Spin like Table[loading].
Use default size Spin.

afc163 · 2017-09-18T11:38:09Z

可以参考下 https://github.com/joshwnj/react-visibility-sensor 的实现

afc163 · 2017-09-27T08:05:10Z

nikogu · 2017-09-27T08:40:03Z

好的，着手改进～

Scrolling loaded List 这个例子看不太懂，类似 breadcrumb 搞一个 iframe 内部滚动来演示（提示用户滚动）

bisheng 对于 iframe 模式的依赖还需要看一下，暂时改成了 scrolling container 方式，效果还不错

fixed: #4905 (comment) (#7853)

afc163 · 2017-10-11T07:26:13Z

头像应该顶部对齐？视觉稿截图
如果没有 content 不应该渲染出一个空 div。截图

afc163 · 2017-11-03T06:00:29Z

没有空数据样式。

<List dataSource={[]} />

afc163 · 2017-11-11T06:16:09Z

@nikogu

andriijas · 2017-11-13T16:51:20Z

@nikogu
@afc163 size property is missing in documentation (<list size="large" />) - running docs locally. I could fix it and send PR but only for english.

andriijas · 2017-11-13T18:43:09Z

another issue seems to be if i have a list of cards, and i dont use grid prop in list, the last card item will not get 100% width

nikogu · 2017-11-14T02:42:02Z

another issue seems to be if i have a list of cards, and i dont use grid prop in list, the last card item will not get 100% width

Yes, the width of List children is default to 100% unless you specify it.

andriijas · 2017-11-15T09:44:15Z

@nikogu

Actual:

Expected:

src:

https://github.com/andriijas/create-react-app-playground/blob/master/src/routes/Users.js

nikogu · 2017-11-15T10:08:03Z

@andriijas https://github.com/andriijas/create-react-app-playground/blob/master/src/routes/Users.js#L60

you need set itemLayout="vertical" to List.

...
<List
  itemLayout="vertical"
  dataSource={data}
...

andriijas · 2017-11-15T10:25:24Z

thanks. sorry i missed that in the doc. feels a bit strange with horizontal as default but explicit is always better than implicit.

afc163 added 💄 Design It is a UI design issue 🕙 Plan labels Feb 16, 2017

afc163 assigned ddcat1115 Feb 19, 2017

afc163 added the ☘️ New Component label Jul 24, 2017

nikogu mentioned this issue Aug 8, 2017

[WIP] Add list component basic structure #7136

Closed

6 tasks

nikogu mentioned this issue Sep 4, 2017

List:add infinite & detail optimize #7445

Merged

4 tasks

yesmeck mentioned this issue Sep 18, 2017

I want to use a list for like ul and li, but I don't find a similar component, how do I do ? #7648

Closed

nikogu assigned nikogu and unassigned ddcat1115 Sep 19, 2017

This was referenced Sep 19, 2017

[WIP]List: add virtualized & infinite #7660

Closed

List virtualized #7692

Merged

nikogu added a commit that referenced this issue Oct 9, 2017

fixed: #4905 (comment)

01f9c44

nikogu mentioned this issue Oct 9, 2017

[WIP] List optimize #7831

Closed

1 task

nikogu added a commit that referenced this issue Oct 10, 2017

fixed: #4905 (comment)

a05042b

nikogu mentioned this issue Oct 10, 2017

[WIP] List Optimize #7847

Closed

nikogu added a commit that referenced this issue Oct 11, 2017

fixed: #4905 (comment)

4a8b20b

nikogu added a commit that referenced this issue Oct 11, 2017

fixed: #4905 (comment)

9953a3b

nikogu mentioned this issue Oct 11, 2017

List Optimize fixed: #4905 #7853

Merged

afc163 pushed a commit that referenced this issue Oct 11, 2017

Improve List Component

b4ed4e6

fixed: #4905 (comment) (#7853)

nikogu added a commit that referenced this issue Oct 12, 2017

fixed: #4905 (comment)

4823941

nikogu mentioned this issue Oct 12, 2017

Fixed List Avatar position #7875

Merged

nikogu added a commit that referenced this issue Oct 12, 2017

fixed: #4905 (comment) (#7875)

57d5038

nikogu mentioned this issue Nov 14, 2017

List empty style #8190

Merged

benjycui mentioned this issue Nov 21, 2017

antd@3.0 #5570

Closed

29 tasks

afc163 closed this as completed Nov 21, 2017

List Component #4905

List Component #4905

Comments

afc163 commented Feb 16, 2017

ghost commented Mar 8, 2017

ddcat1115 commented Mar 14, 2017 • edited by afc163

afc163 commented Jun 21, 2017

nikogu commented Jul 28, 2017

nikogu commented Jul 28, 2017 • edited

1

2

3

4

5

nikogu commented Aug 8, 2017 • edited

afc163 commented Aug 8, 2017 • edited

nikogu commented Aug 8, 2017 • edited

afc163 commented Aug 8, 2017 • edited

ddcat1115 commented Aug 8, 2017

ddcat1115 commented Aug 8, 2017

afc163 commented Aug 8, 2017

nikogu commented Aug 8, 2017

afc163 commented Aug 8, 2017

nikogu commented Aug 8, 2017

ddcat1115 commented Aug 9, 2017

afc163 commented Aug 9, 2017

nikogu commented Aug 9, 2017

nikogu commented Aug 11, 2017 • edited

bug

todo

afc163 commented Aug 21, 2017 • edited

afc163 commented Sep 2, 2017

nikogu commented Sep 2, 2017

afc163 commented Sep 6, 2017 • edited by nikogu

afc163 commented Sep 18, 2017

afc163 commented Sep 27, 2017 • edited by nikogu

nikogu commented Sep 27, 2017 • edited

afc163 commented Oct 11, 2017 • edited by nikogu

afc163 commented Nov 3, 2017 • edited

afc163 commented Nov 11, 2017

andriijas commented Nov 13, 2017

andriijas commented Nov 13, 2017

nikogu commented Nov 14, 2017

andriijas commented Nov 15, 2017

nikogu commented Nov 15, 2017

andriijas commented Nov 15, 2017

ddcat1115 commented Mar 14, 2017 •

edited by afc163

nikogu commented Jul 28, 2017 •

edited

nikogu commented Aug 8, 2017 •

edited

afc163 commented Aug 8, 2017 •

edited

nikogu commented Aug 8, 2017 •

edited

afc163 commented Aug 8, 2017 •

edited

nikogu commented Aug 11, 2017 •

edited

afc163 commented Aug 21, 2017 •

edited

afc163 commented Sep 6, 2017 •

edited by nikogu

afc163 commented Sep 27, 2017 •

edited by nikogu

nikogu commented Sep 27, 2017 •

edited

afc163 commented Oct 11, 2017 •

edited by nikogu

afc163 commented Nov 3, 2017 •

edited