![]() ![]() 'color-picker' => App\View\Components\ColorPicker::class, Make sure to replace the default one with your own class: [ It's important in the above snippet that you call parent::options() so any options passed directly to the component are still applied as well.Īfter overwriting the component we'll need to register it in our blade-ui-kit.php config file. If you'd like to set some sensible defaults for all your color-picker component usages you can do so by overwriting the component class and options method: true, You cannot use any JavaScript language specific options like callbacks. Please note that only scalar values are supported. Below is an example where we allow opacity to be set: true]" />įor a full reference of all options, please consult the Pickr documentation. This requires you to pass a PHP array with scalar values. You can also pass options to Pickr with the options attribute. When re-rendering the form, the color-picker component will remember the old value: For example, you might want to apply some validation in the backend, but also make sure the user doesn't lose their input data when you re-render the form with any validation errors. The color-picker component also supports old values that were set. What's also nice is that when a color has been chosen, the title attribute on the parent div will be filled in with the color code so it's visible when the user hovers over it. The is used by Pickr to render the color picker. This will output the following HTML (inline JS has been omitted): ![]() The most basic usage of the component is to set a name attribute: ![]() While the color-picker component works out-of-the-box when you've set the directives, we recommend that you install and compile its JavaScript libraries before you deploy to production: It makes use of the Pickr library behind the scenes. The color-picker component provides an easy way to integrate a color picker into your forms. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |