You can not select more than 25 topics Topics must start with a chinese character,a letter or number, can include dashes ('-') and can be up to 35 characters long.

01-getting-started.md 2.6 KiB

3 years ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. ---
  2. uid: Guides.MessageComponents.GettingStarted
  3. title: Getting Started with Components
  4. ---
  5. # Message Components
  6. Message components are a framework for adding interactive elements to a message your app or bot sends. They're accessible, customizable, and easy to use.
  7. ## What is a Component
  8. Components are a new parameter you can use when sending messages with your bot. There are currently 2 different types of components you can use: Buttons and Select Menus.
  9. ## Creating components
  10. Lets create a simple component that has a button. First thing we need is a way to trigger the message, this can be done via commands or simply a ready event. Lets make a command that triggers our button message.
  11. ```cs
  12. [Command("spawner")]
  13. public async Task Spawn()
  14. {
  15. // Reply with some components
  16. }
  17. ```
  18. We now have our command, but we need to actually send the buttons with the command. To do that, lets look at the `ComponentBuilder` class:
  19. | Name | Description |
  20. | ---------------- | --------------------------------------------------------------------------- |
  21. | `FromMessage` | Creates a new builder from a message. |
  22. | `FromComponents` | Creates a new builder from the provided list of components. |
  23. | `WithSelectMenu` | Adds a `SelectMenuBuilder` to the `ComponentBuilder` at the specific row. |
  24. | `WithButton` | Adds a `ButtonBuilder` to the `ComponentBuilder` at the specific row. |
  25. | `Build` | Builds this builder into a `MessageComponent` used to send your components. |
  26. We see that we can use the `WithButton` function so lets do that. looking at its parameters it takes:
  27. - `label` - The display text of the button.
  28. - `customId` - The custom id of the button, this is whats sent by discord when your button is clicked.
  29. - `style` - The discord defined style of the button.
  30. - `emote` - An emote to be displayed with the button.
  31. - `url` - The url of the button if its a link button.
  32. - `disabled` - Whether or not the button is disabled.
  33. - `row` - The row the button will occupy.
  34. Since were just making a busic button, we dont have to specify anything else besides the label and custom id.
  35. ```cs
  36. var builder = new ComponentBuilder()
  37. .WithButton("label", "custom-id");
  38. ```
  39. Lets add this to our command:
  40. ```cs
  41. [Command("spawner")]
  42. public async Task Spawn()
  43. {
  44. var builder = new ComponentBuilder()
  45. .WithButton("label", "custom-id");
  46. await ReplyAsync("Here is a button!", components: builder.Build());
  47. }
  48. ```
  49. ![](images\image1.png)