orgenic ui 다운로드 - orgenic ui 소스 코드 다운로드

orgenic ui

타사 구성 요소

version 0.5.0

다운로드

Orgenic UI

시작하기

이 지침을 사용하면 프로젝트에 오르기 성 UI가 통합됩니다.

설치

npm i @orgenic/orgenic-ui

모난

각도 적용에 오르기 성 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 { }

반응

RECT 애플리케이션에서 오르기 성 UI를 통합하십시오

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

VUE 응용 프로그램에 오르기 성 UI를 통합하십시오

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

일반 JS 응용 프로그램에 오르간 -UI를 통합합니다.

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 >