The QuamUX Documentation

Installation

if you are using npm

npm install quam

or directly using a CDN web distribution

<script src="https://cdn.quamjs.org/latest/quamux.js"></script>

Hello World

import React from 'react';
import ReactDOM from 'react-dom'
import Header from 'quam/ux/Header'
import UX from 'quam/UXBuilder'

const greeting = <Header level = "1" content = "Hello World" />;
UX.build(greeting, document.getElementById("root"))

Introduce UXBuilder

UXBuilder is an essential render based on React.render() method, you can still use React origin way to render elements of QuamUX, but UXBuilder will support more features of Quam in the future.

method::build()

UX.build(JSX, renderNode)

JSX here supports all types of elements and components, NOT ONLY QuamUX.

Components

Header

<Header content = "demo_content" level = "1" />

props::content

define the inner HTML text.

props::level

define the level of header, like h1, if you give a number over 6 (headers only support 1 to 6), the element will be renderred as p.