ホームページ  >  記事  >  ウェブフロントエンド  >  vueマテリアルとは何ですか?

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

青灯夜游
青灯夜游オリジナル
2020-11-12 16:22:453737ブラウズ

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>

関連する推奨事項:


2020 フロントエンド vue インタビューの質問の概要 (回答付き)

vue チュートリアルの推奨事項: 2020 年最新の vue.js ビデオ チュートリアル 5 選

プログラミング関連の知識について詳しくは、

プログラミング学習コースをご覧ください。 !

以上がvueマテリアルとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。