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

CSDN 2024-09-05 08:33:01 阅读 50

文章目录

前言一、Material Web Components二、使用步骤配置启用自定义元素

前言

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>。

<form>

<label>

Email

<input type="email" name="email" required>code>

</label>

<label>

Subscribe

<input type="checkbox" name="subscribe">code>

</label>

<button type="reset">Reset</button>code>

<button>Submit</button>

</form>

<form>

<md-outlined-text-field label="Email" type="email"code>

name="email" required></md-outlined-text-field>code>

<label>

Subscribe

<md-checkbox name="subscribe"></md-checkbox>code>

</label>

<md-text-button type="reset">Reset</md-text-button>code>

<md-outlined-button>Submit</md-outlined-button>

</form>

`二、使用步骤`

 新建项目，结构为
 
  
  
 tauri或者直接创建纯前端项目均可。
  
 
 也就是正常的Angular项目，本人目前使用的版本号为最新的Angular 16
 
配置启用自定义元素
 在app.module.ts文件中，加入
 <code>schemas: [
 CUSTOM_ELEMENTS_SCHEMA
 ]
 
然后导入需要使用的Web 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';
 
组件导入写在
 
bootstrap: [
 AppComponent, 
 // 以下为导入的组件
 MdCheckbox,
 MdFilledButton,
 MdOutlinedButton,
 MdElevatedButton,
 MdFilledField
 ],
 
然后就可以在Web项目中畅快的使用MWC了
 
<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
 
:root { 
 font-family: 'Roboto', system-ui, sans-serif;
}
label { 
 display: flex;
 align-items: center;
}
 
app.component.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
 
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
 
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 {  }

 
 
   上一篇： element-plus中的el-table组件tooltip显示错位  
  下一篇： 前端pc和小程序接入快递100（跳转方式和api方式）====实时查询接口 
  本文标签 
  【一起学Rust | 框架篇 | Tauri2.0框架】在Angular中集成Material Web Components    
 
  
  声明
  本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
 如有涉及侵权，请联系本站进行删除
 转载本站原创文章，请注明来源及作者。