2016年9月8日木曜日

[MDL] ナビゲーション ドロワーのボタンを右寄せにする

イメージ

Google が提唱するマテリアル デザインの開発キット、Material Design Lite (以下、MDL) の Tips です。

今回は、ナビゲーション ドロワーのボタンを右寄せにするサンプル コードを紹介します。

環境

  • MDL バージョン: 1.2.0
  • 動作確認ブラウザ (すべて Windows 10):
    • Chrome 53
    • Microsoft Edge
    • Internet Explorer 11

ライブ デモ (サンプル コード)


解説

前回の Tips で紹介したサンプル コードに加えて、ナビゲーション ドロワーに配置した <div> タグのスタイルに display: flex; を設定し、ボタンの前に以下の要素を追加します。

<div class="mdl-layout-spacer"></div>


参考

0 件のコメント:

コメントを投稿