Skip to content

Commit

Permalink
i18n(fr): add components-reference.mdx
Browse files Browse the repository at this point in the history 
See #9465
  • Loading branch information
@ArmandPhilippot
ArmandPhilippot committed Oct 7, 2024
1 parent faff5f5 commit 90484a6
Show file tree
Hide file tree
Showing 3 changed files with 267 additions and 259 deletions.
2 changes: 1 addition & 1 deletion src/content/docs/fr/basics/astro-components.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -252,7 +252,7 @@ import Wrapper from '../components/Wrapper.astro';
Utilisez un attribut `slot="my-slot"` sur l'élément enfant que vous voulez passer à un emplacement correspondant `<slot name="my-slot" />` dans votre composant.
:::

Pour faire passer plusieurs éléments HTML dans l'espace réservé `<slot/>` d'un composant sans qu'ils soient enveloppés par une balise `<div>`, utilisez l'attribut `slot=""` sur le [composant `<Fragment/>` d'Astro](/fr/reference/api-reference/#fragment-):
Pour faire passer plusieurs éléments HTML dans l'espace réservé `<slot/>` d'un composant sans qu'ils soient enveloppés par une balise `<div>`, utilisez l'attribut `slot=""` sur le [composant `<Fragment/>` d'Astro](/fr/reference/components-reference/#fragment-):

```astro title="src/components/CustomTable.astro" "<slot name="header"/>" "<slot name="body" />"
---
Expand Down
259 changes: 1 addition & 258 deletions src/content/docs/fr/reference/api-reference.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1369,7 +1369,7 @@ export default function () {

La fonction `getImage()` est prévue pour générer des images destinées à être utilisées ailleurs que directement en HTML, par exemple dans une [route d'API](/fr/guides/endpoints/#points-de-terminaison-du-serveur-routes-api). Elle vous permet également de créer votre propre composant `<Image />` personnalisé.

`getImage()` prend un objet d'options avec les [mêmes propriétés que le composant Image](#propriétés) (à l'exception de `alt`).
`getImage()` prend un objet d'options avec les [mêmes propriétés que le composant Image](/fr/reference/components-reference/#propriétés) (à l'exception de `alt`).

```astro
---
Expand Down Expand Up @@ -2636,261 +2636,4 @@ La propriété `code` accepte les versions lisibles par l'homme de tous les code

La propriété `message` accepte une chaîne de caractères. (par exemple, « L'utilisateur doit être connecté. »)

## Composants intégrés

Astro comprend plusieurs composants intégrés que vous pouvez utiliser dans vos projets. Tous les composants intégrés sont disponibles dans les fichiers `.astro` via `import {} from 'astro:components';`.

Vous pouvez référencer les `Props` de ces composants à l'aide de l'utilitaire [`ComponentProp`](/fr/guides/typescript/#type-componentprops).

### `<Code />`

```astro 'theme="dark-plus"' /wrap\b/ /(inline) \/>/
---
import { Code } from 'astro:components';
---
<!-- Ajouter la coloration syntaxique à du code JavaScript. -->
<Code code={`const foo = 'bar';`} lang="js" />
<!-- Facultatif : Personnaliser votre thème. -->
<Code code={`const foo = 'bar';`} lang="js" theme="dark-plus" />
<!-- Facultatif : Activer le retour à la ligne. -->
<Code code={`const foo = 'bar';`} lang="js" wrap />
<!-- Facultatif : Générer du code en ligne. -->
<p>
<Code code={`const foo = 'bar';`} lang="js" inline />
sera généré en ligne.
</p>
<!-- Facultatif : defaultColor -->
<Code code={`const foo = 'bar';`} lang="js" defaultColor={false} />
```

Ce composant fournit une coloration syntaxique pour les blocs de code au moment de la construction (aucun JavaScript côté client n'est inclus). Le composant est alimenté en interne par Shiki et prend en charge tous les [thèmes](https://shiki.style/themes) et [langues](https://shiki.style/languages) populaires. De plus, vous pouvez ajouter vos thèmes, langues, [transformateurs](#transformateurs) et [couleurs par défaut](https://shiki.style/guide/dual-themes#without-default-color) personnalisés en les transmettant respectivement aux attributs `theme`, `lang`, `transformers` et `defaultColor`.

:::note
Ce composant **n'hérite** pas des paramètres de votre [configuration Shiki](/fr/guides/markdown-content/#configuration-de-shiki). Vous devrez les définir à l'aide des props du composant.
:::

#### Transformateurs

<p><Since v="4.11.0" /></p>

[Les Transformateurs de Shiki](https://shiki.style/packages/transformers#shikijs-transformers) peuvent éventuellement être appliqués au code en les transmettant via la propriété `transformers` sous forme de tableau. Depuis Astro v4.14.0, vous pouvez également fournir une chaîne de caractères à [l'attribut `meta` de Shiki](https://shiki.style/guide/transformers#meta) pour transmettre des options aux transformateurs.

Notez que `transformers` n'applique que les classes et vous devez fournir vos propres règles CSS pour cibler les éléments de votre bloc de code.

```astro title="src/pages/index.astro" {12-13}
---
import { transformerNotationFocus, transformerMetaHighlight } from '@shikijs/transformers'
import { Code } from 'astro:components'
const code = `const foo = 'hello'
const bar = ' world'
console.log(foo + bar) // [!code focus]
`
---
<Code
code={code}
lang="js"
transformers={[transformerMetaHighlight()]}
meta="{1,3}" />
<style is:global>
pre.has-focused .line:not(.focused) {
filter: blur(1px);
}
</style>
```

### `<Fragment />`

Un composant utilisé avec les [directives `set:*`](/fr/reference/directives-reference/#sethtml) pour restituer le contenu HTML sans aucun élément d'habillage supplémentaire :

```astro title="src/components/SetHtml.astro" "Fragment"
---
const htmlString = '<p>Contenu HTML brut</p>';
---
<Fragment set:html={htmlString} />
```

En savoir plus sur [l'utilisation de fragments](/fr/basics/astro-syntax/#fragments) dans la syntaxe Astro.

### `<Prism />`

Pour utiliser le composant de coloration `Prism`, **installez** d'abord le package `@astrojs/prism` :

<PackageManagerTabs>
<Fragment slot="npm">
```shell
npm install @astrojs/prism
```
</Fragment>
<Fragment slot="pnpm">
```shell
pnpm add @astrojs/prism
```
</Fragment>
<Fragment slot="yarn">
```shell
yarn add @astrojs/prism
```
</Fragment>
</PackageManagerTabs>

```astro
---
import { Prism } from '@astrojs/prism';
---
<Prism lang="js" code={`const foo = 'bar';`} />
```
Ce composant fournit une coloration syntaxique spécifique au langage pour les blocs de code en appliquant les classes CSS de Prism. Notez que **vous devez fournir une feuille de style CSS Prism** (ou apporter la vôtre) pour que la coloration syntaxique apparaisse ! Consultez la [section Configuration de Prism](/fr/guides/markdown-content/#configuration-de-prism) pour plus de détails.
Consultez la [liste des langues supportées par Prism](https://prismjs.com/#supported-languages) où vous pouvez trouver l'alias correspondant à une langue. Et vous pouvez également afficher vos blocs de code Astro avec `lang="astro"` !
### `<Image />`
```astro title="src/components/MyComponent.astro"
---
// importation du composant Image et de l'image
import { Image } from 'astro:assets';
import myImage from "../assets/mon_image.png"; // La résolution de l'image est de 1600x900
---
<!-- `alt` est obligatoire sur le composant Image -->
<Image src={myImage} alt="Une description de mon image." />
```
```html
<!-- Sortie -->
<!-- L'image est optimisée, les attributs appropriés sont appliqués -->
<img
src="/_astro/mon_image.hash.webp"
width="1600"
height="900"
decoding="async"
loading="lazy"
alt="Une description de mon image."
/>
```
#### Propriétés
- src (requis)
- alt (requis)
- width et height (requis pour les images dans `public/` et celles distantes)
- format
- quality
- densities
- widths
En plus des propriétés ci-dessus, le composant `<Image />` accepte toutes les propriétés acceptées par la balise HTML `<img>`.
Pour en savoir plus, consultez le [Guide des images](/fr/guides/images/#image--astroassets).
### `<Picture />`
<p><Since v="3.3.0" /></p>
Utilisez le composant Astro intégré `<Picture />` pour afficher une image réactive avec plusieurs formats et/ou tailles.
```astro title="src/pages/index.astro"
---
import { Picture } from 'astro:assets';
import monImage from "../assets/mon_image.png"; // La résolution de l'image est de 1600x900
---
<!-- `alt` est obligatoire sur le composant Image -->
<Picture src={monImage} formats={['avif', 'webp']} alt="Une description de mon image." />
```
```html
<!-- Sortie -->
<picture>
<source srcset="/_astro/mon_image.hash.avif" type="image/avif" />
<source srcset="/_astro/mon_image.hash.webp" type="image/webp" />
<img
src="/_astro/mon_image.hash.png"
width="1600"
height="900"
decoding="async"
loading="lazy"
alt="Une description de mon image."
/>
</picture>
```
Pour en savoir plus, consultez le [Guide des images](/fr/guides/images/#picture-).
#### Propriétés
`<Picture />` accepte toutes les propriétés du composant `<Image />` en plus des suivantes :
##### `formats`
Un tableau de formats d'image à utiliser pour les balises `<source>`. Par défaut, ceci est défini sur `['webp']`.
##### `fallbackFormat`
Format à utiliser comme valeur de repli pour la balise `<img>`. La valeur par défaut est `.png` pour les images statiques, `.gif` pour les images animées et `.svg` pour les fichiers SVG.
##### `pictureAttributes`
Un objet d'attributs à ajouter à la balise `<picture>`. Utilisez cette propriété pour appliquer des attributs à l'élément externe `<picture>` lui-même. Les attributs appliqués directement au composant `<Picture />` s'appliqueront à l'élément interne `<img>`, à l'exception de ceux utilisés pour la transformation d'image.
### `<Content />`
Un composant générique utilisé pour restituer le contenu d'une [entrée de collection de contenu](/fr/guides/content-collections/#que-sont-les-collections-de-contenu-).
Tout d'abord, interrogez une ou plusieurs entrées en utilisant `getCollection()` ou `getEntry()`. Ensuite, la fonction `entry.render()` peut renvoyer le composant `<Content />` à utiliser dans un modèle de fichier `.astro`.
```astro title="src/pages/render-example.astro" {4, 7}
---
import { getEntry } from 'astro:content';
const entry = await getEntry('blog', 'article-1');
const { Content } = await entry.render();
---
<p>Publié le : {entry.data.published.toDateString()}</p>
<Content />
```
### `<ViewTransitions />`
<p><Since v="2.9.0" /></p>
Choisissez d'utiliser les transitions de vue sur des pages individuelles en important et en ajoutant le composant de routage `<ViewTransitions />` à la balise `<head>` sur chaque page souhaitée.
```astro title="src/pages/index.astro" ins={2,7}
---
import { ViewTransitions } from 'astro:transitions';
---
<html lang="fr">
<head>
<title>Ma page d'accueil</title>
<ViewTransitions />
</head>
<body>
<h1>Bienvenue sur mon site web !</h1>
</body>
</html>
```
Découvrez comment [contrôler le routeur](/fr/guides/view-transitions/#contrôle-du-routeur) et [ajouter des directives de transition](/fr/guides/view-transitions/#directives-de-transition) aux éléments et composants de la page.
### `<Debug />`
```astro
---
import { Debug } from 'astro:components';
const serverObject = {
a: 0,
b: "string",
c: {
nested: "object"
}
}
---
<Debug {serverObject} />
```
Ce composant fournit un moyen d'inspecter les valeurs côté client, sans aucun JavaScript.
[canonical]: https://fr.wikipedia.org/wiki/Élément_de_lien_canonique
Loading

0 comments on commit 90484a6

Please sign in to comment.