feat: 🆕 new Space component #22363
feat: 🆕 new Space component #22363
Conversation
|
|
|
wow~ |
|
wow~ +1 |
|
wow~ +2 |
| const len = items.length; | ||
|
|
||
| return ( | ||
| <div className={cn} {...otherProps}> |
There was a problem hiding this comment.
可不可以是 挂一层ConfigConsumer 修改size等值往下传递的方式, 并且不产生额外DOM的？
There was a problem hiding this comment.
可以不产生额外的 DOM 但是感觉不太好，不符合组件的规范，用户设置 <Space style className></Space> 发现不生效
There was a problem hiding this comment.
我自己项目很早就封装了 Space 组件，对实际开发提效有帮助，尤其设置 Button 的时候，但是有一个缺点，就是不支持 <Popconfirm /> 等这种包裹组件
There was a problem hiding this comment.
我对这个组件的理解就是一个局部的ConfigContext, 至于className，就好比Fragment那样不接受className呗。
There was a problem hiding this comment.
尤其设置 Button 的时候，但是有一个缺点，就是不支持 等这种包裹组件
可以给这些组件加个 style 属性传递到 children 上。
There was a problem hiding this comment.
不太推荐直接注入样式，我的想法是外层用 inline-flex 保持内联，内部额外一个 dom 做 maring-cell 来处理。这样可以覆盖那些不能注入的情况。
<Space>
2333
<Button />
6666
</Space>There was a problem hiding this comment.
外层如果设置 inline-flex 会干扰到内部的样式，需要容错 child 是 块或者行，如果不是 element 我会包个 span
There was a problem hiding this comment.
嗯，想了下你是对的，不能覆盖的组件有点多，一开始想的干扰是内部可能是个块级元素，后台想块级元素没必要包在里面，不需要考虑，我改了
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 1169090767635374d51b4e559cc68287f2ebb695:
|
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 42a48ba4a246fc12fb33e99fde11aa2284f6e052:
|
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit cab1c8e:
|
.space > * {
margin-right: 10px;
}以前我都是这么解决的... |
|
Yay I needed this all along! :) |
|
|
rebase 一下 feature 即可修复 ci。 |
Codecov Report
@@ Coverage Diff @@
## feature #22363 +/- ##
===========================================
+ Coverage 98.11% 98.12% +<.01%
===========================================
Files 359 360 +1
Lines 7173 7196 +23
Branches 1916 1968 +52
===========================================
+ Hits 7038 7061 +23
Misses 135 135
Continue to review full report at Codecov.
|
|
With like Fragment <Space>
233
{hasAuth && (
<Space>
<Button />
<Button />
</Space>
)}
666
</Space> |
|
Done. |
|
LGTM |
起初光看 releases，我以为 Space 会是 Divider 那样的子组件，能在 Row 当中使用，以代替很多用样式固化的 margin，例如 model/result 的按钮间距。 |
|
@Airkro 这也是最开始讨论的其中一种 API 的形式。不过我个人不太能接受类似下面的累加 Space 的写法： <Button>按钮</Button>
<Space />
<Space />
<Button>按钮</Button>
<Space />
<Button>按钮</Button>
<Button>按钮</Button>
<Space />
<Space />
<Space />
<Button>按钮</Button> |
|
@afc163 如果不进行累加，只使用一个，或许有使用价值，因为组件之间要加 margin 的地方很多。但还是产生了不必要的节点，好像并不划算。 另外建议将 |
来个 PR~ |
🤔 This is a ...
🔗 Related issue link
Close #19860
💡 Background and solution
📝 Changelog
☑️ Self Check before Merge
View rendered components/space/demo/base.md
View rendered components/space/demo/vertical.md
View rendered components/space/index.en-US.md
View rendered components/space/index.zh-CN.md