Qcom is a Javascript Framework for creating Custom web components or web Elements with Dynamic HTML generating functions. No more HTML tags and css styling required.
npm install @qcom.io/qcom
!Downloads
#### Installation
``bash`
npm install @qcom.io/qcom
#### Or CLI Installation for Quick Startbash`
npx @qcom.io/qcom-cli
npm start$3
http://localhost:8080
#### Or Use following code to your html file
`html`
#### index.htmlhtml
`
html
I am H1
`
js
h1({class:'head', style:{ color:'red', backgroundColor : 'Yellow' }, id:'heading' }, 'I am H1' )
`#### Functions
html
`
#### Data Management
html
`#### Loop
html
`#### Get Api
html
`#### Styling (camelCase is required while using style)
html
`
#### Qcom Router
html
`$3
!demoofqcomGrammar:
function
┌─────────-───────────────────────────────┴────────────────────────────────────────────────────────┐
│ separators |
│ ┌────────────┴───┬────────────────┬───────────────────────────┐ |
| ↓ ↓ ↓ ↓ |
p( { to:'firstname' , class:'mt12' , id:'firstname' , style: {color:color.red} }, 'Hello World' )
└───┬───┘ └───┬───┘ └────┬───┘ └────┬────────┘ |
┴───────────┬──────┴─────-──-─────┘-──-─────-─────-┘ |
attributes Text
Use
color : For color coding
import $,{color} from 'https://unpkg.com/@qcom.io/qcom'
$({
theme:{
color:color.red,
background:color.yellow
}
})Use
to : For Two way data binding
input({to:'email'}),
p({to:'email'},'')Use
router : For static and dynamic routing
template:()=>div(
appbar(
btn({route:'/QcomOne',is:'link', class:'ml12'},'One'),
btn({route:'/QcomTwo',is:'link', class:'ml12'},'Two'),
),
div({class:'mt12', id:'root'}) //<-|
), // |
include:[QcomOne,QcomTwo,QcomError],// |
router:{ // |
root:'QcomOne', // |
view:'root', // id of div <-----------|
error:$('QcomError')(),
links:['QcomOne','QcomTwo']
}