DropdownText
A dropdown text component that can be used to display hidden content
Dropdown Text
The DropdownText component is a dropdown text component that can be used to display hidden content. It is a great way to organize and display information in a structured and visually appealing way.
Want to use multiple dropdowns? Check out the Accordion component.
Usage
javascript
1import DropdownText from '@/components/atoms/DropdownText'; 2 3<DropdownText 4 title="Dropdown Text" 5 content="This is the content of the dropdown text component." 6/>
Use borderStyle to change the border style of the dropdown text component.
Props
The DropdownText component accepts the following props:
| Name | Type | Default | Description |
|---|---|---|---|
| title | string | - | The title of the dropdown text component. |
| content | string | - | The content of the dropdown text component. |
| isOpen | boolean | false | If true, the dropdown text component is open. |
| onToggle | function | - | A function that is called when the dropdown text component is toggled. |
| border | boolean | true | If true, the dropdown text component has a border. |
| borderStyle | "b" | "t" | "l" | "r" | "b" | The border style of the dropdown text component (uses Tailwind border classes). |
| activeColor | string | "primary" | The base color (use tailwind.config). |
| className | string | "" | Additional Tailwind utility classes. |
| ...props | object | - | Any other valid HTML attributes. |
The component can either manage its own state or be controlled by the parent component using the isOpen and onToggle props.
Examples
Basic DropdownText
Dropdown Text
Controlled DropdownText
Dropdown Text
This is the content of the dropdown text component.