List API 调整

[afc163]

List

<List>
  <List.Header />
  <List.Body>
    <List.Item />
    <List.Item />
  </List.Body>
</List>

改成 =>

<List title="原来的 header">
  <List.Item />
  <List.Item />
</List>

List.Item

从

<List.Item>
  <div>
    垂直居中对齐
    <div className="am-list-brief">辅助文字内容</div>
  </div>
</List.Item>

改为：

// 去掉 `.am-list-brief`，改为 description
<List.Item description={} extra={} arrow={} >

---

// 此用法保持不变
<List.Item>
  <InputItem />
</List.Item>

去处 swipeAction，增加 ListActionItem

<ListActionItem actions={}/>

[pingan1927]

这样可扩展性比较差吧。 要考虑下各种xxItem 基于list.item进行扩展。 API调整的目的是什么？

[afc163]

这样可扩展性比较差吧。

什么扩展性差？扩展性应该是一样的。

API调整的目的是什么？

美化 & 语义化。

[pingan1927]

什么扩展性差？扩展性应该是一样的。

比如，需要定制某个List.Header的样式，辣么就选择在List上加一个className再选择到am-list-header? 再比如，List.Header要加一个onClick，title=""则需要再包一个div标签。

美化。

这个目的，顶！

[afc163]

<List title={<span className="xx" onClick={}>标题</span>}>

const ListHeader = <span className="xx" onClick={}>标题</span>

<List title={ListHeader}>

扩展性和原来的写法是一样的。

而且对于不需要定义 className、onClick 等的大多数场景下，写起来会简单很多。

[yiminghe]

尽量使用 children ，不要空 children 反而 属性

List 可以有个 header 属性，但 list-item 还是使用 children

[afc163]

有些 children 很难定义，可以保留 title 作为 children。

<List.Item description={} extra={} arrow={} />
  title
</List.Item>

[pingan1927]

有些 children 很难定义，可以保留 title 作为 children。

list.item的children里内容千变万化，extra也是千变万化，改<div className="am-list-brief">辅助文字内容</div>为description无法解决问题，很多情况下需要3行、4行，其中有两行是brief。children里也会有brief，extra里也可能有。限定死了用户就根本不够用了。

[afc163]

description={<div><p>第一行</p><p>第二行</p></div>}

extra={<div><div>第一行</p><div>第二行</p></div>}

尽量不要有 className="约定值" 暴露给用户。

[pingan1927]

List.Item我是偷懒了，直接把AntUI的一些约定值拿过来。

className="约定值"，这个恰恰是我觉得需要整理出来一份文档提供出来的。 例如一些很简单的约定。比如a标签的各种场景颜色、各种字号大小，不值得给出一个组件，但是要有规范。

或者 @afc163 有更好的方案吗？

[afc163]

1. 能全局设置就全局设置。
2. 大一点点就给小组件。
3. 剩下让使用方用变量自己设。

[pingan1927]

// 去掉 children，改为 title
// 去掉 `.am-list-brief`，改为 description
<List.Item title={} description={} extra={} arrow={} />

extra中的.am-list-brief的如何安排？

[pingan1927]

再搞个extraDescription？

[afc163]

const { Brief } = List.Item;

<List.Item
  title={<div>快捷键 <Brief>说明</Brief></div>}
  description={<div>快捷键 <Brief>说明</Brief></div>}
  extra={<div>快捷键 <Brief>说明</Brief></div>}
  arrow={}
/>

or

const { Brief } = List.Item;

<List.Item
  title={}
  description={}
  extra={<div><Brief>说明</Brief><Brief>说明</Brief></div>}
  arrow={}
/>

抛砖引玉一下，brief 貌似都是一样的？靠右浮动 + 小字体？

---

或者极端一些：

const { Title, Description, Brief, Extra } = List.Item;

<List.Item arrow={}>
  <Title>标题</Title>
  <Description>描述</Description>
  <Extra>额外</Extra>
</List.Item>

[pingan1927]

const { Brief } = List.Item;

<List.Item
  extra={<div>快捷键 <Brief>说明</Brief></div>}
  arrow={}
>
    <div>快捷键 <Brief>说明</Brief></div>
</List.Item>

这样差不多，扩展性也好，升级也不难， 就是把原来的am-list-brief包装下。

[silentcloud]

这个最终的结论？ @pingan1927

搞好了就把 issue close 了

[lock[bot]]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.