Magento2采用了非常“有争议”的前端架构方法。我们不会讨论这个问题,但是我们将尝试解释如何授权当前的Magento2 UI库来完成最常见的前端任务。

首先,什么是Magento UI库,在哪里可以找到它。如引言所述:

Magento UI库是一个灵活的模块化Magento前端库,旨在帮助Magento主题开发人员。它使用一组基本元素的混合来简化前端主题的开发和定制。Magento UI库为开发或定制Magento主题的用户提供了以下特性。

听起来不错,我们能从这个库中得到什么呢?

该库提供了自定义以下所有用户界面元素的功能:

  • actions-toolbar
  • breadcrumbs
  • buttons
  • components
  • drop-downs
  • forms
  • icons
  • layout
  • loaders
  • messages
  • pagination
  • popups
  • ratings
  • resets
  • responsive
  • sections – tabs and accordions
  • tables
  • tooltips
  • typography
  • utilities

在我们继续之前,也许您会发现我们之前关于Magento2作为Magento 2 CSS预处理的博客很有用,这可以很有趣的验证Magento 2 验证自定义表单

今天我将重点介绍与自定义表单相关的简单任务。外观,功能,验证等。

首先,我们需要找到库文档。如果您已经安装了Magento2,那么您可以访问指向浏览器的库文档

http://your-ip-installation-name-whatever/pub/static/frontend/Magease/workshop/en_US/css/docs/index.html

在这里,您将找到所有与接口元素相关的文档。


Magento UI库

所以我们猜测你已经安装了Magento2,示例数据,创建自定义主题,使用回退机制,父主题是blank我们可以从简单的任务开始。

打开

http://magento2install/customer/account/create/

我们将看到注册表单:

在主题_theme.less文件下,我们可以通过添加下面代码来开始

@form-field-type-revert:block;

保存,编译,我们将看到:

这对于从内联到块标签再到输入字段的所有表单都是全局的。同样的道理,如果你想改变颜色、边框、字体,只要遵循列出所有可能变量的文档即可。

在列中获取表单非常简单,这是一个很好的特性。我们将使用相同的注册表单并创建两列。

.form-create-account{
  .fieldset {
    .lib-form-fieldset();
    > .field {
      .lib-form-field(
        @_column: true,
        @_column-number:2
      );
    }
  }
}

我们可以改变Form字段标签的颜色和Label“required”星号

.form-create-account{
  .fieldset {
    .lib-form-fieldset();
    > .field {
      .lib-form-field(
        @_label-color:red,
        @_label-asterisk-color:blue,
        @_column: true,
        @_column-number:2
      );
    }
  }
}

我们可以尝试使用更多的全局变量,例如验证:

@form-validation-note-icon__use:true;
@form-validation-note-icon__font-color:blue;

我们可以为验证消息,颜色,大小等添加自定义图标。