Popup

Basic Usage

View Source

<script setup lang="ts">
import { UniButton, UniPopup } from "unify-ui";
</script>

<template>
  <div class="container">
    <div>
      <UniPopup placement="top">
        <UniButton type="soft">top</UniButton>

        <template #content>
          <div class="box">top</div>
        </template>
      </UniPopup>
    </div>

    <div>
      <UniPopup placement="bottom" background-color="green">
        <UniButton type="soft">bottom</UniButton>

        <template #content>
          <div class="box">bottom</div>
        </template>
      </UniPopup>
    </div>

    <div>
      <UniPopup placement="left" background-color="red">
        <UniButton type="soft">left</UniButton>

        <template #content>
          <div class="box">bottom</div>
        </template>
      </UniPopup>
    </div>

    <div>
      <UniPopup placement="right" background-color="blue">
        <UniButton type="soft">right</UniButton>

        <template #content>
          <div class="box">right</div>
        </template>
      </UniPopup>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 200px 200px;
  align-items: center;
  justify-items: center;
}

.box {
  height: 100px;
  width: 100px;
}
</style>

Trigger Method

View Source

<script setup lang="ts">
import { ref } from "vue";
import { UniButton, UniPopup } from "unify-ui";

const visible = ref(true);
function handleClick() {
  visible.value = !visible.value;
}
</script>

<template>
  <div class="container">
    <div>
      <UniPopup placement="bottom" trigger="click">
        <UniButton type="soft">Trigger: click</UniButton>

        <template #content>
          <div class="box">bottom</div>
        </template>
      </UniPopup>
    </div>

    <div>
      <UniPopup placement="bottom">
        <UniButton type="soft">Trigger: hover</UniButton>

        <template #content>
          <div class="box">bottom</div>
        </template>
      </UniPopup>
    </div>

    <div>
      <UniPopup placement="bottom" trigger="controlled" :visible="visible">
        <UniButton type="soft" @click="handleClick"> Trigger: Controlled </UniButton>

        <template #content>
          <div class="box">bottom</div>
        </template>
      </UniPopup>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 200px 200px;
  align-items: center;
  justify-items: center;
}

.box {
  height: 100px;
  width: 100px;
}
</style>

API

Properties

interface RootProps {
  placement: "top" | "bottom" | "left" | "right";
  overlayClassName?: string;
  /** Whether to show the arrow */
  showArrow?: boolean;
  trigger?: "hover" | "click" | "controlled";
  /** Whether the popup is visible */
  visible?: boolean;
  /** Whether the popup is disabled */
  disabled?: boolean;
  /** Offset of the popup  */
  offset?: number;
  /** To enable the floating element to be appended to the body */
  appendToBody?: boolean;
}

const props = withDefaults(defineProps<RootProps>(), {
  overlayClassName: void 0,
  showArrow: true,
  trigger: "hover",
  offset: 6,
  appendToBody: true,
});

Events

const emits: RootEmits = defineEmits<{
  (e: "update:visible", visible: boolean): void;
}>();

Expose

defineExpose({
  showPopup, // () => void
  hidePopup, // () => void
});