サンプルシリーズの管理画面編です。
いろいろなシステム構築をする機会も多いので、管理画面をコピペで作れるように、githubにアップしてみました。
雛形として作っておくと、後々便利に使えることでしょう。
今後デザインパターンなども増やしていく予定なので、今回はかなり汎用的に使えるスタンダードデザインパターンを作ってみました。
もちろん、レスポンシブ対応です。
機能説明
ヘッダエリアのメニューとサイドメニューの2種類が表示できる、標準的な管理画面が構築できます。
Responsive機能
次のブレイクポイントで作成しています。
- 1000px以上 : PC画ビュー
- 500px ~ 1000px : ミドルビュー(tablet)
- 500px以下 : スマホビュー
Badge機能
リストやアイコンなどの要素エリアに、data-badge='数値'を属性挿入すると、その項目の左上に赤丸のバッジが表示されます。
※数値はバッジナンバーに反映されます。
メニュー機能
ヘッダメニュー : アイコン表示のみ
サイドメニュー : アイコン + 文字表示
ハンバーガーメニュー機能
スマホビューのサイドメニューが、左からスライドインします。
フッタ機能
サイドメニューまたは、画面最下部に表示されます。
githubリンク
https://github.com/yugeta/admin_panel_designs
対象ブランチ : 001
このブランチのみcloneするコマンド
$ git clone https://github.com/yugeta/admin_panel_designs.git -b 001
あとがき
今回の管理画面ソースは、MITです。
お好きなだけコピーして改良して、思う存分使ってくださいませ。
「こんなんあったらいいな」も合わせて募集していますので、お気軽にお問い合わせください。
随時、機能追加やデザイン改修を行っていく予定なので、Githubでのアップデートを確認してみてください。
プルリクもお待ちしています。
別デザインの追加も予定しているので、その場合はこのブログでお知らせしたいと思います。
0 件のコメント:
コメントを投稿