Skip to main content

position

Description​

Optional. Defines the position of a dropdown relative to the input

Usage​

position?: string;

Parameters​

  • "bottom" (default) - the dropdown appears below the input element

  • "top" - the dropdown appears above the input element

  • "left" - the dropdown appears to the left side of the input element

  • "right" - the dropdown appears to the right side of the input element

Example​

<script setup>
    import { ref } from "vue";
    import { Dropdown, Calendar, Text } from "@svar-ui/vue-core";

    const popup = ref(false);

    function oncancel() {
        popup.value = false;
    }
</script>

<template>
  <div class="datepicker" @click="popup = true">
      <Text />

      <Dropdown v-if="popup" :oncancel="oncancel" position="top" align="center">
          <Calendar :value="new Date(2023, 2, 15)" />
      </Dropdown>
  </div>
</template>

<style scoped>
    .datepicker {
        position: relative;
        width: 300px;
    }
</style>

Related article: Positioning and aligning Dropdown