This example demonstrates how to render a Color Picker into the Menu of a Split Button. Use the Color Picker Button below to create a duotone by selecting the background color that should be applied to the image.
Begin by creating a Menu instance that will house the ColorPicker instance. Next, instantiate a new Button of type "split," setting its "menu" attribute to the Menu instance.
Once the new Button is created, add a listener for its "appendTo" event that will be used to render its Menu instance into the same DOM element specified as the containing element for the Button.
Once the new Button is created, add a listener for its "option" event that will be used to create a new ColorPicker instance. (Defering the creation of the ColorPicker until the firing of the "option" event improves the intial load time of the Button instance.)
Lastly, add some styles that customize both the Button's text label and the ColorPicker instance.
Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.