安装

快速启动

为了快速起起跑,Astro网络组件通过CDN提供. 在您的 <head>

<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
    href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
    rel="stylesheet"
/>
<link
    rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@astrouxds/astro-web-components/dist/astro-web-components/astro-web-components.css"
/>
<script
    type="module"
    src="https://cdn.jsdelivr.net/npm/@astrouxds/astro-web-components/dist/astro-web-components/astro-web-components.esm.js"
></script>

Astro组件现在可以在您的应用程序中找到.

<body>
    <rux-button>Hello World</rux-button>
</body>

一体化

1. 安装 npm i @astrouxds/astro-web-components

2. 导入 Astro 字体

<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
    href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
    rel="stylesheet"
/>

机器人 用于字体. 我们建议使用Google的CDN;然而,你也可以拉倒并服务你自己的字体拷贝.

3. 启动您的应用程序

静态 HTML(w/无害环境管理模块)

// Import Astro's base styles
<link
    rel="stylesheet"
    href="/node_modules/@astrouxds/astro-web-components/dist/astro-web-components/astro-web-components.css"
/>
<script type="module">
    import { defineCustomElements } from '/node_modules/astro-web-components/loader'
    defineCustomElements()
</script>

通用框架

// Import Astro's base styles
import 'astro-web-components/dist/astro-web-components/astro-web-components.css'
import {
    applyPolyfills,
    defineCustomElements,
} from 'astro-web-components/loader'

applyPolyfills().then(() => {
    defineCustomElements()
})

阴道

import Vue from 'vue'
import App from './App.vue'

// Import Astro's base styles
import '@astrouxds/astro-web-components/dist/astro-web-components/astro-web-components.css'
import {
    applyPolyfills,
    defineCustomElements,
} from '@astrouxds/astro-web-components/loader'

Vue.config.productionTip = false

// Tell Vue to ignore all components defined in the astro-web-components package
Vue.config.ignoredElements = [/rux-\w*/]

// Bind the custom elements to the window object
applyPolyfills().then(() => {
    defineCustomElements()
})

new Vue({
    render: (h) => h(App),
}).$mount('#app')

角质

1. 包含 AstroComponentsModule 在任何使用Astro组件的模块中.

import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'
import { FormsModule } from '@angular/forms'
import { AstroComponentsModule } from '@astrouxds/angular'

import { AppComponent } from './app.component'

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, FormsModule, AstroComponentsModule],
    bootstrap: [AppComponent],
})
export class AppModule {}

或者,在主.ts中定义自定义元素

import { enableProdMode } from '@angular/core'
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'

import { AppModule } from './app/app.module'
import { environment } from './environments/environment'

// Note: loader import location set using "esmLoaderPath" within the output target config
import { defineCustomElements } from '@astrouxds/astro-web-components/loader'

if (environment.production) {
    enableProdMode()
}

platformBrowserDynamic()
    .bootstrapModule(AppModule)
    .catch((err) => console.log(err))
defineCustomElements()

3. 为循环设置动态数据

<rux-classification-marking *ngFor="let type of types" [attr.classification]="type"></rux-classification-marking>

反应

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import registerServiceWorker from './registerServiceWorker'

import {
    applyPolyfills,
    defineCustomElements,
} from '@astrouxds/astro-web-components/loader'

ReactDOM.render(<App />, document.getElementById('root'))
registerServiceWorker()

applyPolyfills().then(() => {
    defineCustomElements()
})

树摇 + Bundlers

Astro飞船 配备了方便的懒人装填器 但是如果你更愿意控制你的建造过程 并使用现有的捆绑器 支持树摇动,你也可以只选择你实际使用的组件。 例如:

import { RuxClock } from '@astrouxds/astro-web-components/dist/components/rux-clock.js'
customElements.define('rux-clock', RuxClock)

注:您需要手动呼叫 customElements.define 对于您想要使用的每个组件及其依赖关系. 参考每个组成部分的文档,看看它们的依赖性.