nexui 0.1.2

Bibliothèque de composants UI modernes avec support HTMX optionnel

🚀 NexUI

NexUI est une bibliothèque de composants UI pour Django, optimisée pour HTMX et basée sur Tailwind CSS. Elle permet d'ajouter facilement des éléments interactifs à vos applications Django tout en bénéficiant des avantages d'une intégration fluide avec HTMX pour la gestion des requêtes AJAX.

---

📌 Installation

Installation de base

pip install nexui

Installation avec support HTMX

Si vous prévoyez d'utiliser HTMX avec vos composants :

pip install nexui[htmx]

Ou installez HTMX séparément plus tard :

pip install django-htmx

Ajoutez nexui à la liste des applications installées dans settings.py :

INSTALLED_APPS = [
    ...
    'nexui',
]

---

🎨 Fonctionnalités

✅ Composants UI réutilisables pour Django
🔥 Intégration fluide avec HTMX
🎨 Basé sur Tailwind CSS pour un design moderne
📦 Facile à installer et à utiliser

---

🚀 Utilisation

Charger les tags NexUI dans vos templates Django

{% load nexui_tags %}

---

📖 Documentation

🔘 Composant Button

Le composant button permet de créer des boutons personnalisables avec des icônes et des interactions HTMX.

Options disponibles :

• label : Texte du bouton
• type : Type du bouton (button, submit, reset)
• class : Classes CSS personnalisées
• icon : Icône (supporte Font Awesome et Unicode)
• icon_type : Type d'icône (fa, unicode, emoji)
• icon_position : Position de l'icône (left, right)
• icon_size : Taille de l'icône
• icon_color : Couleur de l'icône
• disabled : Désactive le bouton (true)
• url_name : Nom de l'URL Django
• url_params : Paramètres dynamiques pour l'URL Django
• attrs : Attributs HTML et HTMX supplémentaires (hx-*, id, style, data-* etc.)

Exemples d'utilisation :

1️⃣ Bouton simple

{% button label="Envoyer" %}

2️⃣ Bouton simple personnalisé

{% button label="Envoyer" type="submit" class="bg-yellow-500 text-black" %}

3️⃣ Bouton avec HTMX

{% button label="Envoyer avec HTMX" type="submit" class="bg-green-500" attrs="hx-post='/submit' hx-target='#result' hx-swap='innerHTML'" %}

4️⃣ Bouton avec URL dynamique

{% button label="Dynamique URL Params" type="submit" class="bg-blue-500 text-white" url_name="update-user" url_params="2, tomate" attrs="hx-confirm='Êtes-vous sûr ?' hx-target='#result' hx-swap='innerHTML'" %}

5️⃣ Bouton avec URL dynamique et un seul paramètres

{% button label="Dynamique URL Params" type="submit" class="bg-blue-500 text-white" url_name="update-user" url_params="1" attrs="hx-confirm='Êtes-vous sûr ?' hx-target='#result' hx-swap='innerHTML'" %}

6️⃣ Bouton avec URL dynamique et plusieurs paramètres

{% button label="Dynamique URL Params" type="submit" class="bg-blue-500 text-white" url_name="update-user" url_params="1, developer" attrs="hx-confirm='Êtes-vous sûr ?' hx-target='#result' hx-swap='innerHTML'" %}

7️⃣ Bouton avec émojis

{% button label="Télécharger" class="bg-green-500" icon="⬇️" icon_position="left" icon_size="lg" %}

8️⃣ Bouton désactivé

{% button label="Disabled" disabled="true" %}

9️⃣ Bouton avec Font Awesome

{% button label="Éditer" icon="fa-solid fa-pen" icon_type="fa" %}

🔟 Bouton avec code HTML

{% button label="Étoile" icon="9733" icon_type="unicode" %}

{% button label="At Symbol" icon="&#64" icon_type="unicode" %}

---

💡 Contribuer

Actuellement, le projet est en phase de test initial. Nous encourageons les utilisateurs intéressés à donner leur avis sur la bibliothèque.

Si vous souhaitez participer à l'évolution de NexUI ou si vous avez des suggestions :

1. Forkez le projet 📌
2. Testez les composants et apportez vos retours 🛠️
3. Créez une issue pour partager vos suggestions ou problèmes ✅

Nous ne pouvons pas accepter de contributions directes pour le moment, mais vos retours sont essentiels pour l'évolution de NexUI.

---

🔗 Liens utiles

• Dépôt GitHub 🖥️
• Signaler un bug 🐞
• HTMX ⚡
• Tailwind CSS 🎨

---

⚖️ Licence

Ce projet est sous licence MIT. Voir le fichier LICENSE pour plus de détails.