73 lines
2.5 KiB
Plaintext
73 lines
2.5 KiB
Plaintext
---
|
|
title: Accordion
|
|
description: A component used to create collapsible content that can be hidden and shown again.
|
|
date: 22-12-2024
|
|
---
|
|
|
|
The Accordion component is a collapsible content container that can be used to hide and show content again. It is a flexible component that can be used to display any content, including HTML elements, markdown components, and plain text.
|
|
|
|
## Preview
|
|
|
|
### Code Block
|
|
|
|
<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>
|
|
|
|
### Text with Markdown
|
|
|
|
<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>
|
|
|
|
## Props
|
|
|
|
| Prop | Type | Default | Description |
|
|
| ------------- | --------- | -------------- | -------------------------------------------------------------------------------------- |
|
|
| `title` | `string` | `null` | The value of Accordion title. |
|
|
| `children` | `ReactNode` | `null` | Flexible content, both HTML elements, markdown componenst and plain text. |
|
|
| `defaultOpen` | `boolean` | `false` | You can change the value to `true` if you want the content to open when the page loads |
|
|
|
|
## Code
|
|
|
|
<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>
|