Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

i18n(fr): add components/steps #2374

Merged
merged 2 commits into from
Sep 20, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 120 additions & 0 deletions docs/src/content/docs/fr/components/steps.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
---
title: Étapes
description: Apprenez à mettre en forme des listes numérotées de tâches pour créer des guides étape par étape dans Starlight.
---

import { Tabs, TabItem, Steps } from '@astrojs/starlight/components';

Pour mettre en forme une liste numérotée de tâches et créer des guides étape par étape, utilisez le composant `<Steps>`.

import Preview from '~/components/component-preview.astro';

<Preview>

<Steps slot="preview">

1. Créez un nouveau projet Starlight :

<Tabs syncKey="pkg">

<TabItem label="npm">

```sh
npm create astro@latest -- --template starlight
```

</TabItem>

<TabItem label="pnpm">

```sh
pnpm create astro --template starlight
```

</TabItem>

<TabItem label="Yarn">

```sh
yarn create astro --template starlight
```

</TabItem>

</Tabs>

2. Écrivez votre première page de documentation.

</Steps>

</Preview>

## Import

```tsx
import { Steps } from '@astrojs/starlight/components';
```

## Utilisation

Utilisez le composant `<Steps>` pour mettre en forme des listes numérotées de tâches.
Celui-ci est utile pour des guides étape par étape plus complexes où chaque étape doit être clairement mise en évidence.

Entourez une liste ordonnée standard Markdown avec le composant `<Steps>`.
Toute la syntaxe Markdown habituelle est utilisable à l'intérieur de `<Steps>`.

<Preview>

````mdx
import { Steps } from '@astrojs/starlight/components';

<Steps>

1. Importez le composant dans votre fichier MDX :

```js
import { Steps } from '@astrojs/starlight/components';
```

2. Entourez les éléments de votre liste ordonnée avec `<Steps>`.

</Steps>
````

<Fragment slot="markdoc">

````markdoc
{% steps %}

1. Importez le composant dans votre fichier MDX :

```js
import { Steps } from '@astrojs/starlight/components';
```

2. Entourez les éléments de votre liste ordonnée avec `<Steps>`.

{% /steps %}
````

</Fragment>

<Steps slot="preview">

1. Importez le composant dans votre fichier MDX :

```js
import { Steps } from '@astrojs/starlight/components';
```

2. Entourez les éléments de votre liste ordonnée avec `<Steps>`.

</Steps>

</Preview>

## Props de `<Steps>`

**Implémentation :** [`Steps.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/Steps.astro)

Le composant `<Steps>` n'accepte pas de props.
Loading