README

关于

ColorPickerPlus 是一个用于 Simonwep/pickr JavaScript 颜色选择库的 Symfony 4 包装器。

功能

• 添加一个自定义的 FormType，用于显示 JavaScript 颜色选择器
• 向验证器添加新的自定义 Constraint
• 添加一些 Twig 过滤器以转换颜色

要求

查看 composer.json

安装

$ composer require wandi/color-picker-bundle

安装资源

php bin/console assets:install public

实体

我们建议您使用带有 alpha 的十六进制颜色代码（AARRGGBB hex）进行存储，因为它是最短的规范，长度仅为 9 个字符。

稍后，如果需要，您可以将其转换为 HSL、HSLA、RGB 和 RGBA（如下所示）。

此包包含一个自定义约束 HexColor，用于验证此格式，请参阅以下示例中的 color 属性

namespace App\Entity;

use Doctrine\ORM\Mapping as ORM;
use Symfony\Component\Validator\Constraints as Assert;
use Wandi\ColorPickerBundle\Validator\Constraints as WandiAssert;

/**
 * Tag
 *
 * @ORM\Table(name="tag")
 * @ORM\Entity(repositoryClass="App\Repository\TagRepository")
 */
class Tag
{
    /**
     * @var int
     *
     * @ORM\Column(name="id", type="integer")
     * @ORM\Id
     * @ORM\GeneratedValue(strategy="AUTO")
     */
    private $id;
    
    /**
     * @var string
     *
     * @ORM\Column(name="title", type="string", length=255)
     * @Assert\NotBlank(message="You must fill the title.")
     */
    private $title;
    
    /**
     * @var string
     *
     * @ORM\Column(name="color", type="string", length=9)
     * @WandiAssert\HexColor()
     * @Assert\NotBlank(message="You must choose a color.")
     */
    private $color;
    
    // some getters/setters...
}

表单类型

此包包含一个自定义 ColorPickerType，它将添加 JavaScript 颜色选择器到您选择的输入。

所有 Simonwep/pickr 选项都是可覆盖的，请参阅 完整的配置参考。

namespace App\Form\Type;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;
use Wandi\ColorPickerBundle\Form\Type\ColorPickerType;
use Wandi\ColorPickerBundle\PickerOptions\Theme;

/**
 * Class TagType
 */
class TagType extends AbstractType
{
    /**
     * @param FormBuilderInterface $builder
     * @param array                $options
     */
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        // e.g. we override pickr_options theme
        $options = [
            'pickr_options' => [
                'theme' => Theme::NANO,
                // ...
            ],
        ];
    
        $builder
            ->add('title', TextType::class, ['label' => 'Title'])
            ->add('color', ColorPickerType:class, $options)
            ;
    }

    /**
     * @param OptionsResolver $resolver
     */
    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults(
            array(
                'data_class' => 'App\Entity\Tag',
            )
        );
    }
}

表单主题

包含我们的 表单主题，它包含处理所有 JavaScript 的小部件。

# config/packages/twig.yaml
twig:
    # ...
    form_themes:
        - '@WandiColorPicker/form/fields.html.twig'

翻译

Simonwep/pickr 有 3 个带有文本的按钮（清除、保存、取消）。

如果您需要更改翻译或添加自己的区域设置，只需覆盖 ColorPickerBundle.xx.yaml。

Twig 过滤器

如果您想转换颜色，请使用以下任一 Twig 过滤器

<h2>Without Alpha Channel</h2>

Test hex: {{ tag.color|wandi_color_picker_convert(constant("Wandi\\ColorPickerBundle\\Twig\\ExtensionColorExtension::COLOR_HEX")) }}
> {# #FF851B #}
Test rgb: {{ tag.color|wandi_color_picker_convert(constant("Wandi\\ColorPickerBundle\\Twig\\ExtensionColorExtension::COLOR_RGB")) }}
> {# rgb(255, 133, 27) #}
Test hsl: {{ tag.color|wandi_color_picker_convert(constant("Wandi\\ColorPickerBundle\\Twig\\ExtensionColorExtension::COLOR_HSL")) }}
> {# hsl(27.89474, 100%, 55.29412%) #}

<h2>With Alpha Channel</h2>

Test hex: {{ tag.color|wandi_color_picker_convert(constant("Wandi\\ColorPickerBundle\\Twig\\ExtensionColorExtension::COLOR_HEX")) }}
> {# #39855AC4 #}
Test rgb: {{ tag.color|wandi_color_picker_convert(constant("Wandi\\ColorPickerBundle\\Twig\\ExtensionColorExtension::COLOR_RGB")) }}
> {# rgba(57, 133, 90, 0.77) #}
Test hsl: {{ tag.color|wandi_color_picker_convert(constant("Wandi\\ColorPickerBundle\\Twig\\ExtensionColorExtension::COLOR_HSL")) }}
> {# hsla(146.05263, 40%, 37.2549%, 0.77) #}

请随意使用这些 辅助函数 动态设置 HTML 内联样式（例如 color 或 background-color）。

如果您需要知道颜色的亮度，您还可以使用过滤器

{{ tag.color|wandi_color_picker_get_brightness }}
> {# will return Wandi\ColorPickerBundle\Twig\Extension\ColorExtension::BRIGHTNESS_LIGHT or Wandi\ColorPickerBundle\Twig\Extension\ColorExtension::BRIGHTNESS_DARK depending on the color value #}

如果您将动态背景颜色应用于 HTML 元素，则更改文本颜色也可能很有用。

WandiEasyAdminPlusBundle

如果您正在使用 EasyAdminPlusBundle，这是 EasyAdminBundle 的包装器，您可以在管理区域轻松使用此包。

表单主题

/!\ 如果您正在使用 EasyAdminBundle 2.3.1+ /!\

您必须包含我们的 表单主题，它包含处理所有 JavaScript 的小部件。

# config/packages/twig.yaml
easy_admin:
    design:
        form_theme:
            - '@EasyAdmin/form/bootstrap_4.html.twig'
            - '@FOSCKEditor/Form/ckeditor_widget.html.twig'

列表/显示

- { property: color, label: 'Color', template: '@WandiEasyAdminPlus/templates/wandi_color_picker.html.twig' }

新建/编辑

- { property: color, label: 'Color', type: 'Wandi\ColorPickerBundle\Form\Type\ColorPickerType' }