Search results

Render Palette alone in React ColorPicker component

03 Mar 2021 / 1 minute to read

To render the Palette alone in ColorPicker, specify the mode property as Palette, and set the modeSwitcher property to false.

In the following sample, the showButtons property is disabled to hide the control buttons and it renders only the Palette area.

Source
Preview
index.tsx
index.html
styles.css
index.jsx
Copied to clipboard
import { ColorPickerComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";

class App extends React.Component<{}, {}> {
    render() {
        return (
          <div id='container'>
            <div className='wrap'>
                <h4>Choose Color</h4>
                <ColorPickerComponent mode = "Palette" modeSwitcher={false} showButtons ={false}></ColorPickerComponent>
            </div>
          </div>
        );
    }
};
ReactDOM.render(<App />, document.getElementById('element'));
Copied to clipboard
<!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>
Copied to clipboard
#loader {
    color: #008cff;
    font-family: 'Helvetica Neue', 'calibiri';
    font-size: 14px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

#element+.e-container {
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
}

.wrap {
  margin: 0 auto;
  width: 300px;
  text-align: center;
}

h4 {
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
    font-size: 14px;
}
Copied to clipboard
import { ColorPickerComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
class App extends React.Component {
    render() {
        return (<div id='container'>
            <div className='wrap'>
                <h4>Choose Color</h4>
                <ColorPickerComponent mode="Palette" modeSwitcher={false} showButtons={false}></ColorPickerComponent>
            </div>
          </div>);
    }
}
;
ReactDOM.render(<App />, document.getElementById('element'));

To render Picker alone specify the mode property as ‘Picker’.