Popover

Popovers are used to provide supplemental, useful, unique information about an element, including one or multiple actionable elements. They inform the user of additional information within the context of their original view, but without forcing the user to act upon it like a modal.

Import

import {
  MpPopover,
  MpPopoverTrigger,
  MpPopoverContent,
  MpPopoverList,
  MpPopoverListItem
} from '@mekari/pixel3'

Playground

API

MpPopover

Props

Events

Slots

Name	Type	Default
placement Placement of popover.	"top" | "left" | "right" | "bottom" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end"	bottom-start
id Id of popover.	string	-
trigger Trigger of popover.	"click" | "hover"	-
trigger-id Trigger Id of popover.	string	-
is-default-open If true, popover will open in first render.	boolean	false
is-manual Popover show/hide will be handle manual with `isOpen` prop.	boolean	false
is-open If true/false, popover will show/hide. Only active if `isManual` prop is true.	boolean	false
is-focus-on-close If true, focus will be returned to the element that triggers the popover when it closes.	boolean	false
is-close-on-blur If true, the popover will close when you blur out it by clicking outside or tabbing out.	boolean	true
is-close-on-escape If true, close the popover when the esc key is pressed.	boolean	true
is-close-on-select If true, close the popover when the select item from Popover List Item.	boolean	false
use-portal If true, popover content is rendered with portal.	boolean	false
is-keep-alive If true, popover will be hidden using CSS instead of destroying DOM.	boolean	true
is-adaptive-width If true, popover content width will have min-width same as popover trigger.	boolean	false

MpPopoverTrigger

Slots

Name	Type
default Popover trigger slot	any

MpPopoverContent

Props

Slots

Name	Type	Default
is-dark If true, popover will have dark background.	boolean	false
is-unstyled If true, popover will have unstyled styles.	boolean	false

MpPopoverList

Slots

Name	Type
default Popover list slot	any

MpPopoverListItem

Props

Slots

Name	Type	Default
as Component used for root node.	string	button
is-disabled If true, popover list item will be disabled.	boolean	false
is-active If true, popover item will be active.	boolean	false
is-arrow If true, popover item will be have arrow.	boolean	false

Usage

Option list

Badge

Button On Bottom

Edit button

Icon

Infinity Scroll

Manual

Title

Virtual List

Portal

Other Component