README

简介

此包提供了一种颜色选择器编辑器，可在 Neos CMS 中使用 Neos.Ui 2+。

该编辑器基于 https://github.com/neos/neos-ui-extensibility-examples 中的示例，但进行了一些修改，例如样式、支持 alpha 通道，并有一个重置按钮来取消设置值。

示例

在这里查看。

安装

在您的站点包中运行此命令

composer require --no-update shel/neos-colorpicker

然后在您的项目目录中运行 composer update。

如何使用

添加一个字符串类型的属性，并按此示例配置编辑器

您的节点类型

"My.Site:Content.Text":
  superTypes:
    "Neos.Neos:Content": true
  ui:
    label: 'My text content'
  properties:
    textColor:
      type: string
      ui:
        label: 'Text color'
        reloadIfChanged: true
        inspector:
          group: 'text'
          editor: 'Shel.Neos.ColorPicker/ColorPickerEditor'
          editorOptions:
            # `mode` can be one of "rgba", "hsla", "hex", "preset", default: rgba
            mode: 'rgba'
            # Show saturation/hue/alpha (optional), boolean, default: false
            picker: true
            # Show hex/rgba fields (optional), boolean, default: false
            fields: true
            # Show preset colors (optional), array of colors or boolean (to disable)
            presetColors: ['#ff0000', '#0000ff', '#ffff00', ...]
            # OR you can show presetColors with alternative titles, that will be shown on hover
            # presetColors: [{color: '#ff0000', title: 'red'}, {color: '#0000ff', title: 'blue'}, {color: '#ffff00', title: 'yellow'}]
            # Hides the reset button if set to false
            allowEmpty: true

您的 Fusion

prototype(My.Site:Content.Text) < prototype(Neos.Neos:ContentComponent) {

  textColor = ${q(node).property('textColor')}

  renderer = afx`
    <div class="container" style={'color:' + props.textColor + ';'} style.@if.hasColor={props.textColor}>
        <h1>Hello World</h1>
        <p>Euismod massa quam arcu et mi arcu tincidunt maximus tortor lacus interdum vivamus cursus aliquam eget amet amet eget gravida et vivamus eget diam tortor.</p>
    </div>
  `
}

自定义

编辑器允许您通过 Settings.yaml 文件使用一些全局默认选项

Neos:
 Neos:
  Ui:
   frontendConfiguration:
    "Shel.Neos:ColorPickerEditor":
     # `mode` can be one of "rgba", "hsla", "hex", "preset"
     mode: "rgba"
     # Colors which are available for quick selection
     presetColors: ["#D0021B", "#F5A623", ...]

mode 允许您根据需要将选择的颜色值存储为不同的格式。当需要 hsl 格式以获取各个组件时，这可能很有帮助。

presetColors 允许您自定义可用于快速选择的颜色方块列表。

高级预设使用

presetColors 选项可以有两种形式。一种是一个简单的颜色字符串列表，另一种是具有 color（十六进制）和可选的 title 和 value 属性的对象列表。

• color - 在预设颜色方块中显示的颜色（十六进制）
• title - （可选）悬停时显示的文本
• value - （可选）在节点属性中存储的值，而不是颜色值

value 可以用来存储与预设颜色值不同的值。此值仅在 mode 设置为 preset 时使用，这反过来也会禁用颜色选择器和颜色字段。此选项的优点是您可以向用户显示颜色值，但将不同的值存储在节点属性中。例如，CSS 类名。

贡献

非常欢迎贡献！

请创建详细的 issue 和 PR。