mirror of
https://gitlab.nic.cz/turris/reforis/foris-js.git
synced 2024-12-27 00:31:35 +01:00
b6e1e0adae
ThreeDotsMenu Bootstrap component is a dropdown menu that appears when the user clicks on three dots. It is used to display a list of actions that can be performed on a particular item.
41 lines
1.0 KiB
Markdown
41 lines
1.0 KiB
Markdown
ThreeDotsMenu Bootstrap component is a dropdown menu that appears when the user
|
|
clicks on three dots. It is used to display a list of actions that can be
|
|
performed on a particular item.
|
|
|
|
```js
|
|
import { useState } from "react";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import { faEdit, faTrash } from "@fortawesome/free-solid-svg-icons";
|
|
|
|
const threeDotsMenuItems = [
|
|
{
|
|
text: "Edit",
|
|
icon: faEdit,
|
|
onClick: () => {
|
|
alert("Edit clicked");
|
|
},
|
|
},
|
|
{
|
|
text: "Delete",
|
|
icon: faTrash,
|
|
onClick: () => {
|
|
alert("Delete clicked");
|
|
},
|
|
},
|
|
];
|
|
|
|
<ThreeDotsMenu>
|
|
{threeDotsMenuItems.map((item, index) => (
|
|
<button key={index} onClick={item.onClick} className="dropdown-item">
|
|
<FontAwesomeIcon
|
|
icon={item.icon}
|
|
className="me-1"
|
|
width="1rem"
|
|
size="sm"
|
|
/>
|
|
{item.text}
|
|
</button>
|
|
))}
|
|
</ThreeDotsMenu>;
|
|
```
|