71 lines
1.9 KiB
Plaintext
71 lines
1.9 KiB
Plaintext
---
|
|
title: Tabs
|
|
description: This section previews the Tabs component.
|
|
date: 14-12-2024
|
|
---
|
|
|
|
The `Tabs` component allows you to organize content into multiple sections, enabling users to switch between them easily. This is particularly useful for displaying related content in a compact manner.
|
|
|
|
## Preview
|
|
|
|
<Tabs defaultValue="java" className="pt-5 pb-1">
|
|
<TabsList>
|
|
<TabsTrigger value="java">Java</TabsTrigger>
|
|
<TabsTrigger value="typescript">TypeScript</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="java">
|
|
```java
|
|
// HelloWorld.java
|
|
public class HelloWorld {
|
|
public static void main(String[] args) {
|
|
System.out.println("Hello, World!");
|
|
}
|
|
}
|
|
```
|
|
</TabsContent>
|
|
<TabsContent value="typescript">
|
|
```typescript
|
|
// helloWorld.ts
|
|
function helloWorld(): void {
|
|
console.log("Hello, World!");
|
|
}
|
|
helloWorld();
|
|
```
|
|
</TabsContent>
|
|
</Tabs>
|
|
|
|
## Props
|
|
|
|
| Prop | Type | Default | Description |
|
|
| -------------- | -------- | ------- | ------------------------------------------------------ |
|
|
| `defaultValue` | `string` | `null` | The value of the tab that is selected by default. |
|
|
| `className` | `string` | `""` | Additional CSS classes for styling the Tabs component. |
|
|
|
|
## Code
|
|
|
|
````jsx
|
|
<Tabs defaultValue="java" className="pt-5 pb-1">
|
|
<TabsList>
|
|
<TabsTrigger value="java">Java</TabsTrigger>
|
|
<TabsTrigger value="typescript">TypeScript</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="java">
|
|
```java
|
|
// HelloWorld.java
|
|
public class HelloWorld {
|
|
public static void main(String[] args) {
|
|
System.out.println("Hello, World!");
|
|
}
|
|
}
|
|
```</TabsContent>
|
|
<TabsContent value="typescript">
|
|
```typescript
|
|
// helloWorld.ts
|
|
function helloWorld(): void {
|
|
console.log("Hello, World!");
|
|
}
|
|
helloWorld();
|
|
```</TabsContent>
|
|
</Tabs>
|
|
````
|