时间戳

首页 > 解决方案 > 原子设计，模态是有机体吗？

atomic-design - 原子设计，模态是有机体吗？

问题描述

有一个带有图像、一些文本和一个播放按钮的图块（分子）。触发按钮时，应通过模态显示视频。我认为模态应该是一个有机体，但我希望模态成为瓦片的一部分，瓦片是一个分子。

modal 应该是 tile 的一部分，因为这样更容易使用。我不想总是从其他有机体、模板或视图内部将它们连接起来。

我应该将模态制作成分子还是应该将瓷砖制作成有机体？

有什么建议吗？

标签： atomic-design

解决方案

我知道这是一个老问题，但我最近在试图弄清楚基本相同的事情时偶然发现了这个问题，并想加两分钱。

注意：我刚开始学习原子设计，所以这可能是完全错误的 - 接受它的本质，一个意见。

简要背景

就我而言，我有一个组件（我们称之为Form A），它将存在于Modal A. 模态 A 是一个非常简单的模态，它更像是一个对话框模态（基本上只包含打开/关闭功能），但在这种情况下它恰好有一个表单。

由于模态在视觉上在技术上包含一种形式（分子），我最初认为这必须被认为是一种有机体，或者至少是另一种分子。

我的解决方案

经过一段时间的思考，并参考了https://atomicdesign.bradfrost.com/chapter-2/的指导，在我的例子中，下面这句话让我很清楚。（在我看来）

这些原子包括基本的 HTML 元素，如表单标签、输入、按钮和其他无法进一步分解而无法正常工作的元素。”

在我看来，按照这个逻辑，我可以将我的模式一直分解到原子级别......

如果我Form A从模态内容中删除组件，模态仍然有效（只是没有内容）。对我来说，这告诉我实际上应该制作一个通用的模态组件并将其标记为原子。

有了 Modal atom 组件后，我可以简单地将其传递给子组件来更改模态的内容。这使我可以轻松地拥有一个Modal A, Modal B,Modal C组件，在我看来它将成为一个有机体，因为那时它正在实施分子以创建一个更大的组件。

可能的答案？

所以，如果我打算用我自己的逻辑来回答你的问题：

我会亲自创建一个简单的通用可重用模态组件作为原子，然后我会创建一个有机体，说它<PlayVideo />里面有

<Modal props={modalSpecificProps}>
  <Video />
  {any other content to display in the modal}
</Modal>

作为<Video />一个孩子以及应该在模态中显示的任何其他内容。

我唯一要说的是我仍然不确定自己是否可以是一个原子，但在技术上仍然允许孩子也被放置在原子中？

无论如何，对于任何偶然发现这一点的人来说都是值得深思的。

推荐阅读