Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[comp: list] add list component #187

Closed
1 task done
rhinonan opened this issue Feb 3, 2021 · 5 comments
Closed
1 task done

[comp: list] add list component #187

rhinonan opened this issue Feb 3, 2021 · 5 comments
Assignees
Labels
enhancement New feature or request
Milestone

Comments

@rhinonan
Copy link
Contributor

rhinonan commented Feb 3, 2021

  • I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

最基础的列表展示,可承载文字、列表、图片、段落,常用于后台数据展示页面。

What does the proposed API look like?

内容涵盖:

  • List: 外部包裹容器
  • Item: 列表子项

关联的其他组件:

  • Grid

List Props

参数 说明 类型 默认值 版本
borderless 是否展示边框 boolean false  
footer 列表底部 string|v-slot:footer -  
grid 列表栅格配置,与grid组件保持一致 object -  
header 列表头部 string|v-slot:header -  
layout 设置 List.Item 布局, 设置成 vertical 则竖直样式显示, 默认横排 horizontal|vertical vertical  
loading 当卡片内容还在加载中时,可以用 loading 展示一个占位 boolean false  
loadMore 加载更多 string|v-slot:loadMore -  
empty 空状态 string | v-slot:empty  'ix-empty'
size list 的尺寸 large|medium|small medium  
split 是否展示分割线 boolean true  
  • | 默认不具名slot | v-slot | - |  

List.Item Props

参数 说明 类型 默认值
extra 额外内容, 通常用在 itemLayout 为 vertical 的情况下, 展示右侧内容; horizontal 展示在列表元素最右侧 v-slot:extra -
content 列表元素的描述内容 string|slot -
title 列表元素的标题 string|slot -
@rhinonan rhinonan added the enhancement New feature or request label Feb 3, 2021
@danranVm danranVm changed the title [comp: ][comp: list] add list component [comp: list] add list component Feb 3, 2021
@danranVm danranVm mentioned this issue Feb 3, 2021
95 tasks
@danranVm danranVm added this to the v1.0.0 milestone Feb 3, 2021
@rhinonan
Copy link
Contributor Author

rhinonan commented Feb 4, 2021

@danranVm @Usualminds review 一下 API

@danranVm
Copy link
Member

danranVm commented Feb 4, 2021

  • 类型一栏中的 slot 统一改成 v-slot:xxx
  • bordered 改成 borderless, 我们统一用这个
  • loading 只支持 boolean 类型的就好了吧
  • itemLayout 的类型应该明确为 horizontal\|vertical
  • size 的类型应该为 large\|medium\|small
  • actions 和 extra 是不是重复了?
  • 有些配置可以支持全局配置的,例如:borderless,size,itemLayout,split 等

另外在编写组件的文档时,注意下我们文档的统一格式。

@Usualminds
Copy link
Member

Usualminds commented Feb 4, 2021

List Props

  • grid 支持栅格布局,建议看下这里 grid 保持一致,如 gutter column,是否需要单列出来
  • 建议支持 pagination 配置项,这个还是有使用场景的
  • 看是否有必要提供 dataSource (列表数据源) 配置项,如果不提供,可以让用户通过 v-for自定义列表,我们只提供 list template

List.Item Props

  • extraactions 可以合并为一个?

@rhinonan
Copy link
Contributor Author

rhinonan commented Feb 5, 2021

@danranVm

  1. slot 统一修改为 v-slot:xxx
  2. borderless 调整
  3. loading 修改为只支持boolean,并且类型明确为 horizontal\|vertical
  4. size 可选值 修改为 large|medium|small ,并且默认值为全局的size配置(是否有这个全局的功能)

@Usualminds

  1. 去除actions,只保留extra为右侧的slot
  2. dataSource之前讨论过了,不支持,目前支持v-for item的形式
  3. 不新增分页组件,直接业务中直接考虑在header 或者 footer 的slot实现即可

其他修改

  1. List itemLayout属性名称 修改为layout 更加简洁
  2. Item中的 description修改为content更加符合实际用途
  3. List 组件 新增默认的不具名slot

后续规划

  1. 虚拟列表功能,看后续有公共的虚拟列表组件。适用数据量在(1W+的场景)
  2. 分片渲染。 适用数据在 >1K && <1W的场景,用于解决首屏需求。

@danranVm
Copy link
Member

danranVm commented Feb 5, 2021

@rhinonan 全局配置 参考 useGlobalConfig, 基本上每个组件都有用到,你看下就知道怎么用了。

rhinonan added a commit to rhinonan/idux that referenced this issue May 17, 2021
rhinonan added a commit to rhinonan/idux that referenced this issue May 17, 2021
rhinonan added a commit to rhinonan/idux that referenced this issue May 17, 2021
qingshan-dev added a commit to qingshan-dev/idux that referenced this issue Apr 23, 2022
qingshan-dev added a commit to qingshan-dev/idux that referenced this issue Apr 23, 2022
qingshan-dev added a commit to qingshan-dev/idux that referenced this issue Apr 23, 2022
qingshan-dev added a commit to qingshan-dev/idux that referenced this issue Apr 24, 2022
qingshan-dev added a commit to qingshan-dev/idux that referenced this issue Apr 24, 2022
danranVm pushed a commit that referenced this issue Apr 25, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants