You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: components/code-groups.mdx
+30-17Lines changed: 30 additions & 17 deletions
Original file line number
Diff line number
Diff line change
@@ -1,12 +1,10 @@
1
1
---
2
2
title: "Code groups"
3
-
description: "The CodeGroup component lets you combine code blocks in a display separated by tabs"
3
+
description: "Display multiple code examples in one component"
4
4
icon: "group"
5
5
---
6
6
7
-
You will need to make [Code Blocks](/code) then add the `<CodeGroup>` component around them. Every Code Block must have a filename because we use the names for the tab buttons.
8
-
9
-
See below for an example of the end result.
7
+
Use the `CodeGroup` component to display multiple code blocks in a tabbed interface, allowing users to compare implementations across different programming languages or see alternative approaches for the same task.
10
8
11
9
<CodeGroup>
12
10
@@ -28,11 +26,12 @@ class HelloWorld {
28
26
29
27
</CodeGroup>
30
28
31
-
## Language dropdown
29
+
## Creating code groups
32
30
33
-
You can replace the tabs in a code group with a dropdown menu to toggle between languages.
31
+
To create a code group, wrap multiple code blocks with `<CodeGroup>` tags. Each code block must include a title, which becomes the tab label.
34
32
35
-
<CodeGroupdropdown>
33
+
````mdx
34
+
<CodeGroup>
36
35
37
36
```javascript helloWorld.js
38
37
console.log("Hello World");
@@ -51,17 +50,13 @@ class HelloWorld {
51
50
```
52
51
53
52
</CodeGroup>
53
+
````
54
54
55
-
### Props
56
-
57
-
<ResponseFieldname="dropdown"type="boolean">
58
-
Whether to show a dropdown button to toggle the code groups with languages as the options.
59
-
</ResponseField>
55
+
## Language dropdown
60
56
61
-
<RequestExample>
57
+
You can replace the tabs in a code group with a dropdown menu to toggle between languages using the `dropdown` prop.
0 commit comments