Version: 3.0.0

ColorPicker

โ€‹

Description

Dialog which allows the user to select color.

Example

import React from 'react';
import { View, ColorPicker, Scene, Prism } from 'magic-script-components';
export default class MyApp extends React.Component {
onColorChanged = event => {
// event.Color
console.log('onColorChanged event received: ', event);
};
onColorConfirmed = event => {
// event.Color
console.log('onColorConfirmed event received: ', event);
};
onColorCanceled = event => {
// event.Color
console.log('onColorCanceled event received: ', event);
};
render() {
return (
<Scene>
<Prism size={[2, 2, 1]} >
<View name='main-view' alignment={'center-center'}>
<ColorPicker
height={0.15}
color={[1, 0.5, 1, 0.8]}
onColorChanged={this.onColorChanged}
onColorConfirmed={this.onColorConfirmed}
onColorCanceled={this.onColorCanceled} />
</View>
</Prism>
</Scene>
);
}
}

Common Events

Common Properties

Create Properties

NameTypeDefault ValueRequiredDescriptionLumin OsIOSAndroid
colorstring[1.0, 1.0, 1.0, 1.0]NThe initial color for the color picker.๐Ÿ‘๐Ÿ‘๐Ÿ‘
heightnumber0NOptional height for the color picker.๐Ÿ‘

Element Properties

NameTypeDefault ValueDescription
colorstring[1.0, 1.0, 1.0, 1.0]The initial color for the color picker.

Component specific events

NameEvent FieldDescription
onColorChangedColor: stringNotifiy when color in picker has changed
onColorConfirmedColor: stringNotify when user confirm selected color
onColorCanceledColor: stringNotify when user cancel selected color