87 lines
2.6 KiB
Plaintext
87 lines
2.6 KiB
Plaintext
---
|
|
title: Accordion
|
|
description: A component used to create collapsible content that can be hidden and shown again.
|
|
date: 22-12-2024
|
|
---
|
|
|
|
## Preview
|
|
|
|
### Basic Usage
|
|
|
|
<Accordion title="Click to expand" defaultOpen={true}>
|
|
This is a simple accordion component that can be toggled by clicking the header. The content can include any valid React nodes, including text, components, and markdown.
|
|
</Accordion>
|
|
|
|
### With Code Block
|
|
|
|
<Accordion title="Code Example" className="mt-4">
|
|
```javascript:utils.js showLineNumbers
|
|
// Example of using the Accordion component
|
|
import Accordion from '@/components/markdown/AccordionMdx';
|
|
|
|
function Example() {
|
|
return (
|
|
<Accordion title="Click to see code">
|
|
<pre>
|
|
{`function greet() {\n console.log('Hello, world!');\n}`}
|
|
</pre>
|
|
</Accordion>
|
|
);
|
|
}
|
|
```
|
|
</Accordion>
|
|
|
|
### With Markdown Content
|
|
|
|
<Accordion title="Markdown Example" className="mt-4">
|
|
## This is a markdown heading
|
|
|
|
- List item 1
|
|
- List item 2
|
|
- List item 3
|
|
|
|
You can include **bold** and *italic* text, [links](#), and other markdown elements.
|
|
</Accordion>
|
|
|
|
## Props
|
|
|
|
| Prop | Type | Default | Description |
|
|
|------|------|---------|-------------|
|
|
| `title` | string | - | **Required**. The text displayed in the accordion header. |
|
|
| `children` | ReactNode | null | The content to be displayed when the accordion is expanded. Can be plain text, markdown, or React components. |
|
|
| `defaultOpen` | boolean | false | When true, the accordion will be expanded by default. |
|
|
| `className` | string | undefined | Additional CSS classes to apply to the accordion container. |
|
|
|
|
## Output Markdown
|
|
|
|
<Tabs defaultValue="markdown" className="pt-5 pb-1">
|
|
<TabsList>
|
|
<TabsTrigger value="markdown">Markdown</TabsTrigger>
|
|
<TabsTrigger value="codeblock">Code Block</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="markdown">
|
|
```plaintext
|
|
<Accordion title="Markdown">
|
|
this is an example of plain text content from the accordion component and below is markdown ;
|
|
1. number one
|
|
2. number two
|
|
3. number three
|
|
</Accordion>
|
|
```
|
|
</TabsContent>
|
|
<TabsContent value="codeblock">
|
|
````plaintext
|
|
<Accordion title="Code Block" defaultOpen={true}>
|
|
```javascript:main.js showLineNumbers {3-4}
|
|
function isRocketAboutToCrash() {
|
|
// Check if the rocket is stable
|
|
if (!isStable()) {
|
|
NoCrash(); // Prevent the crash
|
|
}
|
|
}
|
|
```
|
|
</Accordion>
|
|
````
|
|
</TabsContent>
|
|
</Tabs>
|