ビルドツール
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>