ColorPicker 调色板

在线示例

ColorPicker - 调色板 可以让用户预览并选择一种颜色。该组件是一个按钮，点击后打开调色面板。按钮颜色是用户选中的颜色。以 String 类型返回所选颜色的十六进制值。

组件的 XML 名称：colorPicker。

color picker basic

数据感知的 ColorPicker

如需创建一个连接至数据的调色板，使用 dataContainer 和 property 属性。

@JmixEntity
@Table(name = "UIEX1_CAR")
@Entity(name = "uiex1_Car")
public class Car {
    @JmixGeneratedValue
    @Column(name = "ID", nullable = false)
    @Id
    private UUID id;

    @Column(name = "BRAND")
    private String brand;

    @Column(name = "MODEL")
    private String model;

    @Column(name = "COLOR_HEX")
    private String colorHex;
}
<data>
    <instance id="carDc"
              class="ui.ex1.entity.Car">
        <fetchPlan extends="_base"/>
        <loader/>
    </instance>
</data>
<layout>
    <colorPicker caption="Color of the car"
                 dataContainer="carDc"
                 property="colorHex"/>
</layout>

属性

标签页可见性

默认情况下，只显示 RGB 标签页。但是也可以决定是否显示 HSV 和 swatches 标签页。

<colorPicker caption="Choose a color"
             hsvVisible="true"
             rgbVisible="true"
             swatchesVisible="true"/>

一次只能打开一个标签页。
color picker tabs

标题

下列属性用来定义对应的标题：

  • blueSliderCaption

  • buttonCaption

  • cancelButtonCaption

  • confirmButtonCaption

  • greenSliderCaption

  • hueSliderCaption

  • lookupAllCaption

  • lookupBlueCaption

  • lookupGreenCaption

  • lookupRedCaption

  • popupCaption

  • redSliderCaption

  • saturationSliderCaption

  • swatchesTabCaption

  • valueSliderCaption

defaultCaptionEnabled

使用该属性可以将选中颜色的 HEX 值作为按钮的标题展示。如需此功能，将该属性设置为 true 且不要设置 buttonCaption 属性。

<colorPicker id="colorPicker"
             defaultCaptionEnabled="true"/>
color picker hex caption

historyVisible

用该属性在面板底部展示用户之前选择过的颜色。

<colorPicker caption="Choose a color"
             historyVisible="true"/>
color picker history

事件和处理器

如需使用 Jmix Studio 生成处理器的桩代码，需要在界面 XML 描述或者 Jmix UI 层级结构面板选中该组件，然后用 Jmix UI 组件面板的 Handlers 标签页生成。

或者可以使用界面控制器顶部面板的 Generate Handler 按钮。

ContextHelpIconClickEvent

参阅 ContextHelpIconClickEvent。

ValueChangeEvent

参阅 ValueChangeEvent。

Validator

为组件添加 validator 实例。如果值验证失败，validator 必须抛出 ValidationException 异常。

ColorPicker XML 属性

可以使用 Studio 界面设计器的 Jmix UI 组件面板查看和编辑组件的属性。

align - blueSliderCaption - box.expandRatio - buttonCaption - cancelButtonCaption - caption - captionAsHtml - colspan - confirmButtonCaption - contextHelpText - contextHelpTextHtmlEnabled - css - dataContainer - defaultCaptionEnabled - description - descriptionAsHtml - editable - enable - greenSliderCaption - height - historyVisible hsvVisible - htmlSanitizerEnabled - hueSliderCaption - icon - id - lookupAllCaption - lookupBlueCaption - lookupGreenCaption - lookupRedCaption - rgbVisible - popupCaption - property - redSliderCaption - required - requiredMessage - responsive - rowspan - saturationSliderCaption - stylename - swatchesTabCaption - swatchesVisible - tabIndex - valueSliderCaption - visible - width