ORGENIC UI

Getting Started

With these instructions you will get ORGENIC UI integrated in your project.

Installing

npm i @orgenic/orgenic-ui

Angular

Integrate ORGENIC UI in your angular application

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 { }

React

Integrate ORGENIC UI in your react application

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

Integrate ORGENIC UI in your vue application

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)
});

Vanilla JS

Integrating ORGENIC-UI in a plain JS application.

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>

Documentation

Find the full documentation of ORGENIC UI at https://docs.orgenic.org.

Versioning

We use Semantic Versioning.

License

This project is licensed under the MIT License - see the LICENSE file for details.

orgenic / orgenic-ui