[Ruby on Rails] Select2-Einführungsnotiz für Webpacker

Einführung in jQuery

Sie benötigen jQuery, um select2 zu verwenden.

So installieren Sie jQuery

Select2 eingeführt

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
  })
})

Kundenspezifischer Stil

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

Sie haben jetzt select2 in Ihre Ruby on Rails-Anwendung eingeführt. selectZum Tagjs-selectEs sollte funktionieren, wenn Sie eine Klasse anhängen.

Recommended Posts

[Ruby on Rails] Select2-Einführungsnotiz für Webpacker
Ruby on Rails 6.0-Umgebungskonstruktionsnotiz
[Ruby on Rails] Einführung der Anfangsdaten
Ruby on Rails6 Praktischer Leitfaden cp13 ~ cp15 [Memo]
Ruby on Rails6 Praktischer Leitfaden cp7 ~ cp9 [Memo]
Ruby on Rails6 Praktischer Leitfaden cp4 ~ cp6 [Memo]
Erklärung von Ruby auf Schienen für Anfänger ①
Ruby on Rails6 Praktischer Leitfaden cp10 ~ cp12 [Memo]
Ruby on Rails6 Praktischer Leitfaden cp16 ~ cp18 [Memo]
Validierungseinstellungen für die Ruby on Rails-Anmeldefunktion
Ruby on Rails6 Praktischer Leitfaden [Erweiterungen] cp7 ~ cp9 [Memo]
[Ruby on Rails] Bis zur Einführung von RSpec
Ruby on Rails6 Praktischer Leitfaden [Erweiterungen] cp10 ~ cp12 [Memo]
Ruby on Rails6 Praktischer Leitfaden [Erweiterungen] cp3 ~ cp6 [Memo]
[Persönliches Memo] Ruby on Rails-Umgebungskonstruktion (Windows)
Ruby on Rails Elementary
Ruby on Rails Grundlagen
[Rails] Verfahren zum Verknüpfen von Datenbanken mit Ruby On Rails
Ruby On Rails Association
[Einführung] Erstellen Sie eine Ruby on Rails-Anwendung
[Umgebungskonstruktion Mac] Ruby on Rails (+ Webpacker behandelt Fehler)
Erklärung von Ruby auf Schienen für Anfänger ⑥ ~ Erstellung der Validierung ~
Erklärung von Ruby on Rails für Anfänger ② ~ Links erstellen ~
Erklärung von Ruby on Rails für Anfänger ⑦ ~ Flash-Implementierung ~
Ruby on Rails Lernrekord -2020.10.03
Portfolioerstellung Ruby on Rails
Ruby on Rails Lernrekord -2020.10.04
[Ruby on Rails] Debuck (bindend.pry)
Ruby on Rails Lernrekord -2020.10.05
Ruby on Rails Lernrekord -2020.10.09
Ruby on Rails lernen Rekord-2020.10.07 ②
Ruby on Rails lernen Rekord-2020.10.07 ①
Brechen Sie die Ruby on Rails-Migration ab
Ruby on Rails Lernrekord -2020.10.06
Zusammenfassung der Ruby on Rails-Validierung
Ruby on Rails Grundlegendes Memorandum
[Verfahren 1 für Anfänger] Ruby on Rails: Aufbau einer Entwicklungsumgebung
<Punktinstallation> Einführung in Ruby on Rails5 Vergleich des Quellcodes
Erklärung von Ruby on Rails für Anfänger ③ ~ Erstellen einer Datenbank ~
[Ruby on Rails] Leseversuch (: [],: Schlüssel)
Ruby on Rails-Variablen, konstante Zusammenfassung
Installation von Ruby + Rails unter Ubuntu 18.04 (rbenv)
[Ruby on Rails] Paging-Funktion eingeführt
Grundkenntnisse in Ruby on Rails
Progate Ruby on Rails5 Rückblick
Verwendung von Ruby on Rails
Ruby on Rails Japanisch-Englisch kompatibler i18n
(Ruby on Rails6) Gepostete Inhalte "löschen"
[Ruby on Rails] CSV-Ausgabefunktion
[Ruby on Rails] Erstellung der Bestätigungsseite
Ruby On Rails entwickelt Routing-Konflikte
[Ruby on Rails] Implementierung der Kommentarfunktion