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

はじめに

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

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

パンくずリストを上書き

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

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

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

サンプルのHTML

<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が結構当たっているので外しました。

<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

/**
 *
 * パンくずリスト関連のクラスです。
 * 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がおすすめです。

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を使用するようです。
可変長引数で貰えば、配列になります。
実際に使うときは下記のように使用してもらいます。

<%= breadcrumb_area ['First', '#!'], ['Second', '#!'], ['Third', '#!']

さいごに

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