Une accessiblité maximisée
Navigation clavier, rôles ARIA et annonces aux lecteurs d'écran : les composants gèrent un maximum de cas pour vous laisser un minimum de travail.
Accessible. Personnalisable.
Sans compromis.
Des composants web natifs et accessibles au maximum, qui s'intégrent facilement à vos projets ou votre design system.
- v0.1.0-alpha.18
- 14 composants
- Lit 3 - Typescript
Ariane c'est..
Votre style avant tout
Chaque composant est livré sans habillage visuel par défaut. Créez votre thème pour qu'ils s'adaptent à votre projet.
Zéro framework imposé
Chaque composant est un custom element natif utilisable avec n'importe quel framework front-end.. ou sans framework du tout.
Pensé pour le mobile
Chaque composant est pensé pour le mobile et intégre des mécanismes utiles pour s'adapter à tous les usages.
Pour tous vos projets
Chargez l'autoloader d'Ariane en une seule ligne depuis un CDN ou intégrez le à votre workflow et configurez-le selon vos besoins.
Traduction intégrée
Le français et l'anglais sont inclus, mais Ariane peut s'adapter facilement et rapidement à n'importe quelle langue.
Testez en quelques secondes
Deux étapes, zéro configuration.
Copiez script et thème dans le
<head><!-- L'autoloader détecte les composants présents pour ne charger que le nécessaire --> <script type="module" src="https://unpkg.com/@ariane-ui/core/cdn/autoloader.js"></script> <!-- On charge un thème pour nos composants (on utilise ici le thème neutre du starter kit) --> <link rel="stylesheet" href="https://jogo-labs.github.io/ariane-starter-kit/ariane-starter.css" /> <!-- Classes de bouton prêtes à l'emploi (.ar-btn-*) pour le HTML dans le light DOM --> <link rel="stylesheet" href="https://jogo-labs.github.io/ariane-starter-kit/presets/buttons.css" />Copiez le composant dans le
<body>Dropdown Modale Calendrier <ar-dropdown> <button slot="trigger" class="ar-btn ar-btn-secondary">Actions</button> <ar-dropdown-item><button>Modifier</button></ar-dropdown-item> <ar-dropdown-item><button>Dupliquer</button></ar-dropdown-item> <ar-dropdown-item><button>Supprimer</button></ar-dropdown-item> </ar-dropdown><button data-ar-dialog-open="mon-dialog" class="ar-btn ar-btn-secondary">Ouvrir la fenêtre</button> <ar-dialog id="mon-dialog" label="Informations importantes"> <p>Votre session expirera dans 5 minutes.</p> </ar-dialog>Votre session expirera dans 5 minutes.
<ar-datepicker label="Date de naissance" format="dd/MM/yyyy" lang="fr-FR" ></ar-datepicker>
Prêt à commencer ?
Installez Ariane en quelques minutes ou explorez le catalogue de composants.