diff --git a/src/content/docs/fr/recipes/making-toolbar-apps.mdx b/src/content/docs/fr/recipes/making-toolbar-apps.mdx
index 235d6d6c51e70..86659365075bc 100644
--- a/src/content/docs/fr/recipes/making-toolbar-apps.mdx
+++ b/src/content/docs/fr/recipes/making-toolbar-apps.mdx
@@ -60,7 +60,7 @@ Les applications de la barre d'outils de développement peuvent être ajoutées
- tsconfig.json
-2. Dans `my-integration.ts`, ajoutez le code suivant pour fournir à la fois le nom de votre intégration et [la fonction `addDevToolbarApp()`](/fr/reference/dev-toolbar-app-reference/#configuration-de-lintégration-des-applications-dans-la-barre-doutils) requise pour ajouter votre application de barre d'outils avec le hook `astro:config:setup` :
+2. Dans `my-integration.ts`, ajoutez le code suivant pour fournir à la fois le nom de votre intégration et [la fonction `addDevToolbarApp()`](/fr/reference/dev-toolbar-app-reference/#configuration-dune-intégration-dapplications-pour-la-barre-doutils) requise pour ajouter votre application de barre d'outils avec le hook `astro:config:setup` :
```ts title="my-toolbar-app/my-integration.ts" "'astro:config:setup'" "hooks" "addDevToolbarApp"
import { fileURLToPath } from 'node:url';
diff --git a/src/content/docs/fr/reference/dev-toolbar-app-reference.mdx b/src/content/docs/fr/reference/dev-toolbar-app-reference.mdx
index d334c95b892aa..fa7dd75c5959b 100644
--- a/src/content/docs/fr/reference/dev-toolbar-app-reference.mdx
+++ b/src/content/docs/fr/reference/dev-toolbar-app-reference.mdx
@@ -1,32 +1,31 @@
---
-title: API de la barre d'outils Dev
+title: API de la barre d'outils de développement
i18nReady: true
---
import Since from '~/components/Since.astro';
-
import RecipeLinks from "~/components/RecipeLinks.astro";
-L'API de la barre d'outils Dev d'Astro vous permet de créer des [Intégrations Astro](/fr/reference/integrations-reference/) qui ajoutent des applications à la barre d'outils Astro Dev. Cela vous permet d'ajouter de nouvelles fonctionnalités et des intégrations avec des services tiers.
+L'API de la barre d'outils de développement d'Astro vous permet de créer des [intégrations Astro](/fr/reference/integrations-reference/) qui ajoutent des applications à la barre d'outils de développement d'Astro. Cela vous permet d'ajouter de nouvelles fonctionnalités et des intégrations avec des services tiers.
-## Configuration de l'intégration des applications dans la barre d'outils
+## Configuration d'une intégration d'applications pour la barre d'outils
Les intégrations peuvent ajouter des applications à la barre d'outils de développement dans [le hook `astro:config:setup`](/fr/reference/integrations-reference/#astroconfigsetup).
-```ts title="my-integration.js" {8-13}
+```ts title="mon-integration.js" {8-13}
/**
* @type {() => import('astro').AstroIntegration}
*/
export default () => ({
- name: "my-integration",
+ name: "mon-integration",
hooks: {
"astro:config:setup": ({ addDevToolbarApp }) => {
addDevToolbarApp({
- id: "my-app",
- name: "Mon app",
+ id: "mon-appli",
+ name: "Mon appli",
icon: "",
- entrypoint: "./my-app.js",
+ entrypoint: "./mon-appli.js",
});
},
},
@@ -35,51 +34,78 @@ export default () => ({
### `addDevToolbarApp()`
-Une fonction disponible pour [le hook `astro:config:setup`](/fr/reference/integrations-reference/#astroconfigsetup) qui ajoute les applications de la barre d'outils de développement. Elle prend un objet avec les propriétés suivantes pour définir l'application de la barre d'outils : [`id`](#id), [`name`](#name), [`icon`](#icon), et [`entrypoint`](#entrypoint).
+
+
+Une fonction disponible pour [le hook `astro:config:setup`](/fr/reference/integrations-reference/#astroconfigsetup) qui ajoute des applications à la barre d'outils de développement. Elle accepte un objet avec les propriétés requises suivantes pour définir l'application de barre d'outils : [`id`](#id), [`name`](#name) et [`entrypoint`](#entrypoint). En option, vous pouvez également définir une [`icône`](#icon) pour votre application.
### `id`
+
+
+**Type :** `string`
+
+
Un identifiant unique pour l'application. Il sera utilisé pour identifier l'application de manière unique dans les hooks et les événements.
-```ts title="my-integration.js" {2}
+```ts title="mon-integration.js" {2}
{
- id: 'my-app',
+ id: 'mon-appli',
// ...
}
```
### `name`
+
+
+**Type :** `string`
+
+
Le nom de l'application. Il sera affiché aux utilisateurs chaque fois que l'application devra être référencée à l'aide d'un nom lisible par l'humain.
-```ts title="my-integration.js" {3}
+```ts title="mon-integration.js" {3}
{
// ...
- name: 'My App',
+ name: 'Mon appli',
// ...
}
```
### `icon`
+
+
L'icône utilisée pour afficher l'application dans la barre d'outils. Il peut s'agir d'une icône de [la liste des icônes](#icônes), ou d'une chaîne de caractères contenant le balisage SVG de l'icône.
-```ts title="my-integration.js" {3}
+```ts title="mon-integration.js" {3}
{
// ...
- icon: '', // ou, par exemple 'astro:logo'
+ icon: '', // ou, par exemple, 'astro:logo'
// ...
}
```
### `entrypoint`
+
+
+**Type :** `string | URL`
+
+
Chemin d'accès au fichier qui exporte l'application de la barre d'outils de développement.
-```ts title="my-integration.js" {3}
+```ts title="mon-integration.js" {3}
{
// ...
- entrypoint: './my-app.js',
+ entrypoint: './mon-appli.js',
}
```
@@ -109,9 +135,9 @@ export default () => ({
## Structure d'une application pour la barre d'outils de développement
-Une application de barre d'outils de développement est un fichier `.js` ou `.ts` qui exporte par défaut un objet en utilisant la fonction [`defineToolbarApp()`](#definetoolbarapp) disponible dans le module `astro/toolbar`.
+Une application de barre d'outils de développement est un fichier `.js` ou `.ts` qui exporte par défaut un objet en utilisant la [fonction `defineToolbarApp()`](#definetoolbarapp) disponible dans le module `astro/toolbar`.
-```ts title="src/my-app.js"
+```ts title="src/mon-appli.js"
import { defineToolbarApp } from "astro/toolbar";
export default defineToolbarApp({
@@ -127,7 +153,11 @@ export default defineToolbarApp({
```
### `defineToolbarApp()`
-
Une fonction qui définit la logique de votre application de barre d'outils lorsqu'elle est chargée et désactivée.
@@ -135,7 +165,10 @@ Cette fonction prend un objet avec une fonction [`init()`](#init) qui sera appel
### `init()`
-**Signature :** `init(canvas: ShadowRoot, app: ToolbarAppEventTarget, server: ToolbarServerHelpers) => void`
+
Bien que cela ne soit pas obligatoire, la plupart des applications utiliseront cette fonction pour définir le comportement de base de l'application. Cette fonction ne sera appelée qu'une seule fois lors du chargement de l'application, soit lorsque le navigateur est inactif, soit lorsque l'utilisateur clique sur l'application dans l'interface utilisateur, selon ce qui se produit en premier.
@@ -143,25 +176,34 @@ La fonction reçoit trois arguments pour définir la logique de votre applicatio
#### `canvas`
-Un [ShadowRoot](https://developer.mozilla.org/fr/docs/Web/API/ShadowRoot) standard que l'application peut utiliser pour afficher son interface utilisateur. Les éléments peuvent être créés et ajoutés au ShadowRoot à l'aide des API DOM standard.
+
+
+**Type :** `ShadowRoot`
+
+
+Une interface [ShadowRoot](https://developer.mozilla.org/fr/docs/Web/API/ShadowRoot) standard que l'application peut utiliser pour afficher son interface utilisateur. Les éléments peuvent être créés et ajoutés au ShadowRoot à l'aide des API DOM standard.
-Chaque application reçoit son propre ShadowRoot dédié pour afficher son interface utilisateur. De plus, l'élément parent est positionné en utilisant `position : absolute;` afin que l'interface utilisateur de l'application n'affecte pas la mise en page d'une page Astro.
+Chaque application reçoit son propre ShadowRoot dédié pour le rendu de son interface utilisateur. De plus, l'élément parent est positionné en utilisant `position: absolute;` afin que l'interface utilisateur de l'application n'affecte pas la mise en page d'une page Astro.
-```ts title="src/my-app.js" {3}
+```ts title="src/mon-appli.js" {3}
export default defineToolbarApp({
init(canvas) {
- canvas.appendChild(document.createTextNode('Bonjour le monde !'))
+ canvas.appendChild(document.createTextNode('Hello World!'))
}
});
```
#### `app`
-
+
-Une interface [`EventTarget`](https://developer.mozilla.org/fr/docs/Web/API/EventTarget) standard avec quelques [aides pour les événements côté client](#sur-le-client) supplémentaires qui peuvent être utilisés pour envoyer et recevoir des événements depuis la barre d'outils Dev.
+**Type :** `ToolbarAppEventTarget`
+
+
+
+Une interface [`EventTarget`](https://developer.mozilla.org/fr/docs/Web/API/EventTarget) standard avec quelques [aides supplémentaires pour les événements côté client](#sur-le-client) qui peuvent être utilisées pour envoyer et recevoir des événements depuis la barre d'outils de développement.
-```ts title="src/my-app.js" {3-6}
+```ts title="src/mon-appli.js" {3-8}
export default defineToolbarApp({
init(canvas, app) {
app.onToggled(({ state }) => {
@@ -176,16 +218,20 @@ export default defineToolbarApp({
#### `server`
-
+
+
+**Type :** `ToolbarServerHelpers`
+
+
Un objet qui peut être utilisé pour [communiquer avec le serveur](#communication-client-serveur).
-```ts title="src/my-app.js" {3-7}
+```ts title="src/mon-appli.js" {3-7}
export default defineToolbarApp({
init(canvas, app, server) {
- server.send('my-message', { message: 'Hello!' });
+ server.send('mon-message', { message: 'Bonjour !' });
- server.on('server-message', (data) => {
+ server.on('message-du-serveur', (data) => {
console.log(data.message);
});
},
@@ -194,14 +240,17 @@ export default defineToolbarApp({
### `beforeTogglingOff()`
-**Signature :** `beforeTogglingOff(canvas: ShadowRoot): boolean | void`
-
+
Cette fonction facultative est appelée lorsque l'utilisateur clique sur l'icône de l'application dans l'interface utilisateur pour la désactiver. Cette fonction peut être utilisée, par exemple, pour effectuer des opérations de nettoyage ou pour demander à l'utilisateur une confirmation avant de désactiver l'application.
Si une valeur fausse est renvoyée, la désactivation sera annulée et l'application restera activée.
-```ts title="src/my-app.js" {3-6}
+```ts title="src/mon-appli.js" {3-6}
export default defineToolbarApp({
// ...
beforeTogglingOff() {
@@ -213,20 +262,28 @@ export default defineToolbarApp({
#### canvas
+
+
+**Type :** `ShadowRoot`
+
+
Le ShadowRoot de l'application, peut être utilisé pour afficher toute interface utilisateur nécessaire avant la fermeture. Identique à l'argument [`canvas` de la fonction `init`](#canvas).
## Événements côté client
-En plus des méthodes standards d'une `EventTarget` ([`addEventListener`](https://developer.mozilla.org/fr/docs/Web/API/EventTarget), [`dispatchEvent`](https://developer.mozilla.org/fr/docs/Web/API/EventTarget/dispatchEvent), [`removeEventListener`](https://developer.mozilla.org/fr/docs/Web/API/EventTarget/removeEventListener), etc.), l'objet [`app`](#app) possède aussi les méthodes suivantes :
+En plus des méthodes standards d'une interface `EventTarget` ([`addEventListener`](https://developer.mozilla.org/fr/docs/Web/API/EventTarget), [`dispatchEvent`](https://developer.mozilla.org/fr/docs/Web/API/EventTarget/dispatchEvent), [`removeEventListener`](https://developer.mozilla.org/fr/docs/Web/API/EventTarget/removeEventListener), etc.), l'objet [`app`](#app) possède aussi les méthodes suivantes :
### `onToggled()`
-**Signature :** `onToggled(callback: (options: {state: boolean})) => void`
-
+
-Enregistre un rappel à appeler lorsque l'utilisateur clique sur l'icône de l'application dans l'interface utilisateur pour activer ou désactiver l'application.
+Enregistre une fonction de rappel à exécuter lorsque l'utilisateur clique sur l'icône de l'application dans l'interface utilisateur pour activer ou désactiver l'application.
-```ts title="src/my-app.js"
+```ts title="src/mon-appli.js"
app.onToggled((options) => {
console.log(`L'application est maintenant ${options.state ? 'activée' : 'désactivée'} !`);
});
@@ -234,12 +291,15 @@ app.onToggled((options) => {
### `onToolbarPlacementUpdated()`
-**Signature :** `onToolbarPlacementUpdated(callback: (options: {placement: 'bottom-left' | 'bottom-center' | 'bottom-right'})) => void`
-
+
Cet événement est déclenché lorsque l'utilisateur modifie l'emplacement de la barre d'outils de développement. Il peut, par exemple, être utilisé pour repositionner l'interface utilisateur de l'application lorsque la barre d'outils est déplacée.
-```ts title="src/my-app.js"
+```ts title="src/mon-appli.js"
app.onToolbarPlacementUpdated((options) => {
console.log(`La barre d'outils est maintenant placée à ${options.placement}!`);
});
@@ -247,51 +307,68 @@ app.onToolbarPlacementUpdated((options) => {
### `toggleState()`
-**Signature :** `toggleState(options: {state: boolean}) => void`
-
+
Modifie l'état de l'application. Cela peut être utilisé pour activer ou désactiver l'application de manière programmatique, par exemple, lorsque l'utilisateur clique sur un bouton dans l'interface utilisateur de l'application.
-```ts title="src/my-app.js"
+```ts title="src/mon-appli.js"
app.toggleState({ state: false });
```
### `toggleNotification()`
-**Signature :** `toggleNotification(options: {state?: boolean, level?: 'error' | 'warning' | 'info'}) => void`
-
+
Permet d'afficher une notification sur l'icône de l'application. Elle peut être utilisée pour informer l'utilisateur que l'application requiert son attention ou pour supprimer la notification en cours.
-```ts title="src/my-app.js"
+```ts title="src/mon-appli.js"
app.toggleNotification({
state: true,
level: 'warning',
});
```
-#### `state: boolean`
+#### `state`
+
+
+
+**Type :** `boolean`
+
-Indique si l'application a une notification pour l'utilisateur. Lorsque `true`, l'icône de l'application sera mise en évidence. Inversement, lorsque `false`, la mise en évidence sera supprimée. Si cette propriété n'est pas spécifiée, `true` sera pris en compte.
+Indique si l'application dispose ou non d'une notification pour l'utilisateur. Lorsque la valeur est `true`, l'icône de l'application sera mise en évidence. À l’inverse, lorsque la valeur est `false`, la mise en évidence sera supprimée. Si cette propriété n'est pas spécifiée, la valeur `true` sera supposée.
-#### `level: 'error' | 'warning' | 'info'`
+#### `level`
-Indique le niveau de la notification. Il sera utilisé pour déterminer la couleur et la forme (cercle rose foncé, triangle doré ou carré bleu) de la surbrillance sur l'icône de l'application. Si cette propriété n'est pas spécifiée, `'error'` sera pris en compte.
+
+
+Indique le niveau de la notification. Il sera utilisé pour déterminer la couleur et la forme (cercle rose foncé, triangle doré ou carré bleu) de la mise en évidence sur l'icône de l'application. Si cette propriété n'est pas spécifiée, la valeur `'error'` sera supposée.
## Communication client-serveur
-En utilisant les [méthodes de communication client-serveur de Vite](https://vite.dev/guide/api-plugin.html#client-server-communication), les applications de la barre d'outils Dev et le serveur peuvent communiquer entre eux. Afin de faciliter l'envoi et la réception de messages personnalisés, des méthodes d'aide sont fournies pour être utilisées à la fois dans votre application de barre d'outils (sur le client) et dans votre intégration (sur le serveur).
+En utilisant les [méthodes de Vite pour la communication client-serveur](https://vite.dev/guide/api-plugin.html#client-server-communication), les applications de la barre d'outils de développement et le serveur peuvent communiquer entre eux. Afin de faciliter l'envoi et la réception de messages personnalisés, des méthodes d'aide sont fournies pour être utilisées à la fois dans votre application de barre d'outils (sur le client) et dans votre intégration (sur le serveur).
### Sur le client
-Dans votre application, utilisez l'objet [`server` sur le hook `init()`](#server) pour envoyer et recevoir des messages vers et depuis le serveur.
+Dans votre application, utilisez l'[objet `server` dans le hook `init()`](#server) pour envoyer et recevoir des messages vers et depuis le serveur.
-```ts title="src/my-app.js" {3-7} "server"
+```ts title="src/mon-appli.js" {3-7} "server" "serveur"
export default defineToolbarApp({
init(canvas, app, server) {
- server.send('my-message', { message: 'Bonjour !' });
+ server.send('mon-message', { message: 'Bonjour !' });
- server.on('server-message', (data) => {
+ server.on('message-du-serveur', (data) => {
console.log(data.message);
});
},
@@ -300,14 +377,17 @@ export default defineToolbarApp({
#### `send()`
-**Signature :** `send(event: stringify, data: T) => void`
+
Envoie des données au serveur à partir de la logique définie dans l'application de la barre d'outils.
-```ts title="src/my-app.js"
+```ts title="src/mon-appli.js"
init(canvas, app, server) {
- server.send('my-app:my-message', { message: 'Bonjour !' });
+ server.send('mon-appli:mon-message', { message: 'Bonjour !' });
}
```
@@ -315,14 +395,17 @@ Lors de l'envoi de messages du client au serveur, il est conseillé de préfixer
#### `on()`
-**Signature :** `on(event: string, callback: (data: T) => void) => void`
-
+
-Enregistre un rappel à appeler lorsque le serveur envoie un message avec l'événement spécifié.
+**Type :** `(event: string, callback: (data: T) => void) => void`
+
+
+
+Enregistre une fonction de rappel à exécuter lorsque le serveur envoie un message avec l'événement spécifié.
-```ts title="src/my-app.js"
+```ts title="src/mon-appli.js"
init(canvas, app, server) {
- server.on('server-message', (data) => {
+ server.on('message-du-serveur', (data) => {
console.log(data.message);
});
}
@@ -330,11 +413,11 @@ init(canvas, app, server) {
### Sur le serveur
-Dans une intégration, telle que [l'intégration qui ajoute votre application de barre d'outils](#configuration-de-lintégration-des-applications-dans-la-barre-doutils), utilisez le [hook `astro:server:setup`](/fr/reference/integrations-reference/#astroserversetup) pour accéder à l'objet `toolbar` afin d'envoyer et de recevoir des messages vers et à partir de vos applications.
+Dans une intégration, telle que [l'intégration qui ajoute votre application de barre d'outils](#configuration-dune-intégration-dapplications-pour-la-barre-doutils), utilisez le [hook `astro:server:setup`](/fr/reference/integrations-reference/#astroserversetup) pour accéder à l'objet `toolbar` afin d'envoyer et de recevoir des messages vers et à partir de vos applications.
-```ts title="my-integration.js" {5}
+```ts title="mon-integration.js" {5}
export default () => ({
- name: "my-integration",
+ name: "mon-integration",
hooks: {
"astro:config:setup": ({ addDevToolbarApp }) => {},
"astro:server:setup": ({ toolbar }) => {},
@@ -344,61 +427,73 @@ export default () => ({
#### `send()`
-**Signature :** `send(event: string, data: T) => void`
-
+
-Enregistre un callback qui sera appelé lorsque le client enverra un message avec l'événement spécifié.
+**Type :** `(event: string, callback: (data: T) => void) => void`
+
+
-```ts title="my-integration.js"
+Enregistre une fonction de rappel à exécuter lorsque le client enverra un message avec l'événement spécifié.
+
+```ts title="mon-integration.js"
'astro:server:setup': ({ toolbar }) => {
- toolbar.on('my-app:my-message', (data) => {
+ toolbar.on('mon-appli:mon-message', (data) => {
console.log(data.message);
});
},
```
-#### `onInitialized()`
+#### `onAppInitialized()`
+
+
-Enregistre un callback qui sera appelé lors de l'initialisation de l'application.
+Enregistre une fonction de rappel à exécuter lors de l'initialisation de l'application.
-```ts title="my-integration.js"
+```ts title="mon-integration.js"
'astro:server:setup': ({ toolbar }) => {
- toolbar.onInitialized('my-app', () => {
+ toolbar.onAppInitialized('mon-appli', () => {
console.log("L'application est maintenant initialisée !");
});
},
```
:::note
-L'événement intégré `connection` de Vite se déclenche **avant** que les applications de la barre d'outils Dev ne soient initialisées et ne peut donc pas être utilisé directement par les applications. Utilisez la méthode `onInitialized` pour vous assurer que l'application est complètement initialisée avant de lui envoyer des messages.
+L'événement intégré `connection` de Vite se déclenche **avant** que les applications de la barre d'outils de développement ne soient initialisées et ne peut donc pas être utilisé directement par les applications. Utilisez la méthode `onAppInitialized` pour vous assurer que l'application est complètement initialisée avant de lui envoyer des messages.
:::
#### `onAppToggled()`
-**Signature :** `onAppToggled(appId: string, callback: (options: {state: boolean}) => void) => void`
-
+
-Enregistre une fonction de rappel à appeler lorsque l'utilisateur clique sur l'icône de l'application dans l'interface utilisateur pour activer ou désactiver l'application.
+Enregistre une fonction de rappel à exécuter lorsque l'utilisateur clique sur l'icône de l'application dans l'interface utilisateur pour activer ou désactiver l'application.
-```ts title="my-integration.js"
+```ts title="mon-integration.js"
'astro:server:setup': ({ toolbar }) => {
- toolbar.onAppToggled('my-app', ({ state }) => {
+ toolbar.onAppToggled('mon-appli', ({ state }) => {
console.log(`L'application est maintenant ${state ? 'activée' : 'désactivée'} !`);
});
},
@@ -406,7 +501,7 @@ Enregistre une fonction de rappel à appeler lorsque l'utilisateur clique sur l'
## Bibliothèque de composants
-La barre d'outils Dev comprend un ensemble de composants web qui peuvent être utilisés pour créer des applications avec une apparence et une convivialité cohérentes.
+La barre d'outils de développement comprend un ensemble de composants web qui peuvent être utilisés pour créer des applications avec une apparence et une convivialité cohérentes.
### `astro-dev-toolbar-window`
@@ -420,7 +515,7 @@ Le slot du composant sera utilisé comme contenu de la fenêtre.
```
-Lors de la construction d'une fenêtre à l'aide de JavaScript, le contenu des slots doit être placé à l'intérieur du DOM allégé du composant.
+Lors de la création d'une fenêtre à l'aide de JavaScript, le contenu des slots doit être placé à l'intérieur du DOM allégé du composant.
```js
const myWindow = document.createElement('astro-dev-toolbar-window');
@@ -435,11 +530,11 @@ myWindow.appendChild(myContent);
Affiche un bouton.
-L'emplacement du composant sera utilisé comme contenu du bouton.
+Le slot du composant sera utilisé comme contenu du bouton.
```js
const myButton = document.createElement('astro-dev-toolbar-button');
-myButton.textContent = 'Cliquez sur moi !';
+myButton.textContent = 'Cliquez-moi !';
myButton.buttonStyle = "purple";
myButton.size = "medium";
@@ -450,19 +545,36 @@ myButton.addEventListener('click', () => {
#### `size`
-La taille du bouton (`small`, `medium`, `large`).
+
+
+La taille du bouton.
#### `button-style`
-Le style du bouton (`ghost`, `outline`, `purple`, `gray`, `red`, `green`, `yellow`, `blue`). En utilisant `ghost`, le bouton lui-même est invisible et seul le contenu du bouton est affiché.
+
+
+Le style du bouton. En utilisant `ghost`, le bouton lui-même est invisible et seul le contenu du bouton est affiché.
En JavaScript, définissez cette propriété en utilisant la propriété `buttonStyle` pour éviter tout conflit avec la propriété native `style`.
#### `button-border-radius`
-
-Le rayon de la bordure du bouton (`normal`, `rounded`). Si vous utilisez `rounded`, le bouton aura des coins arrondis et un rembourrage uniforme sur tous les côtés.
+Le rayon de la bordure du bouton. En utilisant `rounded`, le bouton aura des coins arrondis et un remplissage uniforme sur tous les côtés.
En JavaScript, définissez cette propriété à l'aide de la propriété `buttonBorderRadius`.
@@ -470,7 +582,7 @@ En JavaScript, définissez cette propriété à l'aide de la propriété `button
Affiche un badge.
-L'emplacement du composant sera utilisé comme contenu du badge.
+Le slot du composant sera utilisé comme contenu du badge.
```html
Mon badge
@@ -478,21 +590,33 @@ L'emplacement du composant sera utilisé comme contenu du badge.
#### `size`
-La taille du badge (`small`, `large`).
+