編集 Github

ビルドツール

NPMスクリプトを使用してMaterial Dashboard Proを使用して、管理テーマの構築、SCSSのコンパイル、ブランドカラーの変更などの方法を学びます。

ツーリング設定

NPMを使用してMaterial Dashboardをインストールできます。

npm i material-dashboard

詳細については、次のリンクをご覧ください。

ブランドカラーを変更

  • すべてのブランドの色は assets / scss / variables / _brand.scssの中にあります。あなたはそれらを HEX値か assets / scss / variables / _colors.scssからの他の事前定義変数で変更することができます。

SCSSをコンパイルする

  • 1.プロジェクトのzipをダウンロードしてください。
  • 2.node.js（https://nodejs.org/en/）がインストールされていることを確認してください。
  • 3.package.jsonがあるソースフォルダのterminal / consoleに npm installと入力します。
  • 4.端末のダッシュボードページ（デフォルト）を開くためにターミナル gulp open-appで実行します。ダウンロードしたアーカイブのgulpfile.jsに、ブラウザで開きたい任意のページを30行目で設定することができます。 gulp.src（ 'examples / dashboard.html'）。
  • 5.単一のコンパイルの場合は端末の gulp compile：scssを実行し、 * .scssファイルに加えた変更を継続的にコンパイルする場合は gulp watchを実行します。このコマンドは gulpfile.jsと package.jsonが置かれているのと同じフォルダで実行されるべきです。

フォームで入力ラベルを使う

You have two use-cases for using the inputs label inside of a form:

  • .bmd-label-static is recommended for using with a placeholder for an input

<div class="form-group bmd-form-group">
  <label class="bmd-label-static">ファーストネーム</label>
  <input type="text" class="form-control" placeholder="Your name here">
</div>

  • .bmd-label-floating is recommended for using without the placeholder

<div class="form-group bmd-form-group">
  <label class="bmd-label-floating">ファーストネーム</label>
  <input type="text" class="form-control">
</div>