Semantic UIをRails5.1に導入するためにやったこと

環境

• Rails 5.1.0
• Semantic UI for Sass

Semantic UI for Sassを追加

Semantic UIを導入するためのGemがあるので利用する。

https://github.com/doabit/semantic-ui-sass

Gemfileに以下を追記する。

Gemfile

gem 'semantic-ui-sass', git: 'https://github.com/doabit/semantic-ui-sass.git'

ターミナルで以下を実行する。

terminal

bundle 

.scssファイル

app/assets/stylesheets内のscssファイルに以下を追記する。

.scss

$import-google-fonts: false;
@import 'semantic-ui';

Jqueryを追加

Gemfileに以下を追記する。

Gemfile

gem 'jquery-rails'

.jsファイル

app/assets/javascripts/application.jsに以下を追記する。

application.js

//= require jquery
//= require jquery_ujs
//= require rails-ujs
//= require turbolinks
// Loads all Semantic javascripts
//= require semantic-ui
//= require_tree .

dropdownなどの使い方

app/assets/javascripts/application.jsに以下を追記する。
javascriptが必要なコンポーネントは、解説ページの上部にDefinition,Examples,Usageなどのボタンがあるので参照する。

https://semantic-ui.com/modules/dropdown.html

application.js

$(function(){
  $('.ui.dropdown').dropdown();
})