Color Presets
The ColorPalette provides a set of predefined color palettes such as office, basic, and apex.
The following example demonstrates how to use the predefined color presets of the ColorPalette.
- Example
- View Source
- Open In Stackblitz
class App extends React.Component {
render() {
return (
<div>
<div className='row'>
<div className="col-md-3">
<h4>Office</h4>
<ColorPalette tileSize={16} palette="office" />
</div>
<div className="col-md-3">
<h4>Apex</h4>
<ColorPalette tileSize={16} palette="apex" />
</div>
<div className="col-md-3">
<h4>Austin</h4>
<ColorPalette tileSize={16} palette="austin" />
</div>
<div className="col-md-3">
<h4>Clarity</h4>
<ColorPalette tileSize={16} palette="clarity" />
</div>
</div>
<div className="row">
<div className="col-md-3">
<h4>Slipstream</h4>
<ColorPalette tileSize={16} palette="slipstream" />
</div>
<div className="col-md-3">
<h4>Metro</h4>
<ColorPalette tileSize={16} palette="metro" />
</div>
<div className="col-md-3">
<h4>Flow</h4>
<ColorPalette tileSize={16} palette="flow" />
</div>
<div className="col-md-3">
<h4>Hardcover</h4>
<ColorPalette tileSize={16} palette="hardcover" />
</div>
</div>
<div className="row">
<div className="col-md-3">
<h4>Trek</h4>
<ColorPalette tileSize={16} palette="trek" />
</div>
<div className="col-md-3">
<h4>Verve</h4>
<ColorPalette tileSize={16} palette="verve" />
</div>
<div className="col-md-3">
<h4>Basic</h4>
<ColorPalette tileSize={16} palette="basic" />
</div>
<div className="col-md-3">
<h4>Monochrome</h4>
<ColorPalette tileSize={16} palette="monochrome" />
</div>
</div>
</div>
);
}
}
ReactDOM.render(
<App />,
document.querySelector('my-app')
);