Popover

Can be used to display a list of actions are other items. It's reponsive and opens in the right direction

Example Usage

Example

<template>
  <SkPopover>
    <span class="sk-action-list__item">
      <span> Delete </span>
      <sk-icon name="trash" />
    </span>
    <span class="sk-action-list__item">
      <span> Remove Content from Object </span>
      <sk-icon name="battery" />
    </span>
    <span class="sk-action-list__item">
      <span> Duplicate </span>
      <sk-icon name="copy" />
    </span>
  </SkPopover>

  <SkPopover :auto-hide="false">
    <span class="sk-action-list__item">
      <span> Delete </span>
      <sk-icon name="trash" />
    </span>
    <span class="sk-action-list__item">
      <span>Remove Content from Object Remove Content from Object</span>
      <sk-icon name="battery" />
    </span>
    <span class="sk-action-list__item">
      <span> Duplicate </span>
      <sk-icon name="copy" />
    </span>
  </SkPopover>
</template>

Reference

Properties

Name	Type	Default	Description
placement	ref	bottom	top, left, right

Events

Name	Parameters	Description
@input	event	the payload of the input

Slots

Name	Parameters	Description
anchor		Used to style the main element that triggers the popover. If nothing is set, three dot icon is displayed
list		Content of the list inside the popover