Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

travis status npm version

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.