> ## Documentation Index
> Fetch the complete documentation index at: https://www.chapterjs.org/llms.txt
> Use this file to discover all available pages before exploring further.

# Menus déroulants

> Ajouter des menus à vos messages : des options que vous déclarez, ou les utilisateurs, rôles et salons du serveur

Un menu déroulant se déclare avec `select()`, dans n’importe quel fichier de `src/`, et s’exporte. Déclarez ses options, et `run` reçoit ce qui a été choisi, typé d’après elles.

```ts src/components/color.ts theme={"theme":{"light":"github-light","dark":"vesper"}}
import { select } from 'chapterjs';

export default select({
  placeholder: 'Choisissez une couleur',
  options: { Rouge: 'red', Bleu: 'blue', Vert: 'green' },
  async run({ interaction, value }) {
    await interaction.update({ content: `Vous avez choisi ${value}.`, components: [] });
  },
});
```

```ts src/commands/color.ts theme={"theme":{"light":"github-light","dark":"vesper"}}
import { command } from 'chapterjs';
import color from '../components/color';

export default command({
  name: 'color',
  description: 'Demande votre couleur préférée',
  async run({ interaction }) {
    await interaction.reply({ content: 'Laquelle ?', components: [color] });
  },
});
```

C’est tout : `value` vaut `'red' | 'blue' | 'green'`, et `values` est la liste de tout ce qui a été choisi. Un menu prend une rangée entière à lui seul.

> [!NOTE]
>
> Tout ce que déclare un fichier de menu est dans la [référence](https://www.chapterjs.org/fr/reference/select.md). Ce qu’un menu partage avec un bouton (`data`, `who`, `where`, `ephemeral`, les réponses) est expliqué dans [Boutons](https://www.chapterjs.org/fr/components.md).

## Les options

`options` s’écrit de l’une de trois façons :

| Écrivez | Quand |
| - | - |
| `['Pizza', 'Pasta']` | Ce qui est affiché est ce que reçoit votre code |
| `{ 'Pizza 🍕': 'pizza' }` | Les clés sont affichées, les valeurs sont ce que reçoit votre code |
| `[{ label: 'Pizza', value: 'pizza', description: 'Avec du fromage', emoji: '🍕' }]` | Avec une description, un emoji, ou `default: true` |

Jusqu’à 25 options. `min` et `max` disent combien peuvent être choisies (1 par défaut) : avec `max: 3`, `values` en contient jusqu’à trois.

```ts src/components/toppings.ts theme={"theme":{"light":"github-light","dark":"vesper"}}
import { select } from 'chapterjs';

export default select({
  placeholder: 'Jusqu’à trois',
  min: 0,
  max: 3,
  options: [
    { label: 'Fromage', value: 'cheese', emoji: '🧀' },
    { label: 'Champignons', value: 'mushrooms', description: 'Des frais' },
    { label: 'Olives', value: 'olives' },
  ],
  async run({ interaction, values }) {
    await interaction.update(values.length === 0 ? 'Nature, alors.' : `Avec ${values.join(', ')}.`);
  },
});
```

## Utilisateurs, rôles et salons

Avec un `type`, Discord remplit le menu avec le serveur : `'user'`, `'role'`, `'mentionable'` (utilisateurs et rôles) ou `'channel'`. `values` est alors une liste de [User](https://www.chapterjs.org/fr/reference/user.md), [Role](https://www.chapterjs.org/fr/reference/role.md), `User | Role` ou [Channel](https://www.chapterjs.org/fr/reference/channels), et `channelTypes` restreint les salons listés.

```ts src/components/helpers.ts theme={"theme":{"light":"github-light","dark":"vesper"}}
import { select } from 'chapterjs';

export default select({
  type: 'role',
  placeholder: 'Qui aide ?',
  max: 5,
  async run({ interaction, values }) {
    await interaction.update({
      content: `Aidants : ${values.map(role => role.name).join(', ')}`,
      components: [],
    });
  },
});
```

```ts src/components/logs.ts theme={"theme":{"light":"github-light","dark":"vesper"}}
import { ChannelType, select } from 'chapterjs';

export default select({
  type: 'channel',
  channelTypes: [ChannelType.GuildText],
  async run({ interaction, value }) {
    await interaction.update({ content: `Les journaux vont dans ${value}.`, components: [] });
  },
});
```

## Ce avec quoi un menu est affiché

Là où vous mettez le menu dans un message, passez ce qu’il faut afficher : `placeholder`, `disabled`, et `defaults`, ce qui est sélectionné quand le menu apparaît (les valeurs des options, ou les identifiants des utilisateurs, rôles ou salons) :

```ts src/commands/setup.ts theme={"theme":{"light":"github-light","dark":"vesper"}}
import { command } from 'chapterjs';
import color from '../components/color';
import helpers from '../components/helpers';

export default command({
  name: 'setup',
  description: 'Configure le bot',
  async run({ interaction, guild }) {
    await interaction.reply({
      content: 'Vos réglages',
      components: [
        color({ defaults: ['blue'] }),
        helpers({ defaults: [guild.everyoneRole], placeholder: 'Choisissez les aidants' }),
      ],
    });
  },
});
```

Un menu avec des `data` les prend en premier : `menu({ page: 2 }, { defaults: ['blue'] })`.

> [card] [Formulaires](https://www.chapterjs.org/fr/components/modals.md)
>
> Demander du texte et des choix dans un formulaire qui s’ouvre dans Discord.

> [card] [Embeds et mise en page](https://www.chapterjs.org/fr/components/embeds.md)
>
> Réutiliser un embed, et construire des messages avec des textes, des sections et des conteneurs.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.