orgenic ui下載 - orgenic ui源代碼下載

orgenic ui

三方組件

version 0.5.0

下載

ORGENIC UI

入門

通過這些說明，您將在項目中集成ORGENIC UI。

安裝

npm i @orgenic/orgenic-ui

角

將ORGENIC UI集成到您的角度應用中

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' ;

// add line: import orgenic ui loader
import { defineCustomElements } from '@orgenic/orgenic-ui/dist/loader' ;

if ( environment . production ) {
  enableProdMode ( ) ;
}

platformBrowserDynamic ( ) . bootstrapModule ( AppModule )
  . catch ( err => console . error ( err ) ) ;

// add line: register custom elements
defineCustomElements ( window ) ;

app/app.module.ts

 // ...
// add line: import custom elements schema
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core' ;

@ NgModule ( {
    declarations : [
        // ...
    imports : [
        // ...
    ] ,
    providers : [
        // ...
    ] ,
    bootstrap : [ AppComponent ] ,
// add line: add custom elements schema to NgModule
    schemas : [ CUSTOM_ELEMENTS_SCHEMA ]
} )
export class AppModule { }

反應

將ORGENIC UI集成在您的React應用程序中

src/index.js

 import React from 'react' ;
import ReactDOM from 'react-dom' ;
import './index.css' ;
import App from './App' ;
import * as serviceWorker from './serviceWorker' ;
// add line: import orgenic ui loader
import { defineCustomElements } from '@orgenic/orgenic-ui/dist/loader' ;

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

// add line: register custom elements
defineCustomElements ( window ) ;

serviceWorker . unregister ( ) ;

Vue

將ORGENIC UI集成在您的VUE應用程序中

src/main.js

 import Vue from 'vue' ;

// ...

// add line: import orgenic ui loader
import { defineCustomElements } from '@orgenic/orgenic-ui/dist/loader' ;

// add line: register custom elements
defineCustomElements ( window ) ;

Vue . config . productionTip = false ;
// add line: configure vue to ignore orgenic-ui components
Vue . config . ignoredElements = [ / og-w* / ] ;

const router = new VueRouter ( {
    // ...
} )

Vue . use ( VueRouter ) ;

new Vue ( {
    el : '#app' ,
    router ,
    render : ( h ) => h ( App )
} ) ;

香草JS

將Orgenic-UI集成在普通JS應用中。

index.html

 <!DOCTYPE html >
< html >
    < head >
        < link rel =" stylesheet " type =" text/css " href =" orgenic-ui/dist/themes/dark.theme.css " />
        < script src =" orgenic-ui/dist/orgenic-ui.js " > </ script >
        < style >
            body {
                font-family: Roboto;
            }
        </ style >
    </ head >
    < body class =" og-theme--dark " >
        < og-card name =" Hello ORGENIC-UI " >
            < div slot =" content " >
                < og-button label =" Default Button " > </ og-button >
            </ div >
        </ og-card >
    </ body >
</ html >