align

Description

Optional. Defines how the dropdown is aligned horizontally relative to the input field

Usage

align?: "start" | "center" | "end";

Values

• "start" - (default) the dropdown is aligned to the bottom left of the input
• "center" - the dropdown is horizontally centered relative to the input field
• "end" - the dropdown is aligned to the right edge of the input field.

Example

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

    const popup = ref(false);
</script>

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

Related article: Positioning and aligning Dropdown