Démarrage rapide
Vous pouvez charger les composants via CDN, ou en les installant en local dans votre projet.
Il s'agit de Custom Elements natifs, ils devraient donc fonctionner de manière transparente avec n'importe quel framework.
Cependant, l'utilisation de Custom Elements avec certains frameworks peut nécessiter une configuration préalable.
Consultez la page dédiée pour plus d'informations.
La méthode la plus rapide pour ajouter Ariane à votre projet.
Aucun outil requis : ajoutez les deux balises dans votre <head> et utilisez les composants directement en HTML.
<!-- Charge automatiquement les composants utilisés dans la page ou ses shadow DOM. -->
<script type="module" src="https://unpkg.com/@ariane-ui/core/cdn/autoloader.js"></script>En développement local, utilisez autoloader.dev.js à la place pour obtenir des avertissements détaillés dans la console.
Les composants sont ensuite utilisables directement, par exemple un composant Alerte :
<ar-alert variant="success">
Opération réussie.
</ar-alert>L'autoloader reste utilisable dans une application construite avec un framework, avec un ajustement : il définit un composant quand son tag apparaît dans la page, donc après le rendu. Une valeur que le framework a posée avant ce moment est perdue quand elle ne peut pas passer par un attribut texte : une fonction (isDateDisabled) ou un booléen en camelCase (closeOnBackdrop). Affectez-la alors en propriété une fois le composant défini (customElements.whenDefined). Le détail par framework est dans la page Frameworks.
Si vous utilisez beaucoup de composants ou souhaitez éviter les imports dynamiques, vous pouvez également charger tous les composants en une seule requête.
<script type="module" src="https://unpkg.com/@ariane-ui/core/cdn/index.js"></script>Chaque script CDN existe en deux versions :
| Version | Fichiers | Contenu |
|---|---|---|
| Production | autoloader.js, index.js | Minifiée, près de deux fois plus légère, sans avertissements. |
| Développement | autoloader.dev.js, index.dev.js | Non minifiée, avec des avertissements dans la console. |
Les avertissements de développement signalent les erreurs d'usage, notamment d'accessibilité (par exemple un dialog sans libellé accessible). Utilisez la version de développement en local, et la version de production sur votre site.
Le nom sans suffixe est la version de production : oublier de préciser la version donne le build sûr.
Avec npm, une seule version est publiée : c'est le bundler de votre projet qui choisit, selon process.env.NODE_ENV (la valeur production supprime les avertissements).
Installez d'abord le paquet d'Ariane
npm install @ariane-ui/corePuis importez les composants individuellement :
import '@ariane-ui/core/dist/components/alert/index.js';Vous pouvez aussi importer tous les composants en une seule ligne :
import '@ariane-ui/core';