Skip to main content

inline

Description​

Optional. Defines the rendering mode of the dropdown

Usage​

inline?: boolean;

Parameters​

  • true - the dropdown is rendered inside the same HTML element as the input control; keeps dropdown together with related input during scroll, but can be overflown by other elements
  • false - (default) the dropdown is attached to the document body (or to a popupContainer element if specified), which ensures it displays correctly above main application; it is detached from the related input during scroll (use trackScroll to close it at this moment)

Example​

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

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

<template>
  <Dropdown v-if="popup" :inline="true">
      <Calendar :value="new Date(2023, 2, 15)" />
  </Dropdown>
</template>

Related article: Setting the rendering mode