quest-ui v0.3.1

Installation

quest-ui is available as an npm package.

// with npm
npm install quest-ui

// with yarn
yarn add quest-ui

Styling

In the public index.html file import add the unpkg cdn to provide quest-ui components access to global styling. Copy and paste the code below into the head of that file.

  <link rel="stylesheet" href="https://unpkg.com/quest-ui/dist/quest-ui/quest-ui.css" />
  <script type="module" src="https://unpkg.com/quest-ui/dist/quest-ui/quest-ui.esm.js"></script>
  <script nomodule="" src="https://unpkg.com/quest-ui/dist/quest-ui/quest-ui.js"></script>

Usage - React

In your index.js simply import the polyfills then apply them and define your elements as illustrated below.

import React from "react";
// import the polyfills and the elements from quest-ui
import { applyPolyfills, defineCustomElements } from "quest-ui/loader";
import App from "./App";
import * as serviceWorker from "./serviceWorker";

ReactDOM.render(<App />, document.getElementById("root"));

serviceWorker.register();

// apply the polyfills and define the elements
applyPolyfills().then(() => {
  defineCustomElements(window);
});

Then in your component use the tag associated with the quest-ui element you would like to use. Currently there is one default element called my-component

import React from "react";
import ReactDOM from "react-dom";

function App() {
  return <my-component first="John" middle="C" last="Doe"></my-component>;
}

ReactDOM.render(<App />, document.querySelector("#app"));

Usage - Angular

In your main app.module.ts import your the custom elements schema and apply it to the app schemas

import { BrowserModule } from "@angular/platform-browser";
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from "@angular/core";

import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}

In your main.ts file simply import the polyfills then apply them and define your elements as illustrated below.

import { enableProdMode } from "@angular/core";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";

import { AppModule } from "./app/app.module";
import { environment } from "./environments/environment";
import { applyPolyfills, defineCustomElements } from "quest-ui/loader";

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch(err => console.error(err));

applyPolyfills().then(() => {
  defineCustomElements(window);
});

Finally in your example.component.html add your component

<div>
  <my-component first="John" middle="C" last="Doe"></my-component>
</div>