Menu Button Component
The menu button component is used to display buttons and perform actions in menus, typically used in toolbar menus, popup menus, and block-level menus.
Example
See: https://demo.umodoc.com/components?lang=en-US
Usage
<template>
<umo-menu-button
:ico="demoIcon"
text="Example Button"
/>
</template>
<script setup>
import { UmoMenuButton } from '@umoteam/editor'
const demoIcon = `<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 6H8a2 2 0 0 0-2 2v8M16 42H8a2 2 0 0 1-2-2v-8M32 42h8a2 2 0 0 0 2-2v-8M32 6h8a2 2 0 0 1 2 2v8M32 24H16M24 32V16" stroke="var(--umo-error-color)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>`
</script>Props
menuType
Description: The type of the menu.
Possible Values: button, dropdown, select, popup
Type: String
Default Value: button
huge
Description: Whether to display as a large button.
Type: Boolean
Default Value: false
ico
Description: The SVG icon for the menu, requires valid HTML.
Type: string
Default Value: -
text
Description: The text displayed on the menu. When tooltip is not false, the value of text will also be displayed in the tooltip.
Type: string
Default Value: ''
hideText
Description: Whether to hide the text on the menu.
Type: Boolean
Default Value: false
tooltip
Description: The text hint for the menu. If set to false, the tooltip will not be displayed.
Type: [String, Boolean]
Default Value: undefined
shortcut
Description: The name of the shortcut key bound to the menu. It is displayed on the tooltip. Umo Editor internally handles the display of input shortcuts on different platforms, such as displaying Ctrl+Shift+X as ⌘+⇧+X on macOS.
Type: String
Default Value: undefined
shortcutText
Description: The shortcut key bound to the menu, displayed directly on the menu. Generally, hideText should be set to false, and the style of the displayed shortcut needs to be handled. This can be used for block-level menus and right-click menus, etc.
Type: String
Default Value: undefined
selectOptions
Description: When menuType is select or dropdown, the configuration for the dropdown items.
Type: Array
Default Value: -
selectValue
Description: When menuType is select, the selected value of the menu.
Type: [String, Number]
Default Value: -
popupVisible
Description: When menuType is popup, whether to display the Popup.
Type: Boolean
Default Value: false
popupHandle
Description: When menuType is popup, which area of the menu button opens the Popup when clicked. By default, the entire button is clicked.
Possible Values: arrow, i.e., click the arrow to open the Popup.
Type: Boolean
Default Value: false
menuActive
Description: Whether the menu button is in an active state.
Type: Boolean
Default Value: false
disabled
Description: Whether the menu button is disabled.
Type: Boolean
Default Value: false
Others
Umo Editor uses TDesign Vue Next as its base component library, and the menu button supports most of the properties of the components used in TDesign Vue Next.
Slots
default
Description: The default slot for the menu button, where you can place the content of the menu button, including the default content for select, dropdown, popup, etc. components.
dropmenu
Description: When menuType is dropdown, the content of the popup menu for the menu button. See: https://tdesign.tencent.com/vue-next/components/dropdown-en?tab=api
content
Description: When menuType is popup, the content of the popup for the menu button. See: https://tdesign.tencent.com/vue-next/components/popup-en?tab=api
Others
Umo Editor uses TDesign Vue Next as its base component library, and the menu button supports most of the slots of the components used in TDesign Vue Next.
Events
menuClick
Description: Triggered when the menu button is clicked.
Others
Umo Editor uses TDesign Vue Next as its base component library, and the menu button supports most of the events of the components used in TDesign Vue Next.