Yuto Blog

Yuto Blog

【Ruby on Rails】Webpackerにselect2導入メモ

Ruby on Rails 7 (stimulus) の場合はこちらの記事です

jQuery導入

select2を使う為に、jQueryが必要です。

jQuery導入方法

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

カスタマイズスタイル

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

以上でRuby on Railsアプリケーションにselect2が導入できました。
select タグに js-select クラスを付けたら動くはずです。

Updated by Yuto at 2022-01-26 19:57
0
Like this article
Le Minh Thien Toan

Tác giả:Yuto Yasunaga

Xin chào các bạn. Mình là kỹ sư IT đang làm việc ở Nhật Bản. Mình tạo blog này để chia sẻ về cuộc sống và những kinh nghiệm trong quá trình học tập và làm việc.
Hy vọng bài viết này sẽ có ích cho bạn.