Popover

introduce

Pop-up bubble menu.

Basic usage

When the Popover pops up, it will be positioned based on the contents of the reference slot.

<z-popover
   v-model:show="showPopover"
   :actions="actions"
   placement="bottom-start"
   @select="onSelect"
>
   <template #reference>
     <z-button type="primary"> Light style </z-button>
   </template>
</z-popover>

import { ref } from 'vue';
import { useToast } from '../../uni_modules/zebra-ui'
const toast = useToast()
const showPopover = ref(false);
// Define menu options through the actions attribute
const actions = [
   { text: 'Option 1' },
   { text: 'Option 2' },
   { text: 'Option 3' },
];
const onSelect = (action) => toast.showToast(action.text);

Dark style

Popover supports two styles: light and dark. The default is light style. Set the theme attribute to dark to switch to dark style.

<z-popover v-model:show="showPopover" theme="dark" :actions="actions">
   <template #reference>
     <z-button type="primary">Dark style</z-button>
   </template>
</z-popover>

import { ref } from 'vue';
const showPopover = ref(false);
const actions = [
   { text: 'Option 1' },
   { text: 'Option 2' },
   { text: 'Option 3' },
];

Horizontal arrangement

Setting the actions-direction property to horizontal causes the menu options to be arranged horizontally.

<z-popover
   v-model:show="showPopover"
   :actions="actions"
   actions-direction="horizontal"
>
   <template #reference>
     <z-button type="primary">Arrange horizontally</z-button>
   </template>
</z-popover>

import { ref } from 'vue';
const showPopover = ref(false);
const actions = [
   { text: 'Option 1' },
   { text: 'Option 2' },
   { text: 'Option 3' },
];

Popup location

Use the placement attribute to control the pop-up position of the bubble.

<z-popover placement="top" />

placement supports the following values:

top # Top middle position
top-start # Top left position
top-end # Top right position
left # left middle position
left-start # The upper left position
left-end # The lower left position
right # middle position on the right
right-start # The upper right position
right-end # The lower right position
bottom # bottom middle position
bottom-start #bottom left position
bottom-end # bottom right position

Display icon

In the actions array, the icon of the option can be defined through the icon field, which supports passing in the icon name or image link, which is equivalent to the name attribute of the Icon component.

<z-popover v-model:show="showPopover" :actions="actions">
   <template #reference>
     <z-button type="primary">Show icon</z-button>
   </template>
</z-popover>

import { ref } from 'vue';
const showPopover = ref(false);
const actions = [
   { text: 'Option 1', icon: 'plus-circle' },
   { text: 'Option 2', icon: 'minus-circle' },
   { text: 'Option 3', icon: 'message' }
];

Disable option

In the actions array, an option can be disabled via the disabled field.

<z-popover v-model:show="showPopover" :actions="actions">
   <template #reference>
     <z-button type="primary">Disable option</z-button>
   </template>
</z-popover>

import { ref } from 'vue';
const showPopover = ref(false);
const actions = [
   { text: 'Option 1', disabled: true },
   { text: 'Option 2', disabled: true },
   { text: 'Option 3' },
];

Custom content

Default slots allow you to place any content inside the Popover.

<z-popover
   v-model:show="show.customContent"
   placement="top-start"
   @select="onSelect"
>
   <z-grid
     square
     clickable
     :border="false"
     column-num="3"
     :custom-style="{ width: '480rpx' }"
   >
     <z-grid-item
       v-for="i in 6"
       :key="i"
       icon="image"
       text="options"
       @click="show.customContent = false"
     />
   </z-grid>
   <template #reference>
     <z-button type="primary"> Custom content </z-button>
   </template>
</z-popover>

import { ref } from 'vue';
const showPopover = ref(false);

Uncontrolled mode

You can use Popover as a controlled or uncontrolled component:

• When v-model:show is bound, Popover is a controlled component, and the display of the component is completely determined by the value of v-model:show.
• When v-model:show is not bound, Popover is an uncontrolled component. At this time, you can pass in a default value through the show attribute, and the display of the component value is controlled by the component itself.

<z-popover :actions="actions" position="top-start" @select="onSelect">
   <template #reference>
     <z-button type="primary">Uncontrolled mode</z-button>
   </template>
</z-popover>

import { ref } from 'vue';
import { useToast } from '../../uni_modules/zebra-ui'
const toast = useToast()
const actions = [
   { text: 'Option 1' },
   { text: 'Option 2' },
   { text: 'Option 3' },
];
const onSelect = (action) => toast.showToast(action.text);

Props

PopoverAction data structure

The actions attribute is a number consisting of objectsGroup, each object in the array is configured with one column, and the objects can contain the following values:

Events

Slots

Style variables

The component provides the following CSS variables, which can be used to customize styles. For usage, please refer to ConfigProvider component.