@adc/forms 中文文档教程
@adc/forms
"astyle=flat 
这是独立 Web 组件的集合使使用表单更容易，包括以编程方式生成它们。 您可以在任何现代 JS 框架内使用这些组件，也可以完全不使用任何框架。
@adc/forms 是 aide-de-camp 网络组件集合的一部分。
How to install
您可以：
- install the npm package with
npm install @adc/forms - rely on unpkg.com and a good ol'
<script>tag
How to use
Framework-less
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://unpkg.com/@adc/forms/latest/dist/adc-forms.js"></script>
<!-- or use the path to your node_modules folder if you are using npm -->
</head>
<body>
<!-- The @adc/forms Web Components are now ready to be used. -->
<!-- Please refer to the Component Catalog section below -->
</body>
</html>
或者，如果您想利用 ES 模块，您可以使用 import 语句包含组件。
<!DOCTYPE html>
<html lang="en">
<head>
<script type="module">
import { defineCustomElements } from 'https://unpkg.com/adc/forms/latest/dist/esm/es2017/adc-forms.define.js';
// or use the path to your node_modules folder if you are using npm
defineCustomElements(window);
</script>
</head>
<body>
<!-- The @adc/forms Web Components are now ready to be used. -->
<!-- Please refer to the Component Catalog section below -->
</body>
</html>
Angular
Including the Custom Elements Schema
在模块中包含 CUSTOM_ELEMENTS_SCHEMA 允许在 HTML 标记中使用 Web 组件，而编译器不会产生错误。 下面是将其添加到 AppModule 的示例：
import { BrowserModule } from '@angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { SharedModule } from './shared/shared.module';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, FormsModule, SharedModule],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}
CUSTOMELEMENTSSCHEMA 需要包含在任何使用自定义元素的模块中。
Calling defineCustomElements
使用 Stencil 构建的组件集合（例如这个）包含一个 main 函数，用于加载集合中的组件。 该函数称为 defineCustomElements() 并且需要在应用程序引导期间调用一次。 这样做的一个方便的地方是在 main.ts 中：
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { defineCustomElements } from '@adc/forms/dist/loader';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch(err => console.log(err));
defineCustomElements(window);
React
对于使用 create-react-app starter 构建的应用程序，包含组件库的最简单方法是从 index.js 文件调用 defineCustomElements(window)。
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { defineCustomElements } from '@adc/forms/dist/loader';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
defineCustomElements(window);
Vue.js
为了在 Vue 应用程序中使用自定义元素库，必须修改应用程序以定义自定义元素并通知 Vue 编译器在编译期间要忽略哪些元素。 这一切都可以在 main.js 文件中完成。 例如（假设您使用 vue-cli 创建了您的项目）：
import Vue from 'vue';
import App from './App.vue';
import { defineCustomElements } from '@adc/forms/dist/loader';
Vue.config.productionTip = false;
Vue.config.ignoredElements = [/adc-forms-\w*/];
defineCustomElements(window);
new Vue({
render: h => h(App),
}).$mount('#app');
Component Catalog
Browser support
- Chrome (and all Chromium based browsers)
- Safari
- Edge
- Firefox (64+ only)
Web 组件，特别是自定义元素，在 Chrome 和 Safari 中得到原生支持，并且将同时用于 Edge 和 Firefox。 已经包含一个动态 polyfill 加载器，以便只为缺少特定功能的浏览器加载 polyfill。
@adc/forms
This is a collection of standalone Web Components that make it easier to work with forms, including generating them programmatically. You can use the components inside any modern JS framework or with no framework at all.
@adc/forms is part of the aide-de-camp Web Components collection.
How to install
You can either:
- install the npm package with
npm install @adc/forms - rely on unpkg.com and a good ol'
<script>tag
How to use
Framework-less
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://unpkg.com/@adc/forms/latest/dist/adc-forms.js"></script>
<!-- or use the path to your node_modules folder if you are using npm -->
</head>
<body>
<!-- The @adc/forms Web Components are now ready to be used. -->
<!-- Please refer to the Component Catalog section below -->
</body>
</html>
Alternatively, if you want to take advantage of ES Modules, you could include the components using an import statement.
<!DOCTYPE html>
<html lang="en">
<head>
<script type="module">
import { defineCustomElements } from 'https://unpkg.com/adc/forms/latest/dist/esm/es2017/adc-forms.define.js';
// or use the path to your node_modules folder if you are using npm
defineCustomElements(window);
</script>
</head>
<body>
<!-- The @adc/forms Web Components are now ready to be used. -->
<!-- Please refer to the Component Catalog section below -->
</body>
</html>
Angular
Including the Custom Elements Schema
Including theCUSTOM_ELEMENTS_SCHEMA in the module allows the use of the web components in the HTML markup without the compiler producing errors. Here is an example of adding it to AppModule:
import { BrowserModule } from '@angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { SharedModule } from './shared/shared.module';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, FormsModule, SharedModule],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}
The CUSTOMELEMENTSSCHEMA needs to be included in any module that uses custom elements.
Calling defineCustomElements
A component collection built with Stencil (such as this one) includes a main function that is used to load the components in the collection. That function is called defineCustomElements() and it needs to be called once during the bootstrapping of your application. One convenient place to do this is in main.ts as such:
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { defineCustomElements } from '@adc/forms/dist/loader';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch(err => console.log(err));
defineCustomElements(window);
React
With an application built using the create-react-app starter the easiest way to include the component library is to call defineCustomElements(window) from the index.js file.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { defineCustomElements } from '@adc/forms/dist/loader';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
defineCustomElements(window);
Vue.js
In order to use the custom element library within the Vue app, the application must be modified to define the custom elements and to inform the Vue compiler which elements to ignore during compilation. This can all be done within the main.js file. For example (assuming you created your project with vue-cli):
import Vue from 'vue';
import App from './App.vue';
import { defineCustomElements } from '@adc/forms/dist/loader';
Vue.config.productionTip = false;
Vue.config.ignoredElements = [/adc-forms-\w*/];
defineCustomElements(window);
new Vue({
render: h => h(App),
}).$mount('#app');
Component Catalog
Browser support
- Chrome (and all Chromium based browsers)
- Safari
- Edge
- Firefox (64+ only)
Web Components, specifically Custom Elements, are natively supported in Chrome and Safari and are coming to both Edge and Firefox. A dynamic polyfill loader is already included in order to only load the polyfills for the browsers that are missing specific features.
