デザインとして、マテリアルデザインの MUI を使っています。
とりあえず、sample に掲載されているメニューを使っていますが、
若干見栄えを変える必要が出てきます。
こういったもののカスタマイズの解説が日本語ではほとんど無いようです。
皆さんどうしているんでしょうか？
とりあえず、私が行った所をメモ書にしておきます。
MUI のカスタマイズは、static 配下にある style.css を調整するようです。
例えば、body の background-color はここでも設定してあります。
変更したければ、ここを変えるか、後から読み込む css で上書きします。
基本的には、要素名に対する設定はあまり無く、id と class 属性で制御されています。
◆ 全体の背景色
body 全体とは別に表示領域ごとにも設定があります。
サイドバー：#sidedrawer の中
ヘッダー：指定なし。指定したほうが良い
コンテンツ：指定なし。つまり body と同じ
◆ サイドバーの幅を変える
#sidedrawer の width を変えますが、併せて他の設定も変える必要があります。
left に同量のマイナス値。
transform: translate(X方向の移動値);
考え方として、デフォルトでマイナスの左マージンを取ります(この場合画面から外れて表示されない)、
必要に応じて移動(transform)して表示する、ということのようです。
JavaScriptで body の class 名に "active" を追加・削除するだけで、サイドバーを表示・非表示にできます。
#header、#content-wrapper、#footer の left マージンも変えます。
これらは、#sidedrawer 内で使われるので、transform された際に左が隠れてしまいます。
◆ サイドメニューの行間隔や文字の大きさを変える
下はサイドメニューで、strong にしている文字の設定です。
#sidedrawer strong {
display: block;
padding: 15px 22px;
cursor: pointer;
}padding は「上下」、「左右」の余白なので、加減すると、幅も変わります。
２階層メニューの左余白の調整
#sidedrawer > ul > li > ul {
padding-left: 15px;
}を追加。
◆ サイドメニューを表示しない場合
ダイアログの表示といった場合に、MUI を使っているとサイドメニューを外しますが、左余白は取られたままです。
その場合、body タグの class 属性に、class="hide-sidedrawer" を指定しておくだけで余白が取られません。
プレビュー画面は、そうしました。
ダイアログには、MUI を使わないという選択もあります。
◆ バーガーメニュー
「三」に似たのアイコンの事ですが、サイドバーの表示、非表示を切り替えます。
これ以外でも、要素の class 属性に "js-show-sidedrawer"
または、"js-hide-sidedrawer" を指定しておくと、click で、表示および非表示が出来ます。
この動作は、static/scripts.js に記述されています。
◆ サイドメニューの開閉を保持する
Link での GET または、submit をしてしまうと、サイドメニューの開閉状態が初期の状態に戻ってしまいます。
若干操作性が悪いので、安易ですが cookie で保持しておくことが出来ます。
| « 前頁 | 次頁 » |