vueマテリアルとは何ですか?-フロントエンドQ&A-php.cn

vueマテリアルとは何ですか?

青灯夜游

リリース： 2020-11-12 16:22:45

オリジナル

3786 人が閲覧しました

vue-material は、Google のマテリアルデザインに基づいて構築された軽量フレームワークです。Google ピクセルマテリアルデザインを実装する Vue コンポーネントライブラリです。最新のすべての Web ブラウザに適した組み込みの動的テーマを提供します。コンポーネントとそのAPIもシンプルでわかりやすいです。

vueマテリアルとは何ですか?

Vue マテリアルは、Google のマテリアルデザインに基づいた軽量フレームワークです。さまざまな画面で動作する強力で美しい Web アプリケーションを設計します。

vueマテリアルとは何ですか?

vue マテリアルは、Google Pixel マテリアルデザインを実装する Vue コンポーネントライブラリです。最新のすべての Web ブラウザに適した動的テーマが組み込まれたコンポーネントを提供し、その API も単純明快。

テーマを動的に生成して使用でき、必要に応じてコンポーネントのみを使用できます。UI 要素とコンポーネントの利点は、API などをより簡単に使用できることです。

これは、再利用可能なコンポーネントのセットと一連の UI 要素を提供し、Vue 2.0 を使用して主流のブラウザをサポートするアプリケーションを構築します。

公式サイト：http://vuematerial.materializecss.cn/#/

インストール方法

Google CDNからRobotoとGoogleアイコンを導入します。

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">

ログイン後にコピー

npm または Yarn を介して Vue マテリアルをインストールする

npm install vue-material
yarn add vue-material

ログイン後にコピー

* JSPM や Bower などの他のパッケージ管理はまだサポートされていません。

または、Github からスクリプトとスタイルをダウンロードして HTML に導入します: (ダウンロードアドレス https://github.com/marcosmoura/vue-material/archive/master.zip)

<link rel="stylesheet" href="path/to/vue-material.css">
<script src="path/to/vue-material.js"></script>

ログイン後にコピー

Usage

Vue.use() を介してアプリケーションで Vue マテリアルを有効にします。コンポーネントを個別に有効にすることもできます。

// To import the whole library
import Vue from &#39;vue&#39;
import VueMaterial from &#39;vue-material&#39;
import &#39;vue-material/dist/vue-material.css&#39;

Vue.use(VueMaterial)

// Or to import individual components
import Vue from &#39;vue&#39;
import VueMaterial from &#39;vue-material&#39;
import &#39;vue-material/dist/components/mdCore/index.css&#39; //Required to boot vue material
import &#39;vue-material/dist/components/mdButton/index.css&#39;
import &#39;vue-material/dist/components/mdIcon/index.css&#39;
import &#39;vue-material/dist/components/mdSidenav/index.css&#39;
import &#39;vue-material/dist/components/mdToolbar/index.css&#39;

Vue.use(VueMaterial.mdCore) //Required to boot vue material
Vue.use(VueMaterial.mdButton)
Vue.use(VueMaterial.mdIcon)
Vue.use(VueMaterial.mdSidenav)
Vue.use(VueMaterial.mdToolbar)

ログイン後にコピー

テーマの適用

Vue マテリアルが適切に動作するには、デフォルトのテーマを設定する必要があります。複数のテーマを一度に登録することもできます。

単一のテーマ

Vue.material.theme.register(&#39;default&#39;, {
  primary: &#39;cyan&#39;,
  accent: &#39;pink&#39;
})

ログイン後にコピー

複数のテーマ

Vue.material.theme.registerAll({
  default: {
    primary: &#39;cyan&#39;,
    accent: &#39;pink&#39;
  },
  indigo: {
    primary: &#39;indigo&#39;,
    accent: &#39;pink&#39;
  }
})

ログイン後にコピー

コードの各部分にテーマを適用するには、v-md-theme ディレクティブを使用する必要があります。

<div id="app" v-md-theme="&#39;default&#39;">
  <md-toolbar>
    <div class="md-title">My App</div>
  </md-toolbar>
  <md-button v-md-theme="&#39;indigo&#39;">My Button</md-button>
</div>

ログイン後にコピー