![eyecatch](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNKjfrVdQLirimsx-VvYhQZCirrcn0HTK5yN5beBWfDzjJTZfuL4kpPslzeT3_nsRYOBYpi1ZU_4SCKnNLM1kZuVwfXmXlXuzEr4o3ulsMpWaip4NBtgIemeTF9uBGtt9MdahxfqpT_5zkSeOiFHeF2p6QlxCKjxIH--pcZ5MhEigriWgB0yFV6bEk/s1600-rw/sample.png)
サンプルシリーズの管理画面編です。
いろいろなシステム構築をする機会も多いので、管理画面をコピペで作れるように、githubにアップしてみました。
雛形として作っておくと、後々便利に使えることでしょう。
今後デザインパターンなども増やしていく予定なので、今回はかなり汎用的に使えるスタンダードデザインパターンを作ってみました。
もちろん、レスポンシブ対応です。
機能説明
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNPaKq-AQLjictI0cwq39-dFXiYN80XjJGzZbk40n9N6wbSTbyVkcsYLjuhasAc9YeevQ2X5jBi64Yqkbc9jOPMG3mjGAMtdgJg2LwQFZZZbm6i9JljLyl7kGBT2a44OWF-SRVfjM2rzssXhI3bL9joAgDczslMMKbFlbz1mWfIhIuptqmWWpRhvwY/s1600-rw/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-04-02%208.01.01.png)
ヘッダエリアのメニューとサイドメニューの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 件のコメント:
コメントを投稿