[RUBY] Comment installer la bibliothèque JavaScript "select2" qui rend les sélections multiples de selectbox à la mode dans Rails 6.0
introduction
Bonjour à tous! Je suis @hiroki_tanaka, le producteur de Mayu Sakuma.
L'autre jour, j'ai présenté select2, un plug-in qui permet de sélectionner plusieurs sélections à la mode dans la série Rails 6.0. À cette époque, j'étais un peu accro à la différence entre la méthode d'introduction et la série Rails 5, j'ai donc résumé ce que j'avais enquêté.
Environnement d'utilisation
- Ruby 2.6.6
- Rails 6.0.2
Qu'est-ce que select2
select2 est une bibliothèque JavaScript qui rend le design HTML selectbox à la mode. notre site officiel est ici. → select2 Il s'agit d'un plug-in qui peut facilement implémenter non seulement l'interface utilisateur de la boîte de sélection à sélection unique, mais également la boîte de sélection à sélection multiple.
Exemple sur le site officiel
--Avant de présenter select2
--Multiple sélection déroulante après l'introduction de select2
Comment installer dans Rails 6.0
L'introduction de select2 dans la série Rails5 a été introduite en utilisant Gem, mais à partir de Rails 6.0, Webpacker est utilisé à la place de Gem. Je voudrais présenter la procédure une par une.
- La page suivante explique en détail l'introduction de select2 dans Rails 5. → [Rails5] Créez une boîte de sélection qui permet plusieurs sélections avec Select2
1. Présentation de la bibliothèque requise pour select2 with yarn
Exécutez la commande suivante pour installer select2 dans votre application Rails. À ce stade, non seulement select2 mais également jQuery (et popper.js) requis pour installer select2 et bootstrap, qui est la partie UI de select2, sera installé.
$ yarn add jquery
$ yarn add popper.js
$ yarn add bootstrap
$ yarn add select2
2. Configurer pour utiliser jQuery / popper.js sur Rails
Définissez l'application Rails'webpack / environment.js` pour que jQuery puisse être appelé à partir de n'importe quel fichier Rails.
config/webpack/environment.js
const { environment } = require('@rails/webpacker')
//Pour utiliser jQuery et Bootstrap JS
const webpack = require('webpack')
environment.plugins.prepend(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: 'popper.js'
})
)
module.exports = environment
Ajoutez également JQuery au manifeste packs / application.js.
app/javascript/packs/application.js
require("jquery")
3. Configurez le bootstrap à utiliser sur Rails.
Définissez les deux paramètres suivants pour activer l'utilisation du bootstrap dans les applications Rails.
app/javascript/packs/application.js
import 'bootstrap';
import '../stylesheets/application';
app/javascript/stylesheets/application.scss
@import '~bootstrap/scss/bootstrap';
4. Configurez le fichier erb pour utiliser webpacker.
Bootstrap installé dans Webpacker pour tous les fichiers View de l'application Rails ・ Réglez le fichier d'origine layouts / application.html.erb afin que jQuery puisse être utilisé.
app/views/layouts/application.html.erb
<head>
<%= stylesheet_pack_tag "application", media: "all" %>
<%= javascript_pack_tag 'application' %>
</head>
5. Définissez la boîte de sélection sur erb et décrivez dans le fichier JS pour utiliser select2.
Définissez une boîte de sélection qui effectue plusieurs sélections sur le erb de l'application.
À ce stade, si select_tag est défini sur multiple: true comme option, il devient une boîte de sélection qui peut être sélectionnée plusieurs fois.
Ensuite, écrivez dans le fichier JS correspondant au fichier erb afin que la boîte de sélection correspondante utilise select2.
app/views/test.html.erb
<%= javascript_pack_tag 'test' %>
<%= select_tag('animal', options_for_select([['Inu', 'dog'], ['Chat', 'cat'], ['Tori', 'bird'], ['Ushi', 'cow'], ['Serpent', 'snake']]), class: "form-control", multiple: true) %>
app/javascript/packs/test.js
$(function () {
$('#animal').select2();
});
6. Terminé! !!
Bonus: utilisez l'option de select2
Il existe différentes options dans select2. → sélectionnez 2 Options Ces options peuvent être définies avec jQuery. Voici un exemple de paramètres d'option.
app/javascript/packs/test.js
$(function () {
$('#animal').select2({
width: 'resolve' //Modifiez dynamiquement la largeur en fonction de la taille de la page.
theme: "classic" //Passez à l'interface utilisateur classique.
debug: true //Envoyez un message de débogage à la console du navigateur.
});
});
en conclusion
Je pense que l'introduction de select2 est devenue plus facile en utilisant du fil. Cependant, je ne comprends souvent pas le comportement interne de select2, je voudrais donc approfondir ma compréhension.