Hello everyone! I'm @hiroki_tanaka, the producer of Mayu Sakuma.
The other day, I have introduced select2, a plugin that makes multiple selections of selectbox fashionable in Rails 6.0 series. At that time, I was a little addicted to the difference from the introduction method up to Rails 5 series, so I summarized what I investigated.
select2 is a JavaScript library that makes the HTML selectbox design fashionable. our official site is here. → select2 It is a plugin that allows you to easily implement not only a single-select selectbox UI but also a multi-select selectbox.
--Before introducing select2
--Multiple selection pull-down after introducing select2
The introduction of select2 in Rails5 series was introduced using Gem, but from Rails 6.0, Webpacker is used instead of Gem. I would like to introduce the procedure one by one.
Execute the following command to install select2 in your Rails application. At this time, not only select2 but also jQuery (and popper.js) required to install select2 and bootstrap, which is the UI part of select2, will be installed.
$ yarn add jquery
$ yarn add popper.js
$ yarn add bootstrap
$ yarn add select2
Set the Rails application webpack / environment.js
so that jQuery can be called from any Rails file.
config/webpack/environment.js
const { environment } = require('@rails/webpacker')
//To use jQuery and Bootstrap JS
const webpack = require('webpack')
environment.plugins.prepend(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: 'popper.js'
})
)
module.exports = environment
Also, add JQuery to the packs / application.js
manifest.
app/javascript/packs/application.js
require("jquery")
Make the following two settings to enable bootstrap to be used in Rails applications.
app/javascript/packs/application.js
import 'bootstrap';
import '../stylesheets/application';
app/javascript/stylesheets/application.scss
@import '~bootstrap/scss/bootstrap';
Bootstrap installed in webpacker for all View files of Rails application ・ Set to the original layouts / application.html.erb
so that jQuery can be used.
app/views/layouts/application.html.erb
<head>
<%= stylesheet_pack_tag "application", media: "all" %>
<%= javascript_pack_tag 'application' %>
</head>
Define a selectbox that makes multiple selections on the application's erb.
At this time, if select_tag is set to multiple: true
as an option, it becomes a selectbox that can be selected multiple times.
Then, write in the JS file corresponding to the erb file so that the corresponding selectbox uses select2.
app/views/test.html.erb
<%= javascript_pack_tag 'test' %>
<%= select_tag('animal', options_for_select([['Dog', 'dog'], ['Cat', 'cat'], ['Bird', 'bird'], ['Ushi', 'cow'], ['Snake', 'snake']]), class: "form-control", multiple: true) %>
app/javascript/packs/test.js
$(function () {
$('#animal').select2();
});
There are various options in select2. → select2 Options These options can be set with jQuery. The following is an example of option settings.
app/javascript/packs/test.js
$(function () {
$('#animal').select2({
width: 'resolve' //Dynamically change the width according to the page size.
theme: "classic" //Change to the classic UI.
debug: true //Output debug messages to the browser console.
});
});
I feel that the introduction of select2 has become easier by using yarn. However, I often don't understand the internal behavior of select2, so I would like to deepen my understanding.
Recommended Posts