User interfaces in Nijor are built using components. ( You can think of them as custom html tags with custom attributes ) A component is defined inside a .nijor file. Components encapsulate markup, logic, and styles in a single file, making them easy to reuse and maintain.
<body>
<!-- Your HTML goes here -->
</body>
<style>
/* Your CSS goes Here */
/* CSS here is scoped ; the styles defined here will only apply to html inside this body tag */
</style>
<script>
// Your JS goes here
</script>
Variables declared inside the script section can be used directly in the template. They are inserted using curly braces.
Props are the attributes passed down to our components. Props is actually an object which contains all the attributes passed down from the parent and we can destructure them to make it easy to read.
Props are also a type of variable and accessing them in the template is similar to accessing other variables. props is an attribute of body, and we can access props value inside the script too.
html is a special prop which is the innerHTML of a component being called.
<body props="{ name , age }">
<h1>Hello { name } !</h1>
<p>You are { age } and you are { isEligible } to drive </p>
</body>
<script>
const isEligible = parseInt(age) > 18 ? "eligible" : "not eligible";
</script>
While working in .nijor files, inline events are declared using the on:event syntax. Example : onclick becomes on:click.
<body>
<p id="msg"></p>
<button on:click="sayHello()">Click</button>
</body>
<script>
function sayHello() {
document.getElementById('msg').innerHTML = "Hello World !";
}
</script>
Components are imported using the import tag outside body.
<import name="..." source="...">
Component names are case-insensitive just like regular html tags. You can name your component anything.
But avoid the following names : body, head, import, style, script
<body props="{ title , html }">
<div class="box">
<h3>{ title }</h3>
<p>{ html }</p>
<button on:click="showMessage('{html}')">Show Message</button>
</div>
</body>
<script>
function showMessage(msg) {
alert(msg);
}
</script>
<style>
.box {
border: 1px solid #ccc;
padding: 14px;
border-radius: 6px;
background: #f8f8f8;
max-width: 320px;
}
button {
margin-top: 10px;
}
</style>
<import name="notification-box" source="@/components/notification-box.nijor">
<body>
<h1>System Notifications</h1>
<notification-box title="Update Available">A new version of the application is ready to install</notification-box>
<notification-box title="Connection Status">The application is currently running in offline mode</notification-box>
</body>