README

ColorField 是一个用于输入十六进制、十六进制、RGB 或 RGBA 格式颜色的表单字段。

安装

只需使用 Composer

cd path/to/your/atk14/project/
composer require atk14/color-field

ln -s ../../vendor/atk14/color-field/src/app/fields/color_field.php app/fields/color_field.php

Pickr 集成

默认情况下，ColorField 渲染 <input type="text">，其中可以写入类似 #FFFFFF、rgb(22,33,44)、rgba(100,150,170,0.8) 的值。没什么有趣的...但 ColorField 是为了与一个叫做 Pickr 的优秀颜色选择器集成而设计的（见 https://github.com/Simonwep/pickr）。

Pickr 可以使用 npm 安装

npm install --save npm install @simonwep/pickr

并将一个小型的 JavaScript 工具链接到项目中

ln -s ../../../vendor/atk14/color-field/src/public/scripts/utils/color_picker_initializer.js public/scripts/utils/color_picker_initializer.js

现在编辑 gulpfile-admin.js（或 gulpfile.js）

var vendorStyles = [
  // ...

  // ColorPickr: Include one of the following themes
  "node_modules/@simonwep/pickr/dist/themes/classic.min.css"
  //"node_modules/@simonwep/pickr/dist/themes/monolith.min.css"
  //"node_modules/@simonwep/pickr/dist/themes/nano.min.css"
];

// ...

var vendorScripts = [
  // ...
  
  // ColorPickr: modern or es5 bundle (in here, the modern bundle fails)
  //"node_modules/@simonwep/pickr/dist/pickr.min.js"
  "node_modules/@simonwep/pickr/dist/pickr.es5.min.js"
];

// ...

var applicationScripts = [
  // ...

  "public/scripts/utils/color_picker_initializer.js",

  // ...
];

最后，将以下行放入 public/admin/scripts/application.js（或 public/scripts/application.js）中的 function common.init() 函数内。

UTILS.color_picker_initializer.init();

在 ATK14 应用程序中的使用

在表单中

<?php
// file: app/forms/pages/create_new_form.php
class CreateNewForm extends AdminForm {

  function set_up(){
    // ...
    $this->add_field("background_color", new ColorField([
      "label" => "Background color",
      "initial" => "#4455ff",
      "opacity" => false,
      "theme" => "classic", // "classic", "monolith" or "nano"
      "swatches" => ["#4455ff", "#3366ee", "#223388","rgb(122,233,77)"]
    ]));
  }
}

色卡

如果存在配置文件 config/theme/colors.json 或 config/theme/colors.yml，ColorField 将使用此文件中的颜色作为默认色卡。文件内容可能如下所示

{
  "primary": "#e75a76",
  "secondary": "#6c757d",
  "success": "#32a555",
  "info": "#17a2b8",
  "warning": "#ccb11b",
  "danger": "#e70000",
  "light": "#f5f5f5",
  "dark": "#343a40",
  "brand": "#307fa5"
}

测试

composer update --dev
cd test
../vendor/bin/run_unit_tests

许可证

ColorField 是免费软件，根据 MIT 许可证分发 条款