From 8829a7c9eb82f180bac76ed5836aaef95be209a1 Mon Sep 17 00:00:00 2001 From: julieng Date: Wed, 13 Oct 2021 07:12:55 +0200 Subject: move *.html to *.md --- files/fr/web/html/element/dialog/index.html | 157 ---------------------------- files/fr/web/html/element/dialog/index.md | 157 ++++++++++++++++++++++++++++ 2 files changed, 157 insertions(+), 157 deletions(-) delete mode 100644 files/fr/web/html/element/dialog/index.html create mode 100644 files/fr/web/html/element/dialog/index.md (limited to 'files/fr/web/html/element/dialog') diff --git a/files/fr/web/html/element/dialog/index.html b/files/fr/web/html/element/dialog/index.html deleted file mode 100644 index 8c5051b4b2..0000000000 --- a/files/fr/web/html/element/dialog/index.html +++ /dev/null @@ -1,157 +0,0 @@ ---- -title: ' : l''élément de boîte de dialogue' -slug: Web/HTML/Element/dialog -tags: - - Dialog - - Element - - HTML - - HTML interactive elements - - Reference - - Web - - polyfill -translation_of: Web/HTML/Element/dialog -browser-compat: html.elements.dialog ---- -
{{HTMLRef}}
- -

L'élément HTML <dialog> représente une boite de dialogue ou un composant interactif (par exemple un inspecteur ou une fenêtre).

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Catégories de contenuContenu de flux, racine de sectionnement.
Contenu autoriséContenu de flux.
Omission de balisesAucune, la balise d'ouverture et la balise de fermeture sont obligatoires.
Parents autorisésTout élément qui accepte du contenu de flux.
Rôle ARIA implicitedialog
Rôles ARIA autorisésalertdialog
Interface DOMHTMLDialogElement
- -

Attributs

- -

Cet élément inclut les attributs universels.

- -
-

Attention : L'attribut tabindex ne doit pas être utilisé sur l'élément <dialog>.

-
- -
-
open
-
Cet attribut indique que la boîte de dialogue est active et peut être utilisée de façon interactive. Si l'attribut n'est pas renseigné, la boîte de dialogue ne doit pas être présentée à l'utilisateur.
-
- -

Notes d'utilisation

- - - -

Exemples

- -

Exemple simple

- -
<dialog open>
-  <p>Salutations, à tous et à toutes !</p>
-</dialog>
- -

Exemple avancé

- -

HTML

- -
<!-- Boîte de dialogue contextuelle simple contenant un formulaire -->
-<dialog id="favDialog">
-  <form method="dialog">
-    <p><label>Animal préféré :
-      <select>
-        <option></option>
-        <option>Crevette en saumure</option>
-        <option>Panda rouge</option>
-        <option>Singe-araignée</option>
-      </select>
-    </label></p>
-    <menu>
-      <button value="cancel">Annuler</button>
-      <button id="confirmBtn" value="default">Confirmer</button>
-    </menu>
-  </form>
-</dialog>
-
-<menu>
-  <button id="updateDetails">Mettre à jour les détails</button>
-</menu>
-
-<output aria-live="polite"></output>
- -

JavaScript

- -
let updateButton = document.getElementById('updateDetails');
-let favDialog = document.getElementById('favDialog');
-let outputBox = document.querySelector('output');
-let selectEl = document.querySelector('select');
-let confirmBtn = document.getElementById('confirmBtn');
-
-// Le bouton "Mettre à jour les détails" ouvre le <dialogue> ; modulaire
-updateButton.addEventListener('click', function onOpen() {
-  if (typeof favDialog.showModal === "function") {
-    favDialog.showModal();
-  } else {
-    console.error("L'API <dialog> n'est pas prise en charge par ce navigateur.");
-  }
-});
-// L'entrée "Animal favori" définit la valeur du bouton d'envoi.
-selectEl.addEventListener('change', function onSelect(e) {
-  confirmBtn.value = selectEl.value;
-});
-// Le bouton "Confirmer" du formulaire déclenche la fermeture
-// de la boîte de dialogue en raison de [method="dialog"]
-favDialog.addEventListener('close', function onClose() {
-  outputBox.value = favDialog.returnValue + " bouton cliqué - " + (new Date()).toString();
-});
- -

Résultat

- -

{{EmbedLiveSample("advanced_example", "", 300)}}

- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Prothèse d'émulation (polyfill)

- -

Incluez ce polyfill pour fournir un support aux navigateurs sans élément <dialog> : dialog-polyfill.

- -

Voir aussi

- - diff --git a/files/fr/web/html/element/dialog/index.md b/files/fr/web/html/element/dialog/index.md new file mode 100644 index 0000000000..8c5051b4b2 --- /dev/null +++ b/files/fr/web/html/element/dialog/index.md @@ -0,0 +1,157 @@ +--- +title: ' : l''élément de boîte de dialogue' +slug: Web/HTML/Element/dialog +tags: + - Dialog + - Element + - HTML + - HTML interactive elements + - Reference + - Web + - polyfill +translation_of: Web/HTML/Element/dialog +browser-compat: html.elements.dialog +--- +
{{HTMLRef}}
+ +

L'élément HTML <dialog> représente une boite de dialogue ou un composant interactif (par exemple un inspecteur ou une fenêtre).

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Catégories de contenuContenu de flux, racine de sectionnement.
Contenu autoriséContenu de flux.
Omission de balisesAucune, la balise d'ouverture et la balise de fermeture sont obligatoires.
Parents autorisésTout élément qui accepte du contenu de flux.
Rôle ARIA implicitedialog
Rôles ARIA autorisésalertdialog
Interface DOMHTMLDialogElement
+ +

Attributs

+ +

Cet élément inclut les attributs universels.

+ +
+

Attention : L'attribut tabindex ne doit pas être utilisé sur l'élément <dialog>.

+
+ +
+
open
+
Cet attribut indique que la boîte de dialogue est active et peut être utilisée de façon interactive. Si l'attribut n'est pas renseigné, la boîte de dialogue ne doit pas être présentée à l'utilisateur.
+
+ +

Notes d'utilisation

+ +
    +
  • Les éléments <form> peuvent fermer un dialogue s'ils possèdent l'attribut method="dialog". Lorsqu'un tel formulaire est soumis, le dialogue se ferme avec sa propriété returnValue définie sur la value (valeur) du bouton qui a été utilisé pour soumettre le formulaire.
    • +
  • Le pseudo-élément CSS ::backdrop peut être utilisé pour créer un style derrière un élément <dialog> lorsque le dialogue est affiché avec HTMLDialogElement.showModal(). Par exemple, pour atténuer le contenu inaccessible derrière la boîte de dialogue modale.
    • +
+ +

Exemples

+ +

Exemple simple

+ +
<dialog open>
+  <p>Salutations, à tous et à toutes !</p>
+</dialog>
+ +

Exemple avancé

+ +

HTML

+ +
<!-- Boîte de dialogue contextuelle simple contenant un formulaire -->
+<dialog id="favDialog">
+  <form method="dialog">
+    <p><label>Animal préféré :
+      <select>
+        <option></option>
+        <option>Crevette en saumure</option>
+        <option>Panda rouge</option>
+        <option>Singe-araignée</option>
+      </select>
+    </label></p>
+    <menu>
+      <button value="cancel">Annuler</button>
+      <button id="confirmBtn" value="default">Confirmer</button>
+    </menu>
+  </form>
+</dialog>
+
+<menu>
+  <button id="updateDetails">Mettre à jour les détails</button>
+</menu>
+
+<output aria-live="polite"></output>
+ +

JavaScript

+ +
let updateButton = document.getElementById('updateDetails');
+let favDialog = document.getElementById('favDialog');
+let outputBox = document.querySelector('output');
+let selectEl = document.querySelector('select');
+let confirmBtn = document.getElementById('confirmBtn');
+
+// Le bouton "Mettre à jour les détails" ouvre le <dialogue> ; modulaire
+updateButton.addEventListener('click', function onOpen() {
+  if (typeof favDialog.showModal === "function") {
+    favDialog.showModal();
+  } else {
+    console.error("L'API <dialog> n'est pas prise en charge par ce navigateur.");
+  }
+});
+// L'entrée "Animal favori" définit la valeur du bouton d'envoi.
+selectEl.addEventListener('change', function onSelect(e) {
+  confirmBtn.value = selectEl.value;
+});
+// Le bouton "Confirmer" du formulaire déclenche la fermeture
+// de la boîte de dialogue en raison de [method="dialog"]
+favDialog.addEventListener('close', function onClose() {
+  outputBox.value = favDialog.returnValue + " bouton cliqué - " + (new Date()).toString();
+});
+ +

Résultat

+ +

{{EmbedLiveSample("advanced_example", "", 300)}}

+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Prothèse d'émulation (polyfill)

+ +

Incluez ce polyfill pour fournir un support aux navigateurs sans élément <dialog> : dialog-polyfill.

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf