Skip to content

Commit ea95f44

Browse files
dks333ethanpalm
andauthored
add language dropdown example (#895)
* add language dropdown example * copyedit * bring changes from #878 --------- Co-authored-by: Ethan Palm <[email protected]>
1 parent 9c17a78 commit ea95f44

File tree

1 file changed

+30
-17
lines changed

1 file changed

+30
-17
lines changed

components/code-groups.mdx

Lines changed: 30 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
---
22
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"
44
icon: "group"
55
---
66

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.
108

119
<CodeGroup>
1210

@@ -28,11 +26,12 @@ class HelloWorld {
2826

2927
</CodeGroup>
3028

31-
## Language dropdown
29+
## Creating code groups
3230

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.
3432

35-
<CodeGroup dropdown>
33+
````mdx
34+
<CodeGroup>
3635

3736
```javascript helloWorld.js
3837
console.log("Hello World");
@@ -51,17 +50,13 @@ class HelloWorld {
5150
```
5251

5352
</CodeGroup>
53+
````
5454

55-
### Props
56-
57-
<ResponseField name="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
6056

61-
<RequestExample>
57+
You can replace the tabs in a code group with a dropdown menu to toggle between languages using the `dropdown` prop.
6258

63-
````mdx Code Group Example
64-
<CodeGroup>
59+
<CodeGroup dropdown>
6560

6661
```javascript helloWorld.js
6762
console.log("Hello World");
@@ -80,6 +75,24 @@ class HelloWorld {
8075
```
8176

8277
</CodeGroup>
83-
````
8478

85-
</RequestExample>
79+
````mdx highlight=1
80+
<CodeGroup dropdown>
81+
82+
```javascript helloWorld.js
83+
console.log("Hello World");
84+
```
85+
86+
```python hello_world.py
87+
print('Hello World!')
88+
```
89+
90+
```java HelloWorld.java
91+
class HelloWorld {
92+
public static void main(String[] args) {
93+
System.out.println("Hello, World!");
94+
}
95+
}
96+
```
97+
</CodeGroup>
98+
````

0 commit comments

Comments
 (0)