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

blog-page_footer_336




blog-page_footer_336




-FrontEnd
-,

執筆者:


comment

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

CAPTCHA


関連記事

js

JSで緯度経度情報から住所を取得する

1 はじめに2 キーを取得する2.1 キーを取得する3 コード4 参考5 さいごに はじめに Google Maps JavaScript APIを利用して、緯度経度の数値から住所を検索する方法を紹介 ...

Vue.jsでWebアプリケーションを作る〜Vue.jsの基礎〜

1 はじめに1.1 Vue.jsとは1.2 インストール1.3 Vueアプリケーションを作る2 データを表示する2.1 文字列を表示する2.2 HTMLで表示する3 属性を指定する3.1 インラインス ...

js

TypeScriptでJavaScriptのライブラリを使用するには?

1 はじめに2 対応方法2.1 npmで@typesからインストールする2.2 自分で型定義ファイルを作る3 Declaration Space3.1 Type Declaration Space3. ...

react-icon

【初級者向け】Reactの開発環境の構築

1 はじめに2 Reactとは2.1 Declarative2.2 Component-Based2.3 Learn Once, Write Anyway2.4 Reactのメリット、デメリット3 環 ...

js

JavaScriptのみでPOSTした場合のCSRFトークンの認証に関するTIPS

1 はじめに2 実装2.1 なぜエラーが発生したか2.2 修正後のコード3 さいごに はじめに RailsアプリケーションでPOSTリクエストを送る場合、多くの場合はform_withなどのヘルパーを ...

フォロー

blog-page_side_responsive

2018年2月
 123
45678910
11121314151617
18192021222324
25262728  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。