Gone are the days to manually enter in hex codes to select colors.
<style>
.square .clr-field button, .circle .clr-field button {
width: 22px;
height: 22px;
left: 5px;
right: auto;
border-radius: 5px;
}
.square .clr-field input, .circle .clr-field input {
padding-left: 36px;
}
.circle .clr-field button {
border-radius: 50%;
}
</style>
<h:form>
<div class="card">
<p:growl>
<p:autoUpdate />
</p:growl>
<h5>Popup</h5>
<div class="ui-fluid grid formgrid">
<div class="field col-12 md:col-2">
<p:outputLabel for="@next" value="Ajax" />
<p:colorPicker id="ajax" value="#{colorView.ajax}"
clearButton="true" closeButton="true" alpha="false">
<p:ajax event="open" listener="#{colorView.onPopupOpened}" />
<p:ajax event="close" listener="#{colorView.onPopupClosed}" update="@this" />
</p:colorPicker>
</div>
<div class="field col-12 md:col-2">
<p:outputLabel for="pill" value="Pill (horizontal)" />
<p:colorPicker id="pill" value="#{colorView.pill}" theme="pill"
formatToggle="true" clearButton="true" closeButton="true"
alpha="false">
<p:ajax event="change" listener="#{colorView.onColorChange}" />
</p:colorPicker>
</div>
<div class="field col-12 md:col-2">
<p:outputLabel for="@next" value="Polaroid (skinny)" />
<p:colorPicker id="polaroid" value="#{colorView.polaroid}"
theme="polaroid" formatToggle="true" clearButton="true"
closeButton="true" alpha="false">
<p:ajax event="change" listener="#{colorView.onColorChange}" />
</p:colorPicker>
</div>
<div class="field col-12 md:col-2">
<p:outputLabel for="@next" value="Large" />
<p:colorPicker id="large" value="#{colorView.large}" theme="large"
formatToggle="true" clearButton="true" closeButton="true"
forceAlpha="true">
<p:ajax event="change" listener="#{colorView.onColorChange}" />
</p:colorPicker>
</div>
<div class="field col-12 md:col-2">
<p:outputLabel for="@next" value="Swatches Only" />
<p:colorPicker id="swatches" value="#{colorView.swatches}"
swatchesOnly="true" theme="polaroid" clearButton="false"
closeButton="false"
swatches="#264653, #2a9d8f, #e9c46a, #f4a261, #e76f51, #d62828, #023e8a, #0077b6, #0096c7, #00b4d8, #48cae4">
<p:ajax event="change" listener="#{colorView.onColorChange}" />
</p:colorPicker>
</div>
<div class="field col-12 md:col-2 thumbnail">
<p:outputLabel for="@next" value="Thumbnail" />
<p:colorPicker id="thumbnail" value="#{colorView.thumbnail}"
swatchesOnly="true" theme="polaroid" clearButton="true"
closeButton="true"
swatches="#264653, #2a9d8f, #e9c46a, #f4a261, #e76f51, #d62828, #023e8a, #0077b6, #0096c7, #00b4d8, #48cae4">
<p:ajax event="change" listener="#{colorView.onColorChange}" />
</p:colorPicker>
</div>
<div class="field col-12 md:col-2">
<p:outputLabel for="@next" value="Dark Mode" />
<p:colorPicker id="dark" value="#{colorView.dark}" theme="pill"
themeMode="dark" clearButton="true" closeButton="true"
formatToggle="true"
swatches="#067bc2, #84bcda, #80e377, #ecc30b, #f37748, #d56062">
<p:ajax event="change" listener="#{colorView.onColorChange}" />
</p:colorPicker>
</div>
<div class="field col-12 md:col-2">
<p:outputLabel for="@next" value="Light Mode" />
<p:colorPicker id="light" value="#{colorView.light}" theme="pill"
themeMode="light" clearButton="true" closeButton="true"
formatToggle="true"
swatches="#067bc2, #84bcda, #80e377, #ecc30b, #f37748, #d56062">
<p:ajax event="change" listener="#{colorView.onColorChange}" />
</p:colorPicker>
</div>
<div class="field col-12 md:col-2">
<p:outputLabel for="@next" value="Alpha" />
<p:colorPicker id="alpha" value="#{colorView.alpha}"
clearButton="true" closeButton="true" alpha="true"
forceAlpha="true">
<p:ajax event="change" listener="#{colorView.onColorChange}" />
</p:colorPicker>
</div>
<div class="field col-12 md:col-2">
<p:outputLabel for="rgb" value="RGB" />
<p:colorPicker id="rgb" value="#{colorView.rgb}" theme="large"
clearButton="true" closeButton="true" format="rgb">
<p:ajax event="change" listener="#{colorView.onColorChange}" />
</p:colorPicker>
</div>
<div class="field col-12 md:col-2">
<p:outputLabel for="@next" value="HSL" />
<p:colorPicker id="hsl" value="#{colorView.hsl}" theme="large"
clearButton="true" closeButton="true" format="hsl">
<p:ajax event="change" listener="#{colorView.onColorChange}" />
</p:colorPicker>
</div>
<div class="field col-12 md:col-2 circle">
<p:outputLabel for="@next" value="Circle" />
<p:colorPicker id="circle" value="#{colorView.circle}"
format="auto">
<p:ajax event="change" listener="#{colorView.onColorChange}" />
</p:colorPicker>
</div>
<div class="field col-12 md:col-2 square">
<p:outputLabel for="@next" value="Square" />
<p:colorPicker id="square" value="#{colorView.square}"
format="auto">
<p:ajax event="change" listener="#{colorView.onColorChange}" />
</p:colorPicker>
</div>
<div class="field col-12 md:col-2">
<p:outputLabel for="@next" value="RTL" />
<p:colorPicker id="rtl" value="#{colorView.rtl}" theme="large"
dir="rtl" formatToggle="true" clearButton="true"
closeButton="true" forceAlpha="true">
<p:ajax event="change" listener="#{colorView.onColorChange}" />
</p:colorPicker>
</div>
<div class="field col-12 md:col-2">
<p:outputLabel for="@next" value="Disabled" />
<p:colorPicker disabled="true" value="#000000" />
</div>
<div class="field col-12 md:col-2">
<p:outputLabel for="@next" value="Error" />
<p:colorPicker value="#FFFFFF" class="ui-state-error" />
</div>
<div class="field col-12 md:col-2 mt-5">
<span class="ui-float-label">
<p:colorPicker clearButton="true" closeButton="true" alpha="false" />
<p:outputLabel for="@previous" value="Float Label" />
</span>
</div>
</div>
<p:commandButton value="Open Dialog" type="button" icon="pi pi-external-link" onclick="PF('dlg').show()"/>
</div>
<p:dialog header="Pick Color" widgetVar="dlg" minHeight="50" width="350" showEffect="fade" modal="true">
<div style="height: 300px">
<p:outputLabel for="@next" value="Pick Color:" />
<p:colorPicker id="dialogPicker" clearButton="true" closeButton="true" alpha="false" />
</div>
<f:facet name="footer">
<p:commandButton type="button" value="Close" style="width: 5rem" onclick="PF('dlg').hide()"/>
</f:facet>
</p:dialog>
</h:form>
@Named
@RequestScoped
public class ColorView {
private String colorInline;
private String ajax = "#2a9d8f";
private String swatches = "#e9c46a";
private String thumbnail = "#ecc30b";
private String pill = "#e76f51";
private String large = "#d62828";
private String polaroid = "#023e8a";
private String light = "#faf200";
private String dark = "#000000";
private String alpha = "#00b4d880";
private String hsl = "hsla(101, 85%, 40%, 1)";
private String rgb = "rgb(244,162,97)";
private String square = "rgb(0, 183, 255)";
private String circle = "#cc458faa";
private String rtl = "#A427AE";
public void onColorChange(AjaxBehaviorEvent e) {
ColorPicker picker = (ColorPicker) e.getComponent();
FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Color changed: " + picker.getValue(), null);
FacesContext.getCurrentInstance().addMessage(null, msg);
}
public void onPopupClosed(AjaxBehaviorEvent e) {
ColorPicker picker = (ColorPicker) e.getComponent();
FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Popup closed: " + picker.getValue(), null);
FacesContext.getCurrentInstance().addMessage(null, msg);
}
public void onPopupOpened(AjaxBehaviorEvent e) {
ColorPicker picker = (ColorPicker) e.getComponent();
FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Popup opened: " + picker.getValue(), null);
FacesContext.getCurrentInstance().addMessage(null, msg);
}
public void save() {
FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Color saved: " + getAjax(), null);
FacesContext.getCurrentInstance().addMessage(null, msg);
}
public String getColorInline() {
return colorInline;
}
public void setColorInline(String colorInline) {
this.colorInline = colorInline;
}
public String getAjax() {
return ajax;
}
public void setAjax(String ajax) {
this.ajax = ajax;
}
public String getSwatches() {
return swatches;
}
public void setSwatches(String swatches) {
this.swatches = swatches;
}
public String getThumbnail() {
return thumbnail;
}
public void setThumbnail(String thumbnail) {
this.thumbnail = thumbnail;
}
public String getPill() {
return pill;
}
public void setPill(String pill) {
this.pill = pill;
}
public String getLarge() {
return large;
}
public void setLarge(String large) {
this.large = large;
}
public String getPolaroid() {
return polaroid;
}
public void setPolaroid(String polaroid) {
this.polaroid = polaroid;
}
public String getAlpha() {
return alpha;
}
public void setAlpha(String alpha) {
this.alpha = alpha;
}
public String getHsl() {
return hsl;
}
public void setHsl(String hsl) {
this.hsl = hsl;
}
public String getRgb() {
return rgb;
}
public void setRgb(String rgb) {
this.rgb = rgb;
}
public String getSquare() {
return square;
}
public void setSquare(String square) {
this.square = square;
}
public String getCircle() {
return circle;
}
public void setCircle(String circle) {
this.circle = circle;
}
public String getDark() {
return dark;
}
public void setDark(String dark) {
this.dark = dark;
}
public String getLight() {
return light;
}
public void setLight(String light) {
this.light = light;
}
public String getRtl() {
return rtl;
}
public void setRtl(String rtl) {
this.rtl = rtl;
}
}