# Alpine.js
[](https://alpinejs.codewithhugo.com/chat/)
Alpine.js offre les propriétés déclaratives et réactives des grands frameworks tels que Vue ou React à un coût bien moindre.
Le DOM est préservé, et vous pouvez lui attribuer les comportements comme bon vous semble.
C'est un peu le [Tailwind](https://tailwindcss.com/) du JavaScript.
> Note : La syntaxe de cet outil est presque entièrement inspirée de [Vue](https://vuejs.org/) (et par extension [Angular](https://angularjs.org/)). Je suis à jamais reconnaissant pour ce qu'ils ont apporté au web.
## Documentations traduites
| Langue | Lien vers la documentation |
| --- | --- |
| Chinois Traditionel | [**繁體中文說明文件**](./README.zh-TW.md) |
| Allemand | [**Dokumentation in Deutsch**](./README.de.md) |
| Indonesien | [**Dokumentasi Bahasa Indonesia**](./README.id.md) |
| Japonais | [**日本語ドキュメント**](./README.ja.md) |
| Portuguais | [**Documentação em Português**](./README.pt.md) |
| Russe | [**Документация на русском**](./README.ru.md) |
| Espagnol | [**Documentación en Español**](./README.es.md) |
| Français | [**Documentation en Français**](./README.fr.md) |
## Installation
**Avec CDN :** Ajoutez le script suivant à la fin de votre section ``.
```html
```
C'est tout. L'initialisation est automatique.
Dans les environnements de production, il est recommandé d'inscrire un numéro de version spécifique dans le lien, afin d'éviter qu'une nouvelle version ne provoque un comportement inattendu.
Par exemple, pour utiliser la version `2.8.2` (la dernière) :
```html
```
**Avec npm :** Installer le paquet avec npm.
```js
npm i alpinejs
```
Importez-le dans votre script.
```js
import 'alpinejs'
```
**Pour la compatibilité IE11** utilisez plutôt les scripts suivants.
```html
```
Le schéma ci-dessus représente le [schéma module/nomodule](https://philipwalton.com/articles/deploying-es2015-code-in-production-today/). Il permet de faire en sorte que le pack soit automatiquement chargé dans les navigateurs modernes, mais aussi pour IE11 et les autres navigateurs anciens.
## Utilisation
*Menu déroulant/Modal*
```html
Elément de menu
```
*Onglets*
```html
Onglet Foo
Onglet Bar
```
Vous pouvez même l'utiliser pour faire des choses moins courantes:
*Précharger le HTML d'un élément de menu lors du survol.*
```html
Chargement Spinner...
```
## Apprentissage
Il existe 14 directives disponibles:
| Directive | Description |
| --- | --- |
| [`x-data`](#x-data) | Déclare la portée d'un nouveau composant. |
| [`x-init`](#x-init) | Exécute une expression lors de l'initialisation d'un composant. |
| [`x-show`](#x-show) | Alterne `display: none;` sur l'élément selon l'expression (true ou false). |
| [`x-bind`](#x-bind) | Fixe la valeur d'un attribut au résultat d'une expression JS. |
| [`x-on`](#x-on) | Attache un écouteur d'évènement à l'élément. Exécute une expression JS lorsque l'évènement est déclenché. |
| [`x-model`](#x-model) | Ajoute une liaison de données bidirectionnelle (two-way data binding) à un élément. Conserve la synchronisation de l'élément d'entrée avec les données du composant. |
| [`x-text`](#x-text) | Fonctionne de manière similaire à `x-bind`, mais avec mise à jour du `innerText` d'un élément. |
| [`x-html`](#x-html) | Fonctionne de manière similaire à `x-bind`, mais avec mise à jour du `innerHTML` d'un élément. |
| [`x-ref`](#x-ref) | Un moyen pratique de récupérer des éléments bruts du DOM de votre composant. |
| [`x-if`](#x-if) | Supprime totalement un élément du DOM. Doit s'utiliser avec la balise ``. |
| [`x-for`](#x-for) | Crée de nouveaux noeuds DOM pour chaque élément d'un tableau. Doit s'utiliser avec la balise ``. |
| [`x-transition`](#x-transition) | Directives pour renseigner les classes aux différentes étapes de transition d'un élément. |
| [`x-spread`](#x-spread) | Permet de lier l'objet de directives d'Alpine à un élément pour une meilleure réutilisation. |
| [`x-cloak`](#x-cloak) | Cet attribut est supprimé lorsque Alpine s'initialise. Utile pour masquer les DOM pré-initialisés. |
Et 6 propriétés magiques:
| Propriétés magiques | Description |
| --- | --- |
| [`$el`](#el) | Récupère le nœud DOM du composant racine. |
| [`$refs`](#refs) | Récupère les éléments du DOM marqués par `x-ref` à l'intérieur du composant. |
| [`$event`](#event) | Récupère l'objet natif "Event" du navigateur dans un écouteur d'évènements. |
| [`$dispatch`](#dispatch) | Crée un `CustomEvent` et le distribue à l'aide de `.dispatchEvent()` en interne. |
| [`$nextTick`](#nexttick) | Exécute une expression donnée APRES qu'Alpine ait fait ses mises à jour réactives du DOM. |
| [`$watch`](#watch) | Effectue un rappel (callback) préalablement défini lorsque la propriété d'un composant "surveillé" (watch) est modifiée. |
## Sponsors
**Votre logo ici ? [DM sur Twitter](https://twitter.com/calebporzio)**
## Projets Communautaires
* [AlpineJS Weekly Newsletter](https://alpinejs.codewithhugo.com/newsletter/)
* [Spruce (State Management)](https://github.com/ryangjchandler/spruce)
* [Turbolinks Adapter](https://github.com/SimoTod/alpine-turbolinks-adapter)
* [Alpine Magic Helpers](https://github.com/KevinBatdorf/alpine-magic-helpers)
* [Awesome Alpine](https://github.com/ryangjchandler/awesome-alpine)
### Directives
---
### `x-data`
**Exemple :** `
...
`
**Structure :** `
...
`
`x-data` déclare la portée d'un nouveau composant. Indique au framework d'initialiser un nouveau composant avec le prochain objet de données.
Il faut voir cela comme la propriété de `données` d'un composant Vue.
**Extraction de la Logique des Composants**
Vous pouvez extraire les données (et le comportement) en fonctions réutilisables :
```html
// Menu déroulant
```
> **Pour les utilisateurs de modules bundler**, notez que Alpine.js accède à des fonctions qui sont dans la portée globale (`window`). Vous devrez explicitement assigner vos fonctions à `window` pour les utiliser avec `x-data`. Par exemple `window.dropdown = function () {}` ( c'est parce qu'avec Webpack, Rollup, Parcel etc. les fonctions que vous écrivez sont par défaut dans la portée du module et non dans celle de la page - `window`).
Vous pouvez également mélanger plusieurs objets de données en utilisant la décomposition d'objet :
```html
```
---
### `x-init`
**Exemple :** ``
**Structure :** ``
`x-init` exécute une expression lorsqu'un composant est initialisé.
Si vous souhaitez exécuter du code APRES qu'Alpine ait effectué ses mises à jour initiales dans le DOM (un peu comme le hook `mounted()` de VueJS), vous pouvez retourner un callback depuis `x-init`, et il sera ensuite exécuté :
`x-init="() => { // on a ici accès à l'état du DOM post-initialisation // }"`
---
### `x-show`
**Exemple :** ``
**Structure :** ``
`x-show` alterne le style `display: none;` sur l'élément selon que l'expression retourne `true` ou `false`.
**x-show.transition**
`x-show.transition` est une API de commodité pour rendre vos `x-show` plus agréables en utilisant des transitions CSS.
```html
Le contenu ici fera l'objet de transitions "in" et "out".
```
| Directive | Description |
| --- | --- |
| `x-show.transition` | Fondu et échelle simultanés. (opacity, scale: 0.95, timing-function: cubic-bezier(0.4, 0.0, 0.2, 1), duration-in: 150ms, duration-out: 75ms)
| `x-show.transition.in` | Transition `in` seule. |
| `x-show.transition.out` | Transition `out` seule. |
| `x-show.transition.opacity` |Fondu seul. |
| `x-show.transition.scale` | Echelle seule. |
| `x-show.transition.scale.75` | Personnalise la modification CSS de l'échelle `transform: scale(.75)`. |
| `x-show.transition.duration.200ms` | Fixe la transition "in" à 200 ms. La transition "out" sera fixée à la moitié de cette valeur (100 ms). |
| `x-show.transition.origin.top.right` | Personnalise l'origine de la transformation CSS `transform-origin: top right`. |
| `x-show.transition.in.duration.200ms.out.duration.50ms` | Durées différentes pour "in" et "out". |
> Note : Tous ces modificateurs de transition peuvent être utilisés conjointement les uns avec les autres. Il est même possible de faire ceci (bien que ridicule lol) : `x-show.transition.in.duration.100ms.origin.top.right.opacity.scale.85.out.duration.200ms.origin.bottom.left.opacity.scale.95`
> Note : `x-show` attendra que les objets enfants aient terminé leur transition. Si vous voulez contourner ce comportement, ajoutez le modificateur `.immediate` :
```html
```
---
### `x-bind`
> Note : vous êtes libre d'utiliser la syntaxe ":" plus courte: `:type="..."`.
**Exemple :** ``
**Structure :** ``
`x-bind` fixe la valeur d'un attribut au résultat d'une expression JavaScript. Cette expression a accès à toutes les clés de l'objet de données du composant, et se met à jour à chaque fois que ses données changent.
> Note : les liaisons d'attributs (attribute bindings) ne se mettent à jour QUE lorsque leurs dépendances changent. Le framework est suffisamment intelligent pour observer les changements de données et détecter les liens qui les concernent.
**`x-bind` pour les attributs de classe**
`x-bind` se comporte un peu différemment lorsqu'il est lié à l'attribut `class`.
En ce qui concerne les classes, vous passez un objet dont les clés sont des noms de classe, et les valeurs sont des expressions booléennes pour déterminer si ces noms de classe sont appliqués ou non.
Par exemple :
``
Dans cet exemple, la classe "hidden" ne sera appliquée que si la valeur de l'attribut de données `foo` est `true`.
**`x-bind` pour les attributs booléens**
`x-bind` supporte les attributs booléens de la même manière que les attributs de valeur, en utilisant une variable comme condition ou toute expression JavaScript qui se résout en `true` ou `false`.
Par exemple :
```html
```
Cela ajoute ou supprime l'attribut `disabled` lorsque la valeur de `myVar` est respectivement vraie ou fausse.
Les attributs booléens sont pris en charge conformément à la [spécification HTML](https://html.spec.whatwg.org/multipage/indices.html#attributes-3:boolean-attribute), par exemple `disabled`, `readonly`, `required`, `checked`, `hidden`, `selected`, `open`, etc.
> Note : Si vous avez besoin d'un état `false` pour afficher un attribut, comme par exemple `aria-*`, chainez `.toString()` à la valeur tout en liant l'attribut (bind). Par exemple : `:aria-expanded="isOpen.toString()"` va persister, que `isOpen` soit `true` ou `false`.
**Modificateur `.camel`**
**Exemple :** `
**Votre logo ici ? [DM sur Twitter](https://twitter.com/calebporzio)**
## Projets Communautaires
* [AlpineJS Weekly Newsletter](https://alpinejs.codewithhugo.com/newsletter/)
* [Spruce (State Management)](https://github.com/ryangjchandler/spruce)
* [Turbolinks Adapter](https://github.com/SimoTod/alpine-turbolinks-adapter)
* [Alpine Magic Helpers](https://github.com/KevinBatdorf/alpine-magic-helpers)
* [Awesome Alpine](https://github.com/ryangjchandler/awesome-alpine)
### Directives
---
### `x-data`
**Exemple :** `