FrontEnd

[Rails + Materialize] パンくずリスト用のヘルパーを作成した

投稿日:2018年2月7日 更新日:

はじめに

またまたMaterialize関連の記事になります。
Materializeにはパンくずリストがコンポーネントとして用意されています。
http://materializecss.com/breadcrumbs.html

ただ、そのままだと少し使いづらかったので、改修しつつヘルパーにしてみました。

パンくずリストを上書き

Materializeのパンくずリストはサンプルのまま使用すると、下図のようになります。

これはこれでキレイだと思うのですが、カードのように枠線がついたり、背景色ありきです。
シンプルなパンくずリストを作成するのであれば、自分で作成した方が早いかもしれません。

ただ、矢印をつける部分などは面倒だったので、上書きする形で実装することにしました。

サンプルのHTML

これを下記のようにしたいと思います。
すでにbreadcrumbというクラス名は用意されているので、上書きするものです。
本来はnavタグもあった方が良いかもしれませんが、navタグ自体にCSSが結構当たっているので外しました。

CSSの上書き

Railsを使用しているので、SCSS(Sass)のextendを使いたいと思います。
http://sass-lang.com/guide

これで表示させると下図のようになります。

背景色をなくしたり、ホバーしたら下線が入るようになってます。
少しは使いやすくなったかな?

ヘルパーにする

とはいえ、まだまだ改良の余地はありそうですが、実装は進める必要があります。
後々のことを考え、ヘルパーにしておきます。

もし変更することになっても、ヘルパー側を修正すれば良いようにします。
HTMLの出力をする場合は、content_tagがおすすめです。

content_tagの中でネストする場合は、concatを使用するようです。
可変長引数で貰えば、配列になります。
実際に使うときは下記のように使用してもらいます。

さいごに

Materializeのラッパーみたいなものですが、まだまだ研究中の部分もあるので、これからも良さげな使い方があれば記載していきたいと思います。

page_footer_300rect




page_footer_300rect




-FrontEnd
-,

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

Vue.js入門その2〜Vueインスタンスってなんぞ?〜

1 はじめに2 Vueインスタンス3 プロパティとメソッド4 インスタンスライフサイクルフック5 フィルター6 算出プロパティ6.1 例文6.2 算出プロパティを使用した書き換え6.2.1 HTML6 ...

JQueryでformにinput要素を足していく

はじめに 最近個人的にディープラーニングの勉強をしているtonnyです。 ディープラーニングの勉強がてら、好きな麻雀に関するWebアプリを作成してみました。 今回はその作成の中で、今まであまりやってこ ...

Vue on Rails で作ったアプリを振り返ってみる

1 はじめに2 全体的なこと2.1 ディレクトリ構成2.2 CSSフレームワーク2.3 Capistranoでのデプロイ3 axiosのラッパー4 Vuex4.1 ログインの状態管理5 Router6 ...

Vue.js入門その8〜vue-draggableを使ってドラッグ機能の実装〜

1 はじめに2 準備3 一列の並び替え3.1 移動する前、移動した後3.1.1 move3.1.2 end4 2列間の移動4.1 片方を空配列にすると。。。5 さいごに はじめに 久しぶりにVue.j ...

[Rails + Materialize] DateTimePickerがなかったので…

1 はじめに2 前提条件2.1 ビューのイメージ3 モデルにゲッターとセッターを追加4 入力フォームに追加4.1 JSファイルにて使用宣言4.2 HTML4.3 コントローラーのストロングパラメータを ...

フォロー

follow us in feedly

AppLink

page_side_300rect

2018年2月
« 1月 3月 »
 123
45678910
11121314151617
18192021222324
25262728 

アプリ情報

目標を達成したい方を応援する、TODOアプリもリリースしております。 下記のアイコンから無料でダウンロードできます。

Web版MyCoach

私たちはより広い方にコーチングを知ってもらいたいと考えています。 下記のサイトにて、コーチの方々を紹介しておりますので、よろしければご覧ください。