材料设计网络 - Vue 3

Vue 3 组件库,执行材料设计 3(Matrial You).

m3-vue 的构建启用 @chillet/vue-scope-boundary 用于范围化的SFC样式。 它防止正 HTML 类型选择器, 如 button 财务报告和审定财务报表 button.primary 通过 Vue 复制的父范围 ID 来匹配子组件根。 类,ID,和属性选择者保持了Vue的正常行为. 不需要 Vue 运行时补丁 。 见 docs/guides/vue-scope-isolation.md。 。 。 .

安装

npm install @chillet/m3-vue
# or
pnpm add @chillet/m3-vue
# or
yarn add @chillet/m3-vue

贷项

这些项目值得启发和参考:

• https://github.com/KTibow/m3-svelte (英语) - 一些执行
• https://github.com/zdhxiong/mdui (中文(简体) ) - 一些执行
• https://github.com/makmn1/材料-设计-托肯-gen -- MD3 导弹 托肯斯语( T)/reference-tokens(中文(简体) )
• https://github.com/melt-ui/next-gen (中文(简体) ) - 构建者模式的想法

自动导入( unplugin- vue- 组件)

// vite.config.ts
import Components from 'unplugin-vue-components/vite';
import { M3VueResolver } from '@chillet/m3-vue';

export default defineConfig({
  plugins: [
    Components({
      resolvers: [M3VueResolver()],
    }),
  ],
});

如果您在 src/components,同时更新 src/resolver.ts。 。 。 .

插件

import { createApp } from 'vue';
import { M3VuePlugin } from '@chillet/m3-vue';
import App from './App.vue';

const app = createApp(App);

app.use(M3VuePlugin);
app.mount('#app');

注册后,您可以使用 v-tooltip, (中文(简体) ), v-dropdown, (中文(简体) ), v-dropdown-menu,以及 v-context-menu 直接在模板中.

一号 OverlayHost 使用程序时接近应用程序根 showDialog() 或者说 showSnackbar() 函数。 在后人组件中,抓取 const { showDialog, showSnackbar } = useOverlays() 设置和继续使用时 showDialog(options) 编号 : showSnackbar(options)外部组件,使用 createOverlayService(host) 绑定函数一次。 无须声明 Dialog 或者说 Snackbar 组件.

<script setup lang="ts">
import { OverlayHost, createOverlayHost, provideOverlayHost } from '@chillet/m3-vue';
const overlays = provideOverlayHost(createOverlayHost());
</script>

<template>
  <OverlayHost :host="overlays" />
  <!-- Your application content -->
</template>

坚果

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@chillet/m3-vue/nuxt'],
});

默认情况下, Nuxt 模块将:

• 注册所有组件用于自动导入
• 添加共享 @chillet/m3-vue/style.css 财务报告和审定财务报表 @chillet/m3-vue/themes/default.css 改为 css
• 安装 M3VuePlugin 这样 v-tooltip, (中文(简体) ), v-dropdown, (中文(简体) ), v-dropdown-menu,以及 v-context-menu 备有

你可以自定义它 m3Vue数字 :

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@chillet/m3-vue/nuxt'],
  m3Vue: {
    prefix: 'M3',
    imports: true,
  },
});