Views

The ColorPicker provides options for configuring its popup view and implementing combined views.

Configuring Popup View

You can configure the ColorPicker to render either a ColorGradient or a ColorPalette in its popup. To choose between the two, provide either gradient or palette to the view input property of the component. By default, the ColorPicker uses the palette view.

class App extends React.Component {
    state = {
        view: 'gradient',
        value: 'rgba(237, 126, 50, 1)'
    };

    onRadioChange = (e) => {
        this.setState({
            view: e.target.value
        });
    }

    render() {
        return(
            <div>
                <div class="example-config">
                    <div>
                        <input
                            type={'radio'}
                            name={'view'}
                            value={'gradient'}
                            className={'k-radio'}
                            id={'gradient'}
                            checked={this.state.view === 'gradient'}
                            onChange={this.onRadioChange}
                        />
                        <label className={'k-radio-label'} for={'gradient'}>Gradient</label>
                    </div>
                    <div>
                        <input
                            type={'radio'}
                            name={'view'}
                            value={'palette'}
                            className={'k-radio'}
                            id={'palette'}
                            checked={this.state.view === 'palette'}
                            onChange={this.onRadioChange}
                        />
                        <label className={'k-radio-label'} for={'palette'}>Palette</label>
                    </div>
                </div>
                <div>
                    <ColorPicker
                        value={this.state.value}
                        view={this.state.view}
                    />
                </div>
            </div>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Implementing Combined Views

To set a combined view and render both the ColorPalette and ColorGradient in the popup of the ColorPicker, set the view property to combo.

class App extends React.Component {
    state = {
        selectedColor: 'rgba(237, 126, 50, 1)'
    };

    onChange = (e) => {
        this.setState({
            selectedColor: e.value
        })
    };

    render() {
        return(
            <div>
                <div style={{color: this.state.selectedColor}}>{ this.state.selectedColor }</div>
                <ColorPicker
                    view={'combo'}
                    value={this.state.selectedColor}
                    onChange={this.onChange}
                />
            </div>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
 /