标签: atomic-design

我将用这两个框架(我喜欢)启动一个新项目:

• Laravel 5
• Vue.js

前端开发人员使用patternlab.io生成原子设计中的HTML.

现在我正在寻找如何集成我没有重写刀片模板中所有元素的patternlab.io项目.

我发现一些实现合并Patternlab&Laravel使用TwigBridge,LaratashLaravel扩展.

但我有一些想法:

• 在刀片模板中有:逻辑,条件,循环......如果我合并patternlab,laravel那么我需要将所有这些放在patternlab项目中.
• 由于使用vue.js我需要将这些标签添加到patternlab模板中

所以我认为在laravel项目中集成patternlab.io模板不是最好的选择.

我的想法是:

• 前端DEV使用patternlab来创建模板
• Laravel自动生成并导入在patternlab中生成的CSS样式表
• 后端开发人员patternlab - molecules在刀片模板中手动复制并添加自己的逻辑
• 如果前端DEV对CSS进行了更改,那很好 - 我们将毫无问题地运行; 在重新运行laravel gulp进程以更新css文件后,我们有了新的更新.
• 如果前端DEV对html结构进行了一些更改,我们需要手动调整它们.

是否有更好的解决方案结合Atomic Design,Vuejs和Laravel？如何在CMS中部署原子设计？

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

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

我应该将模态设为分子，还是将平铺设为有机体？

有什么建议吗？

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

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

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

我用完整的代码制作了一个StackBlitz示例。

应用程序组件.ts

import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({selector: 'app-root',templateUrl: './app.component.html'})
export class AppComponent {
  form: FormGroup;

  constructor(fb: FormBuilder) {
    this.form = fb.group({
      field1: ['value1', [Validators.required]],
      field2: ['value2', [Validators.required]],
    });
  }

  onSubmit() {console.log(this.form.value);}
}

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

import { Component } from '@angular/core';
import { FormGroup, …

原子设计似乎是一种构建用户体验结构的有趣方法。但是一种生物可以包含其他生物吗？

建议在原子设计中使用 angular 吗？

“关于创建设计系统已经说了很多，其中大部分都侧重于为颜色、排版、网格、纹理等建立基础。这种类型的思维当然很重要，但我对这些方面的兴趣略低设计，因为最终它们是并将永远是主观的。最近我对我们的界面由什么组成以及我们如何以更有条理的方式构建设计系统更感兴趣”，Brad Frost。