Popover Menu

A Popover Menu is used to display a menu of actions in a Popover.

Using a Popover Menu

To use a Popover Menu, create a Popover and use your PopoverMenu inside. You must set padding to flush.

<template>
<ci-popover padding="flush">
  <template #action="popover">
    <ci-button @click="popover.toggle()">
      Open Popover Menu
    </ci-button>
  </template>

  <ci-popover-menu :menu-items="menuItems" />
</ci-popover>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { id: 'menu-view', text: 'View Scheduling Page' },
        { id: 'menu-insert', text: 'Edit Team Members', pxClass: 'General,CustomPx,Item' }
      ],
    }
  }
}
</script>

Using a Popover Menu

You can pass title prop to add title for menu.

<template>
<ci-popover padding="flush">
  <template #action="popover">
    <ci-button @click="popover.toggle()">
      Open Popover Menu
    </ci-button>
  </template>

  <ci-popover-menu title="Demo" :menu-items="menuItems" />
</ci-popover>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { id: 'menu-view', text: 'View Scheduling Page' },
        { id: 'menu-insert', text: 'Edit Team Members' }
      ],
    }
  }
}
</script>

Padding

Use the padding prop to adjust the padding on the Popover Menu.

<template>
  <DemoGrid>
    <ci-popover
      v-for="option in paddingOptions"
      :key="option"
      padding="flush"
    >
      <template #action="popover">
        <ci-button @click="popover.toggle()">
          {{ option }} padding
        </ci-button>
      </template>
      <ci-popover-menu
        :menu-items="menuItems"
        :padding="option"
      />
    </ci-popover>
  </DemoGrid>
</template>
<script>
export default {
  data() {
    return {
      menuItems: [
        { id: 'menu-view', text: 'View Scheduling Page' },
        { id: 'menu-insert', text: 'Edit Team Members' }
      ],
      paddingOptions: ['flush', '2xs', 'xs', 'sm', 'md']
    }
  }
}
</script>

Menu Items

You can pass various properties to your menu-tems to style them, give them icons, etc.

<template>
  <DemoGrid>
    <ci-popover padding="flush">
      <template #action="popover">
        <ci-button @click="popover.toggle()">
          Popover Menu
        </ci-button>
      </template>

      <ci-popover-menu :menu-items="menuItems" />
    </ci-popover>
    <ci-popover padding="flush">
      <template #action="popover">
        <ci-button @click="popover.toggle()">
          Popover Menu w/Icons
        </ci-button>
      </template>

      <ci-popover-menu :menu-items="menuItemsIcons" />
    </ci-popover>
  </DemoGrid>
</template>
<script>
export default {
  data() {
    return {
      menuItems: [
        { id: 'menu-view', text: 'View Scheduling Page' },
        { id: 'menu-insert', text: 'Edit Team Members' },
        { id: 'menu-delete', text: 'Delete Team Members', destructive: true },
        { id: 'menu-disabled', text: 'Disabled Team Members', disabled: true }
      ],
      menuItemsIcons: [
        { id: 'menu-view', icon: 'link', text: 'View Scheduling Page' },
        { id: 'menu-insert', icon: 'people-group', text: 'Edit Team Members' },
        { id: 'menu-delete', icon: 'x-lg', text: 'Delete Team Members', destructive: true },
        { id: 'menu-disabled', icon: 'eye-slash', text: 'Disabled Team Members', disabled: true }
      ],
    }
  }
}
</script>

Each MenuItem has following properties.

Property	Type	Description	Required
id	String	Unique identifier for menu item, used in click event	true
icon	String	The icon to render	false
text	String	Text that is displayed in menu item	true
destructive	Boolean	If enabled changes menu item text to red	false
disabled	Boolean	Disables menu item	false
onClick	Function	The function to execute when the item is clicked.	false

Events

Popover Menu has one event @select, fired when the Popover Menu is selected. This can be used if passing in an onClick function is not desired.

<template>
  <ci-popover padding="flush">
    <template #action="popover">
      <ci-button @click="popover.toggle()">
        Open Popover Menu
      </ci-button>
    </template>

    <ci-popover-menu
      :menu-items="menuItems"
      @select="alertClickedItem"
    />
  </ci-popover>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { id: '1', text: 'Menu item 1' },
        { id: '2', text: 'Menu item 2' },
        { id: '3', text: 'Menu item 3' }
      ],
    }
  },
  methods: {
    alertClickedItem: (itemId) => {
      alert(`${itemId} clicked!`);
    }
  }
}
</script>