【一起学Rust | 框架篇 | Tauri2.0框架】在Angular中集成Material Web Components


文章目录


前言

Web Components是一种用于构建可重用的Web应用组件的技术标准。它由一系列相关的技术组成,包括自定义元素、Shadow DOM、模板和HTML Imports。

Web Components的主要好处和优点包括:

  1. 可重用性:Web Components允许开发者创建自定义的HTML元素,这些元素可以在不同的项目和应用中重复使用。这样可以节省开发时间和精力,并提高代码的可维护性。

  2. 封装性:通过使用Shadow DOM,Web Components可以将组件的样式和逻辑封装在组件内部,避免和其他组件或全局样式发生冲突。这样可以避免全局污染,提高代码的可靠性和可预测性。

  3. 组件化开发:Web Components鼓励将应用拆分为独立的组件,每个组件负责特定的功能或UI。这种组件化的开发方式可以提高代码的可维护性和可扩展性,并促进团队合作。

  4. 平台无关性:Web Components是基于标准的Web技术,可以在不同的浏览器和平台上使用,而不需要依赖任何特定的框架或库。这使得Web Components具有很好的兼容性和可移植性。

  5. 生态系统:Web Components有一个活跃的生态系统,包括大量的第三方库和工具,可以帮助开发者更方便地创建和使用Web Components。这使得开发更加高效和便捷。

Web Components是一种强大的技术,它可以提供一种模块化、可复用和可维护的方式来构建Web应用。它的好处和优点使得它逐渐成为现代Web开发的重要组成部分。

在Angular中使用Web Components有以下优势:

  1. 组件化开发:Angular的核心思想就是组件化开发,而Web Components也是一种基于组件化的开发模式。使用Web Components可以将应用程序拆分成多个独立的组件,每个组件都有自己的模板、样式和行为。这样可以提高代码的可维护性和复用性。

  2. 平台无关性:Web Components是一种跨平台的技术,可以在任何现代浏览器中使用,而不需要额外的插件或框架支持。这意味着使用Angular开发的组件可以在其他框架或项目中重用,提高开发效率。

  3. 封装性:Web Components使用Shadow DOM将组件的样式和模板封装起来,与外部环境隔离。这样可以防止组件样式和结构被外部环境所影响,提高组件的独立性和安全性。

  4. 生态系统:Web Components拥有庞大的生态系统,有很多第三方库和工具可以用来开发和扩展组件。使用这些工具可以提高开发效率,并且可以与其他Web Components库或框架无缝集成。

使用Web Components可以将Angular中的组件化开发模式与跨平台、封装性和生态系统等优势相结合,提高开发效率和组件的可维护性。


一、Material Web Components

Material Design是由Google设计师和开发人员构建和支持的设计系统。构建Material应用程序和组件的指南发布在material.io上。

最新版本Material 3可以实现个性化、自适应和表现力强的体验,包括动态颜色和增强的可访问性,以及大屏幕布局和设计令牌的基础。

Web组件是具有封装样式和行为的自定义HTML元素。它们适用于许多不同的框架(如Lit、React、Vue和Svelte),以及Web环境(如Eleventy、Wordpress和Ruby on Rails)。

这个库中的许多组件都可以直接替换浏览器元素,例如<button>和<input>。

html 复制代码
<!-- Browser elements -->
<form>
  <label>
    Email
    <input type="email" name="email" required>
  </label>
  <label>
    Subscribe
    <input type="checkbox" name="subscribe">
  </label>

  <button type="reset">Reset</button>
  <button>Submit</button>
</form>

<!-- Material elements -->
<form>
  <md-outlined-text-field label="Email" type="email"
      name="email" required></md-outlined-text-field>
  <label>
    Subscribe
    <md-checkbox name="subscribe"></md-checkbox>
  </label>

  <md-text-button type="reset">Reset</md-text-button>
  <md-outlined-button>Submit</md-outlined-button>
</form>

二、使用步骤

新建项目,结构为

tauri或者直接创建纯前端项目均可。

也就是正常的Angular项目,本人目前使用的版本号为最新的Angular 16

配置启用自定义元素

在app.module.ts文件中,加入

ts 复制代码
schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ]

然后导入需要使用的Web component组建

ts 复制代码
import { MdCheckbox } from '@material/web/checkbox/checkbox.js'
import { MdFilledButton } from '@material/web/button/filled-button.js'
import { MdOutlinedButton } from '@material/web/button/outlined-button.js';
import { MdElevatedButton } from '@material/web/button/elevated-button.js';
import { MdFilledField } from '@material/web/field/filled-field';

组件导入写在

ts 复制代码
bootstrap: [
    AppComponent, 
    // 以下为导入的组件
    MdCheckbox,
    MdFilledButton,
    MdOutlinedButton,
    MdElevatedButton,
    MdFilledField
  ],

然后就可以在Web项目中畅快的使用MWC了

html 复制代码
<label>
  Material 3
  <md-checkbox checked></md-checkbox>
</label>

<md-outlined-button>Back</md-outlined-button>
<md-filled-button>Next</md-filled-button>

贴出源码

app.component.css

css 复制代码
:root {
  font-family: 'Roboto', system-ui, sans-serif;
}

label {
  display: flex;
  align-items: center;
}

app.component.html

html 复制代码
<label>
  Material 3
  <md-checkbox checked></md-checkbox>
</label>

<md-outlined-button>Back</md-outlined-button>
<md-filled-button>Next</md-filled-button>

app.component.ts

ts 复制代码
import { Component } from '@angular/core';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-mwc';
}

app.module.ts

ts 复制代码
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MdCheckbox } from '@material/web/checkbox/checkbox.js'
import { MdFilledButton } from '@material/web/button/filled-button.js'
import { MdOutlinedButton } from '@material/web/button/outlined-button.js';
import { MdElevatedButton } from '@material/web/button/elevated-button.js';
import { MdFilledField } from '@material/web/field/filled-field';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [
    AppComponent, 
    MdCheckbox,
    MdFilledButton,
    MdOutlinedButton,
    MdElevatedButton,
    MdFilledField
  ],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ]
  
})
export class AppModule { }
相关推荐
前端拾光者31 分钟前
利用D3.js实现数据可视化的简单示例
开发语言·javascript·信息可视化
Json_181790144801 小时前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing1 小时前
React核心功能详解(一)
前端·react.js·前端框架
捂月1 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆1 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China1 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q1 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海1 小时前
Chrome离线安装包下载
前端·chrome