Getting Started
Components
- Animated Number
- Auto Submit
- Carousel
- Character Counter
- Chartjs
- Checkbox Select All
- Clipboard
- Color Picker
- Confirmation New
- Content Loader
- Dialog
- Dropdown
- Glow
- Lightbox
- Notification
- Password Visibility
- Places Autocomplete
- Popover
- Prefetch
- Rails Nested Form
- Read More
- Remote Rails
- Reveal Controller
- Scroll Progress
- Scroll Reveal
- Scroll To
- Sortable
- Sound
- Textarea Autogrow
- Timeago
Installation
Install the package
Terminal$ yarn add @stimulus-components/color-picker
Register the controller in your application
app/javascript/controllers/index.jsimport { Application } from '@hotwired/stimulus' import ColorPicker from '@stimulus-components/color-picker' const application = Application.start() application.register('color-picker', ColorPicker)
This component is based on the @simonwep/pickr.
Example
Color Picker
Usage
Before starting, your must import the theme you want to use in your js
or in your sass
:
app/javascript/index.js
import '@simonwep/pickr/dist/themes/classic.min.css'
// import '@simonwep/pickr/dist/themes/monolith.min.css'
// import '@simonwep/pickr/dist/themes/nano.min.css'
// Or in your sass
@import '~@simonwep/pickr/dist/themes/classic.min.css'
// @import '~@simonwep/pickr/dist/themes/monolith.min.css'
// @import '~@simonwep/pickr/dist/themes/nano.min.css'
Basic usage:
app/views/index.html
<div data-controller="color-picker">
<input type="hidden" name="color" value="#667EEA" data-color-picker-target="input" />
<div data-color-picker-target="button"></div>
</div>
Configuration
Attribute | Default | Description | Optional |
---|---|---|---|
data-color-picker-theme-value | classic | Pickr theme you want to use. | ✅ |
See the Pickr documentation for more info in the library itself.
Extending Controller
You can use inheritance to extend the functionality of any Stimulus component:
app/javascript/controllers/color_picker_controller.js
import ColorPicker from "@stimulus-components/color-picker"
export default class extends ColorPicker {
connect() {
super.connect()
console.log("Do what you want here.")
// Pickr instance
this.picker
}
// Callback when the color is saved
onSave(color) {
super.onSave(color)
}
// You can override the components options with this getter.
// Here are the default options.
get componentOptions() {
return {
preview: true,
hue: true,
interaction: {
input: true,
clear: true,
save: true,
},
}
}
// You can override the swatches with this getter.
// Here are the default options.
get swatches() {
return [
"#A0AEC0",
"#F56565",
"#ED8936",
"#ECC94B",
"#48BB78",
"#38B2AC",
"#4299E1",
"#667EEA",
"#9F7AEA",
"#ED64A6",
]
}
}
This controller will automatically have access to targets defined in the parent class.
If you override the connect
, disconnect
or any other methods from the parent, you'll want to call super.method()
to make sure the parent functionality is executed.