问题标签 [atomic-design]

我在原子设计中与原子作斗争。为什么我需要为已经建立的 HTML UI 元素制作一个组件？不是多余的吗？

假设我有一个按钮，在分子中而不是使用<button>Label</button>我将被迫使用<Button myOwnLabel="Label" />内部的组件，该组件只是呈现相同的旧按钮。

我看不到制作另一个文件的好处。你能帮我看看吗？

谢谢你。

我对角度的原子设计有一些疑问。基础是可以理解的，我创建最小的原子组件，然后链接到更大的组件，直到页面。什么时候应该在模板中实现不同分辨率的显示？假设我有一个登录页面或主页，这是一个更好的示例，在移动设备和桌面设备上看起来完全不同。我创建了一个模板主页，并在 CSS 中为每个分辨率指定了显示？模板是否适合它？

关于从后端提供数据的第二个问题是这些组件。当我已经有一个模板时，然后我在主页中使用它，并且在 home.component.ts 中为文章、配置文件、通知注入一些服务，然后我通过 @Input() 获取这些数据并放弃它？相反，这将导致这样一个冗余的数据链（数据必须经过每个组件才能到达底部）。这应该如何工作？该主题的方法是什么？

我正在我的 Angular 9 应用程序中实现原子设计。这意味着我将用原子、分子和有机体构建我的页面。一切都很好，除了 ReactiveFormsModule。

我想将其转换<input />为自己的组件，这样我就不必一直复制关联的 HTML。但是，反应形式没有任何它。

下面的示例在加载时返回错误：ERROR Error: No value accessor for form control with name: 'field2'

我用完整的代码做了一个StackBlitz例子。

app.component.ts

app.component.html在这里我尝试用原子替换第二个输入。

输入组件.ts

我试图ControlValueAccessor通过本教程实现 ,但这导致了奇怪的行为。

谁能告诉我如何实现这一目标？

我第一次尝试原子设计时，正在尝试将带有 redux 工具包的 redux 添加到现有的 react native 应用程序中。

我已经将我的 index.js 组件包装在<Provider>每个文档中，但似乎 react-redux 正在搜索一个名为 'src/redux' 的位置，这会引发错误。

我最初尝试在“src/redux”文件夹中组合所有 redux 功能，并使用 jsonconfig.json 将“_redux”别名为路径“src/redux”，子文件夹和 index.js 文件指向子文件夹“actions”、“reducers”和“商店”。

我遇到了一些错误，并认为拥有一个名为“redux”的文件夹可能是错误的形式，所以我将其更改为“appRedux”，然后出现了这个问题。

我已经删除了 node_modules 并重新安装了多次，清除了 Metro 缓存，在整个应用程序中搜索了对 'src/redux' 的任何引用，最后通过将 git 重置为 HEAD 并再次添加 appRedux 和新模块从头开始，只是遇到同样的错误。现在我猜可能文件夹命名问题只是一个巧合，但我不知道如何解决。

任何指针？带有 react native 的 redux-toolkit 上没有太多东西，我不想写所有的样板 redux 代码。

完整错误：

包.json：

jsonconfig.json：

src/index.js：

src/appRedux/store/store.js：

我正在尝试为我的项目使用原子设计并且我从我的 Link 组件开始它检查是否有一个 to 支持它呈现一个默认StyledLink组件但似乎我从Anchor组件中收到此错误

Overload 2 of 2, '(props: StyledComponentPropsWithAs<"a", any, {}, never>): ReactElement<StyledComponentPropsWithAs<"a", any, {}, never>, string | ... 1 more ... | (new (props: any) => Component<...>)>', gave the following error. Type '{ to: string | null; href: string | null; target?: string | undefined; children?: ReactNode; }' is not assignable to type 'Pick<Pick<Pick<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "style" | ... 257 more ... | "rel"> & { ...; }, "ref" | ... 258 more ... | "rel"> & Partial<...>, "ref" | ... 258 more ... | "rel">'. Types of property 'href' are incompatible. Type 'string | null' is not assignable to type 'string | undefined'. Type 'null' is not assignable to type 'string | undefined'. TS2769

有什么问题吗？

我一直倾向于在我的 CSS 中采用 ABEM，这是一种基于流行的 BEM 的修改命名约定，适用于 Atomic Design。

问题：使用ABEM时，修饰符与基类结合使用，不能单独使用。例如，要修改卡片，您可以使用“card -blue”而不是“card card-blue”，定义结合两个类的 css，如下所示：（.card.-blue{}为简单起见，省略了前缀。）

我经常需要限定修饰符以在特定页面中使用，例如一个页面中的蓝卡可能在一个页面中与另一个页面中的不同，从而在 html 中定义 css，如下所示： class="card -blue -page1"并且class="card -blue -page2"page1 和 page2 范围修改/覆盖只是那些页面。

我的问题：如何清楚地显示是否在基类的 CSS 文件 (card.css) 或页面覆盖/命名空间文件 (page1.css) 中找到 ABEM 修饰符，例如“-blue”？

'-blue' 类有可能是一个标准的全局修饰符，像这样在 card.css 中应用： .card.-blue{ style me }但 '-blue' 修饰符也可能被 page1.css 中的页面特定覆盖潜在地应用，如下所示.page1.-blue { style me }：或者在基类中应用标准修饰符，就像card -active在card.css中应用一样，同时page1.css应用了特殊布局（例如-layoutGrid1），因此html显示2个修饰符，但它不是t 清楚 -active 是来自 cards.css 的标准，而 -layoutGrid1 来自 page1.css 在阅读此内容时：card -active -layoutGrid1 -page1.css。

是否有某种修改过的 ABEM 语法可以清楚地向我的 CSS 的未来读者展示他们是否需要修改修饰符，是否查看基本/全局 css，或者是否查看特定于页面的覆盖 css？也许在来自页面级别的修饰符上使用双破折号，而在较低级别或其他东西上使用单破折号？

谢谢你。这是一个难以表达的问题。

2 ABEM 资源： https ://medium.com/@masacarvalho/atomic-design-system-with-abem-naming-convention-part-1-983d7d6ec3d7 https://css-tricks.com/abem-useful-adaptation-贝姆/

原子设计资源： https ://bradfrost.com/blog/post/atomic-web-design/

在我们公司，我们将原子设计用于我们的设计系统（使用 React 和 Styled Components 作为我们的样式解决方案），以便将我们的 UI 分解为原子、分子和有机体

我对何时应将原子归类为原子或是否应位于其父域内有疑问。

您可以在此Material UI Card示例中看到此类组合的示例（它不使用原子设计，但无论如何您都可以理解）。

所以，想象下面的例子，你有一个 Card Atom（因为它只是一个包装器，它返回一个带有子元素的样式化 HTML 标签）：

还定义了一些与 一起使用的子级Card，例如和CardHeader，它们都是可选样式的包装器，如果需要，它们作为子级传递。CardBodyCardFooter

那么，在这个例子中哪种方法是正确的呢？

• CardHeader，CardBody并且CardFooter应该被归类为原子，在Card域之外（意味着它的文件夹）

• CardHeader,CardBody并且CardFooter应该放在Card域内，因为它们不可重用（意味着它们被设计为仅与Card原子一起使用），并且应该与 一起导出Card，所以这个例子中唯一的原子是Card

我正在研究一个设计系统，只是想了解组件的思维方式。

我们正在使用 Nunjucks 和 Fractal。

我们有一个现有的组件，一个从 JSON 对象获取数据的手风琴。道具是标题和内容。

我已经构建了一个组件，例如一个目录，它使用一个简单的循环从 ToC.config.js 文件中拉入显示样式链接列表。

我需要在手风琴组件中包含这个新组件，ToC 有一个标题和一个包含每个链接的 url 和文本的数组。

目前我刚刚从 Fractal 中的手风琴视图中复制了 HTML，但这可能不是要走的路，但在视觉上它是设计师所要求的。

如果我将所有链接、HTML 和所有链接作为字符串放在配置中，我也可以正确渲染手风琴，但这也不是它应该工作的方式。

我想要做的（这可能是正确的方法）是将手风琴拉入并用我的 ToC 组件填充它。

{% render '@my-accordion', 'accordion: items' %}没有做我想做的事，我似乎无法弄清楚如何实现我需要做的事情。

像这样：

然后我会有我的手风琴组件，它的标题、链接和 HTML 等来自我的 ToC 组件。抱歉上面的粗略伪，这更像是我想做的一个例子。我无法将代码复制到外部资源。

使用渲染似乎不是要走的路，除非我错过了什么？我无法将列表作为字符串传递，因为它具有当前页面的类和 aria 等，并且内容作者将使用这些构建页面。

朝正确的方向轻推一点会很棒。

我有一个分子，它使用状态来控制使用商店的另一个 UI 元素的可见性。

应用时是否适合从任何地方使用商店，Atomic Design还是应该有一个地方/一层放置所有这些组件？

我正在开发一个使用 Atomic Design 和 Storybook 的项目。我对如何将原子添加到分子中有些困惑。即，如果我有一个带有页眉主体和页脚区域的基本模式，我将如何动态地向它们添加原子。

所以第一个想要使用模态并在标题中有3个按钮，没有别的，但下一个只想要一个标题。

模态将有（n）种不同的用法。

我的组件看起来像这样 -

我的故事是这样的——

因此，当我使用 Modal 时，我可以像这样动态传递元素 -

我在网上环顾四周，但找不到任何关于这样做的东西。

一如既往，非常感谢任何帮助！