In this example, RGB (Red, Green, and Blue) codes are shown in the textbox as you select a color from the palette. In above two example, the HEX codes are displayed while using the color picker plug-in. useNative : boolean whether to use the native HTML5 color picker input. See online demo and code A demo of showing RGB code To use with bootstrap 4 library - you can set ColorInput::bsVersion property to. Upon clicking the icon, it will display color picker. An icon is displayed ahead of the textbox. You may display color picker as a component as well. Its occurrence is six times in the CSS file, so set the path of images according to the location where you have placed images or img folder, otherwise, color palette would not display correctly. Its path is set in the CSS file, for example:īackground-image: url(“././img/bootstrap-colorpicker/saturation.png”) The plug-in package also includes an “img” folder that contains a few small images. In the section, write the markup of the input field and initiate the plug-in by using the jQuery code.Īlso note, if you place the plug-in CSS file (bootstrap-colorpicker.css ) at your desired location other than default or what I used in the demo, take care of the image paths inside the CSS file. You also need to include the latest jQuery and Bootstrap’s JS files along with color picker plug-in file: In the section, include the Bootstrap and bootstrap-colorpicker CSS files. Wherever you click inside that color palette, the value of that color is displayed in the textbox.įor setting up this Bootstrap / jQuery based color picker, you need to include following files: As textbox is clicked, a small palette becomes visible where you may choose the color. The input field also shows the color HEX value. Below are the variants available when using the default Bootstrap v4 CSS. In this demo, a simple color picker becomes visible as the input field is clicked. You may download the color picker plug-in from the given link. The plug-in is available at the GitHub website and is developed by mjoinic. In this tutorial, I am going to show you a jQuery and Bootstrap based color picker plug-in that you may easily integrate into your website. There may be many other uses of color pickers depending on the scenarios and nature of visitors of the website. However, color pickers can generally be used in the admin interface for allowing visitors setting the customized theme as per liking. The purpose can be selecting a color of theme, backgrounds, or other sections of the website. The color picker is a component that you may require for the front-end interface for the end users.
0 Comments
Leave a Reply. |