material-ui [RFC] [文档] 在文档中使用Stack组件添加Flexbox示例

3zwtqj6y 于 6个月前发布在其他

关注(0)|答案(4)|浏览(43)

问题是什么？ 🤔

如果我阅读了mui系统 documentation about flexbox,我本以为会看到一些 Stack 组件的例子，因为它基本上是一个实现了 flex 的 Box,对吧？
但这里只有使用 Box 实现弹性盒布局的例子。

需求是什么？ ❓

Stack 组件应该在Flexbox文档中有所体现。

我们的选择有哪些？ 💡

要么使用 Stack 重写文档
或者(首选):
使用 Stack 添加 flexbox 的例子并优先展示它们。

建议的解决方案 🟢

正如之前所说，我希望在文档中看到 Stack 的体现。只看到 Box 被使用可能会让人认为这是弹性盒布局的首选方式。
但我也可以看到，链接的文档仅使用了仅Box 实现，这可能有其合理的原因。
这就是为什么我在此请求对此的评论。

资源和基准测试 🔗

无响应*

material-ui

来源：https://github.com/mui/material-ui/issues/35228

4条答案

按热度按时间

cigdeys31#

我甚至会进一步使用纯 div 和内联样式来展示组件。这样做的原因是让演示尽可能简单，让读者一次只关注一个组件。
对于初学者来说，使用 Box 或 Stack 并不舒服。例如，你想要查看按钮的变体，但然后你看到了这个：

<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
  <Button>...</Button>

如果你是 Material UI 的新手，第一个问题可能与按钮无关，而是：

"什么是 Box"?
"什么是 sx"?
"为什么 gap: 2 return 16px "?

cc @samuelsycamore 获取更多想法，我会让他决定这个问题。

赞(0）回复(0）举报 6个月前

xe55xuns2#

我甚至会进一步使用纯 div 和内联样式来展示组件。这样做的原因是让演示尽可能简单，让读者一次只关注一个组件。
对于初学者来说，使用 Box 或 Stack 并不友好。
这是一个很好的观点，我也同意我们可能一下子向新用户抛出太多概念。
话虽如此，我认为双方都有道理——在这些组件和属性的上下文中了解 Flexbox 的工作方式是有好处的。但这不一定应该出现在概念介绍中。
因此，作为一个折中的建议，我会建议创建一些非常基本的演示，仅使用 <div> 元素和内联样式来引入概念。从那里开始，我们可以逐步在文档的不同部分逐个介绍 sx 属性和 Box 和 Stack 组件。(我在考虑我们在 Joy UI 文档中建立的新模式：“使用 X”部分的使用情况。)
你觉得怎么样？