如何解决原子设计:如果包装器不可重用,它应该是一个原子吗?
在我们公司,我们使用 Atomic Design 作为我们的设计系统(使用 React 和样式化组件作为我们的样式解决方案),以便将我们的 UI 分解为原子、分子和有机体
我对何时应将原子归类为原子或是否应在其父域内有疑问。
您可以在此 Material UI Card 示例中看到此类组合的示例(该示例未使用原子设计,但您仍然可以理解)。
那么,想象一下下面的例子,你有一个 Card Atom(因为它只是一个返回带有子元素的样式化 HTML 标签的包装器):
const Card = ({children}) => <StyledWrapper>{children}</StyledWrapper>
还定义了一些与 Card
一起使用的子代,例如 CardHeader
、CardBody
和 CardFooter
,它们都是可选的样式包装器,并且它们被传递必要时作为孩子。
-
CardHeader
、CardBody
和CardFooter
应归类为原子,位于Card
域之外(意味着它是文件夹)
-- atoms
-- Card
-- CardHeader
-- CardBody
-- CardFooter
-
CardHeader
、CardBody
和CardFooter
应放置在Card
域内,因为它们不可重复使用(意味着它们只能与 {{1} }} 原子),并且应该与Card
一起导出,所以这个例子中唯一的原子是Card
Card
解决方法
简单的答案:后者。
-- atoms
-- Card
-- CardHeader
-- CardBody
-- CardFooter
如您所说,CardHeader
、CardBody
在 Card
域之外不可重复使用。因此,将这些子组件与卡片放在同一级别是没有意义的。专业提示:您可以封装这些子组件,以便在 Card 下导出它们。例如。 Card.Header
、Card.Body
等使事情更明显。
另一点可能对您有帮助:在我的项目中,我不假设 Card 是一个原子,而是一个分子。原子是构建块。卡片是诸如文本、图像和按钮等较小构建块的集合。因此,它作为一个分子更有意义。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。