Package Exports

@orgenic/orgenic-ui

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@orgenic/orgenic-ui) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.