Votre premier composant

Les composants : les blocs de construction de l'UI

Sur le Web, HTML permet de créer des documents riches et structurés grâce à ses nombreuses balises comme <h1> et <li>. Nexy vous permet de combiner votre balisage avec CSS et JavaScript pour créer des composants personnalisés, réutilisables dans votre application.

Définir un composant

Traditionnellement, les développeurs web écrivent le balisage de leur contenu puis ajoutent de l'interactivité avec JavaScript. Aujourd'hui, c'est une exigence de base pour de nombreux sites et applications. Nexy met l'interactivité au premier plan tout en utilisant les mêmes technologies de base : un composant Nexy est une fonction Python que vous pouvez enrichir avec du balisage.

📁 components/
├── 📄 Button.py
└── 📄 Button.html

from nexy import Component
@Component()
def Button(label: str, onClick: Callable):
	return { "label": label, "onClick": onClick }

Structure du fichier HTML pour Button

<button onclick="{{onClick}}">{{label}}</button>
<style>
	button {
		background-color: #4CAF50;
		border: none;
		color: white;
		padding: 10px 20px;
		border-radius: 4px;
		cursor: pointer;
		&:hover {
			background-color: #45a049;
		}
	}
</style>

Utiliser un composant

Maintenant que vous avez défini votre composant Button, vous pouvez l'imbriquer dans d'autres composants. Par exemple, vous pouvez utiliser le composant Button dans une vue :

<Button 
	label="Soumettre" 
	onClick="submitForm()"
/>

Composants avec contenu enfant

Le paramètre caller permet à un composant de recevoir et d'afficher du contenu enfant, transformant le composant en une balise de type bloc.

📁 components/
├── 📄 Card.py
└── 📄 Card.html

from nexy import Component
@Component()
def Card(caller: Any):
	children = caller()
	return { "children": children }

Structure du fichier HTML pour Card

Le fichier HTML associé au composant Card utilise la variable children pour afficher le contenu capturé.

<div class="card">{{children}}</div>
<style>
	.card {
		background-color: #c5d6d1;
		border-radius: 8px;
		padding: 16px;
		width: clamp(300px, 100%, 500px);
		font-family: 'Poppins', sans-serif;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}
</style>

Utiliser un composant avec contenu enfant

<Card>
	<h2>Titre de la carte</h2>
	<p>Contenu de la carte</p>
</Card>

Composition de composants

Les composants peuvent être composés pour créer des interfaces complexes. L'attribut imports permet d'utiliser d'autres composants à l'intérieur d'un composant.

📁 components/
├── 📄 Dashboard.py
└── 📄 Dashboard.html

from nexy import Component
from .Card import Card
from .Button import Button

@Component(
	imports=[Card, Button]
) 
def Dashboard(user: User):
	return { "user": user, "cards": get_user_cards(user.id) }

Structure du fichier HTML pour Dashboard

<div class="dashboard">
	<h1>Bienvenue, {{user.name}}</h1>
	{% for card_data in cards %}
		<Card>
			<h2>{{card_data.title}}</h2>
			<p>{{card_data.content}}</p>
			<Button 
				label="Voir détails" 
				onClick="viewDetails({{card_data.id}})"
			/>
		</Card>
	{% endfor %}
</div>

Composants conteneurs

Les composants conteneurs peuvent encapsuler d'autres composants et du contenu, créant ainsi une structure hiérarchique.

📁 components/
├── 📄 Layout.py
└── 📄 Layout.html

from nexy import Component
from .Card import Card
from .Button import Button

@Component(
	imports=[Card, Button]
) 
def Layout(caller: Any):
	children = caller()
	return { "children": children, "title": "Mon Application" }

Utiliser un composant conteneur

<main>
	<Card>
		<h2>Titre de la carte</h2>
		<p>Contenu de la carte</p>
		<Button 
			label="Cliquez ici" 
			onClick="handleClick()"
		/>
	</Card>
</main>

Avantages du système de composants

Utiliser le système de composants de Nexy présente plusieurs avantages :

• Réutilisation du code à travers différentes parties de l'application
• Séparation claire entre la logique et la présentation
• Facilité de maintenance grâce à la modularité
• Possibilité de créer des bibliothèques de composants pour une utilisation dans plusieurs projets
• Syntaxe intuitive similaire aux frameworks frontend modernes