README

一个响应式表单字段，用于 SilverStripe v4，类似于 CheckboxSetField，但带有 Font Awesome 图标！

内容

• 要求
• 安装
• 配置
• 使用
• 问题
• 贡献
• 归属
• 维护者
• 许可证

要求

• SilverStripe 框架 v4
• SilverWare 字体图标（包括 Font Awesome）
• 默认 CSS 类已配置为 Bootstrap 网格

安装

通过 Composer 进行安装

$ composer require silverware/iconsetfield

注意：如果应用程序使用 SilverWare，网站上的表单将自动加载字段需求。如果您使用的是纯 SilverStripe 项目，则需要将模块脚本和样式加载到您的应用程序包中（需要 jQuery）

• silverware/iconsetfield: client/dist/js/bundle.js
• silverware/iconsetfield: client/dist/styles/bundle.css

配置

与所有 SilverStripe 模块一样，配置通过 YAML 完成。通过 config.yml 应用对 LeftAndMain 和 ContentController 的扩展。

主题

该模块支持 CMS 和网站表单的主题。要定义主题，请使用以下 YAML 配置

# Custom theme for CMS:

SilverStripe\Admin\LeftAndMain:
  iconsetfield_theme:
    hover-background: '<color>'
    hover-foreground: '<color>'
    checked-background: '<color>'
    checked-foreground: '<color>'
    checked-border: '<color>'

# Custom theme for website forms:

SilverStripe\CMS\Controllers\ContentController:
  iconsetfield_theme:
    hover-background: '<color>'
    hover-foreground: '<color>'
    checked-background: '<color>'
    checked-foreground: '<color>'
    checked-border: '<color>'

将每个 <color> 替换为您希望的颜色十六进制或 rgba 代码。

列

默认情况下，该字段使用 Bootstrap 列类。您可以通过将它们添加到您的 YAML 中来更改列类

SilverWare\IconSetField\Forms\IconSetField:
  column_class_small: 'col-sm-%d'
  column_class_large: 'col-lg-%d'

使用

创建字段，要么作为 Form 的一部分，要么在您的 getCMSFields() 方法内

use SilverWare\IconSetField\Forms\IconSetField;

$field = IconSetField::create(
    'RelationName',
    'Title of field',
    [
        1 => [
            'icon' => 'envelope',
            'text' => 'Mail'
        ],
        2 => [
            'icon' => 'facebook',
            'text' => 'Facebook'
        ],
        3 => [
            'icon' => 'twitter',
            'text' => 'Twitter'
        ]
    ]
);

第一个参数是要保存的字段名称或多对多关系的名称，第二个参数是字段标题。第三个参数定义字段的来源，它是一个嵌套数组，包含 ID 值映射到包含图标代码（即 fa-）和选项文本的数组。

最大高度

您可以使用 setMaxHeight() 方法定义字段的最大高度（以像素为单位）

$field->setMaxHeight(200);

这将使您字段的最大高度固定为 200 像素，并添加一个滚动条以查看剩余选项。

列宽

该字段支持小屏幕和大屏幕的自定义列宽。默认情况下，该字段为小屏幕使用 6 的值，为大屏幕使用 4 的值。基于 12 的 Bootstrap 网格，这意味着在小屏幕上您将看到每行两个选项，在大屏幕上您将看到每行三个选项。

您可以通过以下方式更改这些值

$field->setSmallWidth(4);  // 3 options per row on small devices
$field->setLargeWidth(3);  // 4 options per row on large devices

在最小屏幕上（即手机）选项将始终每行一个。

问题

请使用 GitHub 问题跟踪器 报告错误和要求功能。

贡献

我们非常欢迎您的贡献，以帮助我们使此项目变得更好。有关更多信息，请参阅 贡献。

归属

• 使用由 Font Awesome（Dave Gandy开发）。
• 使用由 Bootstrap（Bootstrap作者和Twitter, Inc共同开发）。

维护者

许可证

BSD-3-Clause 版权所有 © Praxis Interactive