Overflow Menu
Basically a Dropdown select, except you have to click to open it and you don't select anything.
vue
<OverflowMenu
class="btn"
:options="[
{
id: 'play',
color: 'primary',
action: () => {},
hoverFilledOnly: true,
},
{ divider: true },
{
id: 'duplicate',
action: () => {},
},
{
id: 'report',
action: () => {},
},
{
id: 'remain',
action: () => {},
remainOnClick: true,
},
{ divider: true },
{
id: 'delete',
color: 'danger',
action: () => {},
hoverFilled: true,
},
]"
>
More options...
<template #like>
<HeartIcon /> Like
</template>
<template #report>
<ReportIcon /> Report
</template>
<template #delete>
<TrashIcon /> Delete
</template>
</OverflowMenu>
<OverflowMenu
class="btn"
:options="[
{
id: 'play',
color: 'primary',
action: () => {},
hoverFilledOnly: true,
},
{ divider: true },
{
id: 'duplicate',
action: () => {},
},
{
id: 'report',
action: () => {},
},
{
id: 'remain',
action: () => {},
remainOnClick: true,
},
{ divider: true },
{
id: 'delete',
color: 'danger',
action: () => {},
hoverFilled: true,
},
]"
>
More options...
<template #like>
<HeartIcon /> Like
</template>
<template #report>
<ReportIcon /> Report
</template>
<template #delete>
<TrashIcon /> Delete
</template>
</OverflowMenu>