README

Formalism是一组表单组件，它提供了一种可以自定义的样式，以实现令人惊叹的用户体验。

此插件提供了一系列功能，以帮助创建Formalism所需的HTML标记。

Formalism Craft创建HTML，样式则来自我们的独立npm包。

自由形式集成

Formalism是表单无关的，但如果您想将其与Freeform集成，请阅读集成说明。

使用方法

一旦设置好Formalism，您可以使用以下函数在Twig中创建一个基本输入组件

{{ craft.formalism.input({
    label: 'Full Name',
    name: 'fullName',
    isRequired: true,
}) }}

这将生成以下标记

<div class="f-input f-input--outlined" data-field-container>
    <label class="f-input__inner" for="input150">
      <input class="f-input__field" type="text" id="input150" name="fullName" value="" required="required" data-field>
      <span class="f-input__label">
          <span class="f-input__label-text">Full Name</span>
      </span>
      <span class="f-input__indicator f-input__indicator--required" aria-hidden="true">*</span>
    </label>
</div>

导入输入基本和主题文件后

@import 'formalism/input/base';
@import 'formalism/input/outlined';

还有许多其他字段组件，如按钮、复选框、复选框组、日期、文件、输入、单选按钮、单选按钮组、搜索、提交、切换器和文本区域。

功能

• 更少的JavaScript，更多的CSS
• 自定义主题友好
• 无依赖
• 文件大小小
• 支持样式作用域
• 尊重减少运动系统功能
• 移除非品牌自动填充颜色
• 移除移动端点击颜色

要求

此插件需要Craft CMS 3.0.0-beta.23或更高版本。

安装

插件安装

1. 打开您的终端并转到您的Craft项目

    cd /path/to/project
   

2. 然后告诉Composer加载插件

    composer require burgerbuds/formalism-craft
   

3. 在控制面板中，转到设置→插件，并为Formalism点击“安装”按钮。

样式安装

1. 要样式化字段组件，请安装npm包

npm install formalism

1. 将字段样式导入您的项目。在这里，我们使用'outlined'主题样式为所有字段。

这些样式总共只有5.66 kB（压缩后）。

@import 'formalism/checkbox/base';
@import 'formalism/checkbox/outlined';

@import 'formalism/file/base';
@import 'formalism/file/outlined';

@import 'formalism/input/base';
@import 'formalism/input/outlined';

@import 'formalism/radio/base';
@import 'formalism/radio/outlined';

@import 'formalism/select/base';
@import 'formalism/select/outlined';

@import 'formalism/textarea/base';
@import 'formalism/textarea/outlined';

@import 'formalism/fieldset/base';
@import 'formalism/fieldset/outlined';

@import 'formalism/search/base';
@import 'formalism/search/outlined';

链接和插件

• Swiff - 一个使与预发布服务器协作变得轻松的CLI应用程序
• Simple - 一家创建Craft网站的澳大利亚机构