By default, the ColorPicker will be rendered using SplitButton and open the pop-up to access the ColorPicker. To
render the ColorPicker container alone and to access it directly, render it as inline. It can be achieved by setting the inline
property to true
.
The following sample shows the inline type rendering of ColorPicker.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ColorPickerComponent } from '@syncfusion/ej2-react-inputs';
//To render component as inline.
class App extends React.Component<{}, {}> {
render() {
return (
<div id='container'>
<div className='wrap'>
<h4>Choose Color</h4>
<ColorPickerComponent inline={true} showButtons={false}></ColorPickerComponent>
</div>
</div>
);
}
};
ReactDOM.render(<App />, document.getElementById('element'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 React ColorPicker</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="React ColorPicker Component" />
<meta name="author" content="Syncfusion" />
<link href="styles.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='element'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ColorPickerComponent } from '@syncfusion/ej2-react-inputs';
//To render component as inline.
class App extends React.Component {
render() {
return (<div id='container'>
<div className='wrap'>
<h4>Choose Color</h4>
<ColorPickerComponent inline={true} showButtons={false}></ColorPickerComponent>
</div>
</div>);
}
}
;
ReactDOM.render(<App />, document.getElementById('element'));
The
showButtons
property is disabled in this sample because the control buttons are not needed for inline type. To know about the control buttons functionality, refer to theshowButtons
sample.
By default, the Picker
area will be rendered at initial load. To render the Palette area while opening the ColorPicker pop-up, and specify the mode
property as Palette
.
In the following sample, it will render the Palette
at initial load.
import { ColorPickerComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
//To render palette at initial load.
class App extends React.Component<{}, {}> {
public render() {
return (
<div id='container'>
<div className='wrap'>
<h4>Choose Color</h4>
<ColorPickerComponent mode="Palette"/>
</div>
</div>
);
}
};
ReactDOM.render(<App />, document.getElementById('element'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 React ColorPicker</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="React ColorPicker Component" />
<meta name="author" content="Syncfusion" />
<link href="styles.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='element'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
#loader {
color: #008cff;
font-family: 'Helvetica Neue', 'calibiri';
font-size: 14px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.wrap {
margin: 0 auto;
width: 300px;
text-align: center;
}
h4 {
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
font-size: 14px;
}
import { ColorPickerComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
//To render palette at initial load.
class App extends React.Component {
render() {
return (<div id='container'>
<div className='wrap'>
<h4>Choose Color</h4>
<ColorPickerComponent mode="Palette"/>
</div>
</div>);
}
}
;
ReactDOM.render(<App />, document.getElementById('element'));
The value
property can be used to specify the color value to the
ColorPicker. It supports either three
or six
digit hex codes. To include opacity
, set the color value as four
or eight
digit hex code.
In the following sample, the color value sets as four
digit hex code, the last digit represents the opacity
value.
import { ColorPickerComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
//To set color value.
class App extends React.Component<{}, {}> {
public render() {
return (
<div id='container'>
<div className='wrap'>
<h4>Choose Color</h4>
<ColorPickerComponent value="035a"/>
</div>
</div>
);
}
};
ReactDOM.render(<App />, document.getElementById('element'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 React ColorPicker</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="React ColorPicker Component" />
<meta name="author" content="Syncfusion" />
<link href="styles.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='element'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
#loader {
color: #008cff;
font-family: 'Helvetica Neue', 'calibiri';
font-size: 14px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.wrap {
margin: 0 auto;
width: 300px;
text-align: center;
}
#preview {
background-color: #ba68c8;
height: 50px;
width: 100%;
}
h4 {
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
font-size: 14px;
}
import { ColorPickerComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
//To set color value.
class App extends React.Component {
render() {
return (<div id='container'>
<div className='wrap'>
<h4>Choose Color</h4>
<ColorPickerComponent value="035a"/>
</div>
</div>);
}
}
;
ReactDOM.render(<App />, document.getElementById('element'));
The
value
property supports hex code with or without#
prefix.