Orgenic Ui Save
ORGENIC UI is an MIT-licensed open source project for creating strong user interfaces with high quality web components.
Project 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.
Open Source Agenda is not affiliated with "Orgenic Ui" Project. README Source: orgenic/orgenic-ui
Stars
53
Open Issues
28
Last Commit
1 year ago
Repository
License
Homepage
Open Source Agenda Badge
