Skip to content
On this page

Other Options

Show/Hide

Since the control of the display is in the Headless UI component, it can usually be used directly without any setting.

But if we need to control the display of the floating element (<MenuItems>) manually, we need to set the show prop. Then set static on the component of the floating element to make it static, so that we can manually control the display state:

<Menu>
  <Float :show="show">
    <MenuButton @click="toggle">
      Options
    </MenuButton>

    <MenuItems static>
      ...
    </MenuItems>
  </Float>
</Menu>

<script setup>
const show = ref(false)
const toggle = () => {
  show.value = !show.value
}
</script>

HTML elements can also be used directly by setting show to control the display of floating elements (<div>):

<Float :show="show">
  <button @click="toggle">
    Options
  </button>

  <div>
    ...
  </div>
</Float>

<script setup>
const show = ref(false)
const toggle = () => {
  show.value = !show.value
}
</script>

z-index

CSS z-index property for the floating element, the default value is 9999, and other numbers can be set:

<Float :z-index="100">

Position Mode

The default is to use CSS transform to position floating elements. If this causes a conflict in transform properties, can set false to use top / left for positioning:

<Float :transform="false">
Other Options has loaded