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


関連記事

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

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

vuex-module-decoratorsとTypeScriptでvuexをスマートに書く

1 はじめに2 導入3 どのように記述するか3.1 初めに3.2 state3.3 mutation3.4 action3.5 getter3.6 async MutationAction3.7 Dy ...

もうすぐ登場!Vue 3の変更点まとめ

1 はじめに2 仕様変更2.1 複数のv-modelが定義可能に2.2 template直下に複数のタグを記述可能に2.3 開始処理がcreateAppに2.4 scoped cssの仕様変更2.5 ...

react-icon

React Konvaで状態管理されたCanvasを描画してみた

1 はじめに2 Canvasとは?3 React Konvaとは4 着せ替えアプリっぽいサンプルを作成4.1 React Konvaの導入4.2 画像の描画4.3 stateによるCanvas描画4. ...

svelte

SvelteのStore入門

1 はじめに2 SvelteにおけるStoreの概要2.1 Storeの条件2.2 Storeの種類3 Storeの実装と使い方3.1 Writable Store3.1.1 実装例3.1.2 使用例 ...

フォロー

blog-page_side_responsive

2018年2月
 123
45678910
11121314151617
18192021222324
25262728  

アプリ情報

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