文章目录
前言
Web Components是一种用于构建可重用的Web应用组件的技术标准。它由一系列相关的技术组成,包括自定义元素、Shadow DOM、模板和HTML Imports。
Web Components的主要好处和优点包括:
-
可重用性:Web Components允许开发者创建自定义的HTML元素,这些元素可以在不同的项目和应用中重复使用。这样可以节省开发时间和精力,并提高代码的可维护性。
-
封装性:通过使用Shadow DOM,Web Components可以将组件的样式和逻辑封装在组件内部,避免和其他组件或全局样式发生冲突。这样可以避免全局污染,提高代码的可靠性和可预测性。
-
组件化开发:Web Components鼓励将应用拆分为独立的组件,每个组件负责特定的功能或UI。这种组件化的开发方式可以提高代码的可维护性和可扩展性,并促进团队合作。
-
平台无关性:Web Components是基于标准的Web技术,可以在不同的浏览器和平台上使用,而不需要依赖任何特定的框架或库。这使得Web Components具有很好的兼容性和可移植性。
-
生态系统:Web Components有一个活跃的生态系统,包括大量的第三方库和工具,可以帮助开发者更方便地创建和使用Web Components。这使得开发更加高效和便捷。
Web Components是一种强大的技术,它可以提供一种模块化、可复用和可维护的方式来构建Web应用。它的好处和优点使得它逐渐成为现代Web开发的重要组成部分。
在Angular中使用Web Components有以下优势:
-
组件化开发:Angular的核心思想就是组件化开发,而Web Components也是一种基于组件化的开发模式。使用Web Components可以将应用程序拆分成多个独立的组件,每个组件都有自己的模板、样式和行为。这样可以提高代码的可维护性和复用性。
-
平台无关性:Web Components是一种跨平台的技术,可以在任何现代浏览器中使用,而不需要额外的插件或框架支持。这意味着使用Angular开发的组件可以在其他框架或项目中重用,提高开发效率。
-
封装性:Web Components使用Shadow DOM将组件的样式和模板封装起来,与外部环境隔离。这样可以防止组件样式和结构被外部环境所影响,提高组件的独立性和安全性。
-
生态系统: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 { }