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


関連記事

Vue.js入門その5〜マークダウンのリアルタイムプレビューをつくる〜

1 はじめに1.1 環境構築2 marked.jsの設定2.1 CDNのロード2.2 動作確認3 マークダウンを変換して表示3.1 雛形の作成3.1.1 HTML3.1.2 JS3.2 HTMLに変換 ...

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

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

【入門】Vuetifyで手軽に綺麗なWebページを作る

1 はじめに1.1 Vuetifyとは2 Vuetifyを導入する2.1 パッケージを追加する2.2 TypeScriptを採用している場合3 Vuetifyのコンポーネント3.1 Applicati ...

Vue.jsとRailsでTODOアプリのチュートリアルみたいなものを作ってみた【2018.03.24】

1 はじめに1.1 作るもの1.2 前提条件、及び環境1.3 Webpack について2 準備2.1 Rails + Vue.jsのプロジェクトを作成する2.2 Vue.jsの表示確認2.3 devサ ...

Vue.jsのコードをTypeScriptで書く

1 はじめに2 TypeScriptでの書き方2.1 定義2.2 data2.3 methods2.4 computed2.5 props2.6 emit2.7 lifecycle hooks2.8 ...

フォロー

follow us in feedly

blog-page_side_responsive

2018年2月
 123
45678910
11121314151617
18192021222324
25262728 

アプリ情報

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