tomasalias/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

More button options and dividers in overflow menus

Browse Source
This commit is contained in:
Prospector
2023-10-11 14:57:23 -07:00
parent ffc46d6a48
commit f9a9ece320
8 changed files with 201 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
docs/components/overflow-menu.md
View File

@@ -1,32 +1,47 @@
<script setup>
const options = [
# Overflow Menu
<DemoContainer>
<OverflowMenu :options="[
{
'id': 'like',
'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': () => {}
'action': () => {},
'hoverFilled': true,
}
]
</script>
# Overflow Menu
<DemoContainer>
<OverflowMenu :options="options" class="btn">
]" class="btn">
More options...
<template #like>
<HeartIcon /> Like
<template #play>
<PlayIcon /> Play
</template>
<template #duplicate>
<CopyIcon /> Duplicate
</template>
<template #report>
<ReportIcon /> Report
</template>
<template #remain>
<ClearIcon /> I shall remain
</template>
<template #delete>
<TrashIcon /> Delete
</template>
@@ -34,7 +49,37 @@ const options = [
</DemoContainer>
```vue
<OverflowMenu :options="options" class="btn">
<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