[Ruby on Rails] Mémo d'introduction Select2 pour Webpacker

Présentation de jQuery

Vous avez besoin de jQuery pour utiliser select2.

Comment installer jQuery

Introduit select2

terminal


yarn add select2

app/javascript/packs/application.js


import 'select2'
import 'select2/dist/css/select2.css'

document.addEventListener('turbolinks:load', () => {
  $('.js-select').select2({
    placeholder: 'Select an option',
    allowClear: true
  })
})

Style personnalisé

sass


$select2-height: 38px

.select2-container
  .select2-selection--single
    height: $select2-height
    line-height: $select2-height
    .select2-selection__arrow, .select2-selection__rendered
      height: $select2-height
      line-height: $select2-height

  .select2-search--dropdown .select2-search__field
    font-size: 16px
    padding: 4px

Vous avez maintenant introduit select2 dans votre application Ruby on Rails. selectVers le tagjs-selectCela devrait fonctionner si vous attachez une classe.

Recommended Posts

[Ruby on Rails] Mémo d'introduction Select2 pour Webpacker
Mémo de construction de l'environnement Ruby on Rails 6.0
[Ruby on Rails] Introduction des données initiales
Ruby on Rails6 Guide pratique cp13 ~ cp15 [Mémo]
Ruby on Rails6 Guide pratique cp7 ~ cp9 [Mémo]
Ruby on Rails6 Guide pratique cp4 ~ cp6 [Mémo]
Explication de Ruby sur rails pour les débutants ①
Ruby on Rails6 Guide pratique cp10 ~ cp12 [Memo]
Ruby on Rails6 Guide pratique cp16 ~ cp18 [Mémo]
Paramètres de validation pour la fonction de connexion Ruby on Rails
Ruby on Rails6 Guide pratique [Extensions] cp7 ~ cp9 [Mémo]
[Ruby on Rails] Jusqu'à l'introduction de RSpec
Guide pratique Ruby on Rails6 [Extensions] cp10 ~ cp12 [Memo]
Ruby on Rails6 Guide pratique [Extensions] cp3 ~ cp6 [Mémo]
[Note personnelle] Construction de l'environnement Ruby on Rails (Windows)
Ruby on Rails élémentaire
Principes de base de Ruby on Rails
[Rails] Procédure de liaison de bases de données avec Ruby On Rails
Association Ruby On Rails
[Introduction] Créer une application Ruby on Rails
[Construction de l'environnement Mac] Ruby on Rails (+ Webpacker gère les erreurs)
Explication de Ruby sur rails pour les débutants ⑥ ~ Création de validation ~
Explication de Ruby on rails pour les débutants ② ~ Création de liens ~
Explication de Ruby on rails pour les débutants ⑦ ~ Implémentation Flash ~
Record d'apprentissage de Ruby on rails -2020.10.03
Création de portfolio Ruby on Rails
Record d'apprentissage Ruby on rails -2020.10.04
[Ruby on Rails] Debuck (binding.pry)
Record d'apprentissage de Ruby on rails -2020.10.05
Record d'apprentissage de Ruby on rails -2020.10.09
Record d'apprentissage Ruby on rails-2020.10.07 ②
Record d'apprentissage Ruby on rails-2020.10.07 ①
Annuler la migration de Ruby on Rails
Record d'apprentissage de Ruby on rails -2020.10.06
Résumé de la validation Ruby on Rails
Mémorandum de base Ruby on Rails
[Procédure 1 pour les débutants] Ruby on Rails: Construction d'un environnement de développement
<Installation de points> Introduction à Ruby on Rails5 Comparaison du code source
Explication de Ruby on rails pour les débutants ③ ~ Création d'une base de données ~
[Ruby on Rails] Read try (: [] ,: key)
Variables Ruby on Rails, résumé constant
Installation de Ruby + Rails sur Ubuntu 18.04 (rbenv)
[Ruby on Rails] Introduction de la fonction de pagination
Connaissance de base de Ruby on Rails
Progatez Ruby on Rails
Comment utiliser Ruby on Rails
Ruby on Rails compatible japonais-anglais i18n
(Ruby on Rails6) "Effacer" le contenu publié
[Ruby on Rails] Fonction de sortie CSV
[Ruby on Rails] Création de la page de confirmation
Ruby On Rails conçoit un conflit de routage
[Ruby on Rails] Implémentation de la fonction de commentaire