Components - nailsframework/nails GitHub Wiki

Components

NailsFramework encourages you to write reusable code. Therefore we provide you with the functionality of Components.

Below is a sample component used by the NailsFramework Website.

import { State } from  "@nailsframework/nails/lib/core/state";

import { CoreComponent } from  "@nailsframework/nails/lib/core/components/core.component";

export  class AppComponent extends CoreComponent {
public selector: string;
public overload: string = '':
constructor(public state: State) {
super(state);
this.selector =  "app";
}
  
public render() {
/*html */
return `
	<body>
		<div  class="image-container bounceInUp animated">
			<img  src='assets/logo.png'  height="400"  width="400">
		</div>
		<a  href="https://github.com/nailsframework/nails"  class="animate	bounceInRight link">Visit us on GitHub</a>
	</body>
	<yield></yield>
	<footer>
	Make Web Developement faster and less painful. Get startet today with {{ whoami }}
	</footer>
`;
}
}

First you should notice, that your Component must extend the CoreComponent class. This is to provide further functionality. You could only implement the IComponent Interface, but you wouldn't get the reactive part of the Component.

To declair it in the HTML, use the selector specified. In this case:

	<app />

Or

	<app></app>

You can specify overloads like this:

<app overload="abcde"/>

and then in your component declair a PUBLIC field with the name overload.

For example:

class MyComponent extends CoreComponent {
	public overload: string;
}

N-Content

You may want to pass additional HTML to your Component

Like this:

<mycomponent>
	<div>This is a div</div>
	<p>This is a p</p>
</mycomponent>

This can be achieved by inserting an n-content tag in your components render function

render(){
	return `
		<div>
			<p>Main Stuff</p>
		<div>
		<n-content></n-content> <!-- Things insertet into your component will appear here -->
		<n-content select="p"></n-content> <!-- Only top level Elements with the Type p will be rendered in here -->
`
}
⚠️ **GitHub.com Fallback** ⚠️