Popover

Used to show detailed information inside a pop-up.

Import

import { XPopoverTarget } from '@mixin-ui/kit';

Usage

@Component({
  template: `
   <button x-popover="I love Mixin! ❤️"
           x-popover-position="bottom"
           x-popover-stretch="auto"
           x-btn>
      Show me
    </button>
  `
})
export class Usage {}

Fundamentals

Position

The x-popover-position parameter determines which side of the anchor element the popover will appear on. It must be set in accordance with one of the directions specified in direction to ensure the positioning logic behaves as expected.

Direction

The x-popover-direction parameter specifies the axis along which the popover may be repositioned if it cannot fit on its preferred side. Possible values are:

• horizontal — reposition only along the horizontal (x) axis.
• vertical — reposition only along the vertical (y) axis.
• both — allow repositioning along both axes.

To lock the popover in place and disable any repositioning, set x-popover-fixed to true.

Align

The x-popover-align parameter controls how the popover aligns relative to the anchor. It works perpendicular to the position direction.

API

Inputs

Models