Carrying out Rails challenges. Regarding decoration, I was supposed to use Material Design for Bootstrap, but it's been a while since I introduced a JS library that is not Webpacker.
I forgot a lot, so make a note of the procedure.
The execution environment is as follows.
Material Design for Bootstrap (MDB) is a Bootstrap framework that complies with Google's Material Design.
There were various useful links in the Official Github Repository: relaxed:
-Homepage -Download link for jQuery compatible version, Vue.js compatible version, etc. -Templates using MDB, etc.
From 5.0 series, MDB is no longer based on jQuery. From the Download link here mentioned above, you can get the ones that support various JS frameworks.
This time, we will use MDB 4.1.1, so we will start by introducing jQuery.
jQuery Starting with Rails 5.1, jQuery is not included in Rails by default, so you need to install it separately.
Describe as follows in the Gemfile ,,,
Gemfile
gem 'jquery-rails'
bundle install.
Let's add the following to application.js. (require turbo links has been removed)
assets/javascripts/application.js
//= require jquery #Postscript
//= require rails-ujs #Postscript
//= require activestorage
//= require_tree .
Download the MDB itself with npm. There is also a gem, but it doesn't work, so npm was recommended in the curriculum. Looking at the site, it looks a little old. .. ..
$ npm install [email protected]
I'm sorry, I haven't organized it very deeply from here by copying the model code, but I will read the css file necessary to run MDB.
assets/stylesheets/application.scss
@import 'bootstrap-material-design/dist/css/bootstrap-material-design';
So far, MDBs for CSS and basic JS have worked in my environment.
Perhaps you will also need the dependent library popper.js etc. for certain things like tooltips ^^.
I haven't used it in the app yet, so I'd like to add it if possible, but I'll release the article so far. : relaxed:
If there is any excess or deficiency, I would be grateful if you could point it out.
Recommended Posts