DropdownItem

Dropdown is used to create blocks of content in which there may be, for example, links, menu, or information.

Props

separator

Is the menu item is line separating the menu elements.

type:Boolean

default:false

iconfile

Icon file for the menu item

type:Object

default:{} as object

label

Is the menu item has only text with description for group of items

type:Boolean

default:false

noicon

If there is no area for icon

type:Boolean

default:false

active

If item is active (e.g. routing link)

type:Boolean

default:false

Slots

default

Default slot for content

right

For content or Badge component

Examples

Menu with dropdown

<dropdown-menu :hide="show" @hide-floating="show = false">
  <template #trigger>
    <btn color="primary" text="Button" />
  </template>
  <template #content>
    <dropdown-item :iconfile="IconHome" @click="close()" active>Homepage</dropdown-item>
    <dropdown-item separator />
    <dropdown-item :iconfile="IconCode" @click="close()">Code</dropdown-item>
    <dropdown-item :iconfile="IconProjectDiagram" @click="close()">Diagrams and squares<template #right><badge size="sm" color="primary" type="number" :value="9999" /></template></dropdown-item>
    <dropdown-item separator />
    <dropdown-item label>I do not know what it is</dropdown-item>
    <dropdown-item :iconfile="IconSaasCycle" @click="close()">I do not know what it is<template #right>⇧+⌘+N</template></dropdown-item>
    <dropdown-item :iconfile="IconCalendar" @click="close()">Calendar</dropdown-item>
  </template>
</dropdown-menu>

import { ref } from 'vue'
import { IconHome, IconCode, IconProjectDiagram, IconSaasCycle, IconCalendar } from '@riupress/ui'
const show = ref(false)
function close() {
  show.value = true
}