Components

a7 Components

creating or adding new components is actually quite easy to do.

This is how to do it with the cli:

a7 nc [componentName]
a7 newcomponent [componentName]

As of right now you have to manually import it to index.js file

We are planning to make that automatic.

Importing Example

a7 nc appMain

and then we would import it like this

import appMain from "./components/appMain/appMain.js"

you can now access it's api with these two ways

appMain({[...]})
a7.createElement("appMain", {[...]})

Now lets talk about the component in it self

JS

The javascript [componentName].js file will handle all the logic of the application.

only the exported function will be imported as of right now.

So write your logic inside that function

CSS

The css [componentName].css file stores the component specific styles.

The styles defined in the css file are only for the component.

HTML and Template

The html [componentName].html file is the template of the component.

Components HTML Api

You can call other components by

<[componentName]></[componentName]>

to display a value defined in the js file use

{{[valueName]}}

And refering to the props that were fed to the component use

{{props.[propName]}}

To pass props to other components you add an attribute:

<[componentName] @[propname]="[value]"></[componentName]>