はじめに
またまたMaterialize関連の記事になります。
Materializeにはパンくずリストがコンポーネントとして用意されています。
http://materializecss.com/breadcrumbs.html
ただ、そのままだと少し使いづらかったので、改修しつつヘルパーにしてみました。
パンくずリストを上書き
Materializeのパンくずリストはサンプルのまま使用すると、下図のようになります。
これはこれでキレイだと思うのですが、カードのように枠線がついたり、背景色ありきです。
シンプルなパンくずリストを作成するのであれば、自分で作成した方が早いかもしれません。
ただ、矢印をつける部分などは面倒だったので、上書きする形で実装することにしました。
サンプルのHTML
1 2 3 4 5 6 7 8 9 | <nav> <div class="nav-wrapper"> <div class="col s12"> <a href="#!" class="breadcrumb">First</a> <a href="#!" class="breadcrumb">Second</a> <a href="#!" class="breadcrumb">Third</a> </div> </div> </nav> |
これを下記のようにしたいと思います。
すでにbreadcrumbというクラス名は用意されているので、上書きするものです。
本来はnavタグもあった方が良いかもしれませんが、navタグ自体にCSSが結構当たっているので外しました。
1 2 3 4 5 | <div class="breadcrumb-list"> <a href="#!" class="breadcrumb">First</a> <a href="#!" class="breadcrumb">Second</a> <a href="#!" class="breadcrumb">Third</a> </div> |
CSSの上書き
Railsを使用しているので、SCSS（Sass）のextendを使いたいと思います。
http://sass-lang.com/guide
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | /** * * パンくずリスト関連のクラスです。 * http://materializecss.com/breadcrumbs.html * */ .breadcrumb-list { @extend .row !optional; height: 64px; line-height: 64px; margin: 0; } .breadcrumb { @extend .breadcrumb !optional; @extend .grey-text !optional; &:last-child { @extend .black-text !optional; } &:before { color: #757575; } &:hover { text-decoration: underline; } } |
これで表示させると下図のようになります。
背景色をなくしたり、ホバーしたら下線が入るようになってます。
少しは使いやすくなったかな？
ヘルパーにする
とはいえ、まだまだ改良の余地はありそうですが、実装は進める必要があります。
後々のことを考え、ヘルパーにしておきます。
もし変更することになっても、ヘルパー側を修正すれば良いようにします。
HTMLの出力をする場合は、content_tagがおすすめです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | module ApplicationHelper # パンくずリスト生成ヘルパー # For Example: # breadcrumb_area ['Posts', posts_path], ['PostName', '#'] # => # <div class="breadcrumb-list"> # <a href="/posts">Posts</a> # <a href="#">PostName</a> # </div> def breadcrumb_area(*links) content_tag(:div, class: 'breadcrumb-list') do links.each do |link| url = link[1].empty? ? '#' : link[1] concat (link_to link[0], url, class: 'breadcrumb') end end end end |
content_tagの中でネストする場合は、concatを使用するようです。
可変長引数で貰えば、配列になります。
実際に使うときは下記のように使用してもらいます。
1 | <%= breadcrumb_area ['First', '#!'], ['Second', '#!'], ['Third', '#!'] |
さいごに
Materializeのラッパーみたいなものですが、まだまだ研究中の部分もあるので、これからも良さげな使い方があれば記載していきたいと思います。
