Vue.js的material-components-web的包装器

翟棋

2023-12-01

Vue.js的材料组件 (Material components for Vue.js)

Material-components-vue integrates the mdc-web vanilla components following the simple approach.

Material-components-vue按照简单的方法集成了mdc-web香草组件。

View demo 查看演示 Download Source 下载源

主要目标 (main goals)

decoupled components - can be cherry picked!
解耦的组件-可以挑选樱桃！
implementing just the specs not more or less
仅或多或少地实施规范
keep the components as simple as possible (KISS, DRY)
使组件尽可能简单(KISS，DRY)
keep in sync with changes in the mdc-web repository
与mdc-web存储库中的更改保持同步

安装 (installation)

npm install --save material-components-vue

yarn add material-components-vue

用法 (usage)

CDN (CDN)

<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.com/libraries/normalize">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" type="text/css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://unpkg.com/material-components-vue/dist/material-components-vue.css">
  </head>
  <body>
    <div id="app">
      <m-typography>
        <m-button interactive>Example</m-button>
        <m-button interactive raised>Example</m-button>
        <m-button interactive stroked>Example</m-button>
      </m-typography>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/material-components-vue"></script>
    <script>
      const app = new Vue({
        el: '#app'
      })
    </script>
  </body>
 </html>

捆扎机 (bundler)

You have to set up your own build workflow with webpack (see demo) or something else to compile the components.

您必须使用webpack(请参见演示)或其他方法来设置自己的构建工作流，以编译组件。

导入所有组件 (import all components)

import MaterialComponentsVue from 'material-components-vue'

Vue.use(MaterialComponentsVue)

樱桃采摘组件 (cherry pick components)

import Button from 'material-components-vue/components/button'
import Card from 'material-components-vue/components/card'

Vue.use(Button)
Vue.use(Card)

主题化 (theming)

萨斯 (SASS)

Import the SASS file in the root component of app for maximal customization.

将SASS文件导入应用程序的根组件中以实现最大程度的自定义。

<style lang="scss">
  $mdc-theme-primary: #2196f3;
  $mdc-theme-secondary: #ff1744;
  $mdc-theme-background: #f5f5f5;
  @import '~material-components-vue/components/Theme/theme.scss';
  @import url('https://cdnjs.com/libraries/normalize');
  @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');
  @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
</style>

CSS自定义属性 (CSS custom properties)

Integrate a theme component in your template und pass in an object with CSS custom properties, but keep browser compatibilty in mind.

将主题组件集成到模板中，并传入具有CSS自定义属性的对象，但要记住浏览器的兼容性。

<m-theme :customStyle="material">
  themed content
</m-theme>

data() {
    return {
        material: {
            '--mdc-theme-primary-light': '#9162e4',
            '--mdc-theme-primary':  '#5e35b1',
            '--mdc-theme-primary-dark': '#280680',
            '--mdc-theme-secondary': '#ff5722',
            '--mdc-theme-secondary-light': '#ff8a50',
            '--mdc-theme-secondary-dark': '#c41c00',
            '--mdc-theme-background': '#ffffff',
            '--mdc-theme-text-primary-on-primary': '#ffffff',
            '--mdc-theme-text-secondary-on-secondary': '#000000'
        }
    }
}

翻译自: https://vuejsexamples.com/wrapper-around-material-components-web-for-vue-js/