README

我构建了这个工具，以创建一个标准化的“主题”方法来美化Laminas表单。在大型团队中，人们经常以不同的方式做事，自定义CSS。这可以阻止这种情况发生。

设计目标是

• 使系统尽可能透明（无厚覆盖），以便在Laminas/Form更改中存活。
• 允许您通过单个参数（主题）定义表单的外观
• 强制在PHP配置级别创建主题
• 当显式设置类时不会干扰，换句话说，如果需要，让路
• 尽可能小的占用空间

可选的，因为它非常主观

• TODO：自动绑定AlpineJS的响应式模型
• TODO：自动编写表单的XHR fetch脚本，以及错误显示

安装

即将推出。

使用方法

即将推出。

测试元素

您可以在单元测试中看到这些行为。到目前为止，我对它提供的支持感到满意

• 文本字段
• 按钮
• 复选框
• 切换（新功能）

定义默认样式

查看config/module.config.php文件，并查看form_themes/default-form-element键。这些是在您的应用程序Tailwind配置中（例如，使用@apply）希望定义的类名。在定义您的表单（在init()中）时，您也可以在元素级别覆盖它们。

为了帮助您开始，这里有一些我在使用此库的项目中使用的内容

  .default-form-element {
      @apply shadow focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md;
  }
  
  .default-form-element.error {
      @apply focus:ring-red-500 placeholder-red-300 focus:outline-none focus:ring-red-500 block w-full sm:text-sm border-red-300 rounded-md text-red-900;
  }
  
  .default-form-error {
      @apply mt-2 text-sm text-red-600;
  }
  
  .default-form-label {
      @apply block text-sm font-medium text-gray-700;
  }
  
  .default-form-button {
      @apply inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500;
  }
  
  .default-form-button-primary {
      @apply inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500;
  }
  
  .default-form-button {
      @apply bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500;
  }
  
  .default-form-help-block {
      @apply mt-2 text-sm text-gray-500;
  }
  
  .default-form-toggle {
      @apply self-start mt-2 bg-gray-200 relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2;
  }
  
  .default-form-toggle.active {
      @apply self-start mt-2 bg-indigo-600 relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2;
  }
  
  .default-form-toggle .toggle-control {
      @apply translate-x-0 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out;
  }
  
  .default-form-toggle.active .toggle-control {
      @apply translate-x-5 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out;
  }
  
  .default-radio-option {
      @apply h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-500;
  }
   
  .default-radio-label {
      @apply ml-3 block text-sm font-medium text-gray-700;
  }
  
  .default-file-element {
      @apply block w-full text-sm text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-violet-100;
  }

实现说明

• 由于FormElementManager::doCreate看到的表单名称具有不同的'resolvedName'值，因此对于表单来说，委托者不是一个选项。因此，使用了委托者来从ServiceManager“偷取”FormElementManager。您会看到ThemedFormDelegatorFactory没有使用服务管理器提供的回调，而是返回了一个类似代理的对象。在测试中，没有可感知或确定的性能影响。
• 主题在添加到库提供的表单中时推入表单元素。这是必要的，因为元素到父元素的链接不存在。如果将主题数据留在表单中，并让助手依赖于它，将会更高效，但这需要对laminas/laminas-forms进行彻底修改。