ORGENIC UI
Getting Started
With these instructions you will get ORGENIC UI integrated in your project.
Installing
npm i @orgenic/orgenic-uiAngular
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.