README

简介

本模块旨在提供一组（主要）无偏见的表单模板，用于标记 Silverstripe 前端表单（包括自定义和Userforms），使其与 Bootstrap 5 的表单样式 兼容。

维护者联系方式

• James Cocker (ssmodulesgithub@pswd.biz)

要求

• Silverstripe 4
• Bootstrap 5 已安装到您的主题中

安装

1. 使用 composer 安装

composer require purplespider/silverstripe-bootstrap-form-templates ^1

1. 运行 dev/build

2. 将主题作为您的 app/_config/theme.yml 中的第一个主题添加

    - purplespider/silverstripe-bootstrap-form-templates:bootstrap-form-templates

例如：

---
Name: mytheme
---
SilverStripe\View\SSViewer:
  themes:
    - purplespider/silverstripe-bootstrap-form-templates:bootstrap-form-templates
    - '$public'
    - 'simple'
    - '$default'

1. 为了使 Bootstrap 的验证错误样式生效，请将以下 SCSS 添加到您的主题中

form {
    .error.message {
        @extend .invalid-feedback;
        display: block;
    }
    
    .form-control,
    .form-select,
    .form-check-input {
        &.error {
            @extend .is-invalid;
        }
    }
}

有偏见的 SCSS（可选）

以下是我喜欢从这些风格开始的一些有偏见的样式

// Opinionated Styles
form {
    max-width: 400px !important;
    margin-top: $spacer * 2;

    // "Required" label
    .help-text {
        color: $gray-500;
        padding-left: .25em;
        font-weight: normal;
    }
    
    // Add spacing between different fields
    .form-group {
        margin-bottom: $spacer * 2 !important; // Overrides "mb-3"
    }

    // Style field labels
    .form-label {
        font-weight: $font-weight-bold;
        color: $gray-700;
    }

    // Style Headings, e.g. HeaderField
    .FormHeading {
        border-bottom: 2px solid $gray-200;
        padding-bottom: $spacer / 2;
        margin-top: $spacer * 4;
        margin-bottom: $spacer * 2;
    }

    // Adds a "required" legend
    &:after {
        content: "* indicates required";
        display: block;
        margin-top: $spacer * 2;
    }
}

使用行和列进行表单布局

通过使用 FieldGroup 将字段分组到 row 中，然后可以应用 col 类到字段上，例如：

FieldGroup::create(
    TextField::create('FirstName', 'First Name')->addExtraClass('col'),
    TextField::create('Surname', 'Last Name')->addExtraClass('col'),
)->addExtraClass('row');

工作原理

为了完全控制，本模块提供了一组完整的表单字段模板，这些模板覆盖了 Silverstripe 和 Userforms 提供的默认模板。

这些模板作为额外的主题添加到您的网站上，因此它们不会影响 CMS 中的表单字段。

处理 RightTitle 和 Description

任何 Description 文本都会添加到字段之后，符合默认模板。

由于 Userforms 模块使用 RightTitle 而不是 Description，因此也会在字段之后添加，以保持一致性。因此，在您的自定义编码的表单中，您可以使用其中任何一个（但您不应同时使用两个）。

替代安装（通过复制）

您可以通过将文件复制到您的主题中来安装此模块，而不是通过 composer 安装一个不可编辑的模块，这样您就可以进行任何自定义修改（例如，将 Description 移动到字段 之前）。

为此，只需将 PurpleSpider 和 SilverStripe 目录（位于 themes\bootstrap-form-templates\templates 内）复制到您的主题的 templates 目录中。

待办事项

请注意：本模块目前还在开发中。我还需要

• 检查某些表单字段是否符合 WAI 兼容性，例如单选框和复选框组。
• 添加 Userforms 多页表单的样式。
• 优化处理“必填”标签。
• 优化使用 FormGroup 和 addExtraClass 在行和列中布局字段的能力。