Render Wrapper #

Render outer wrapper #

By default, <Float> does not render the outer wrapper element, for example, as shown in the following example:

<Float show>
  <button type="button">button</button>
  <div>content</div>
</Float>

The following HTML will be rendered:

<button type="button">button</button>
<div>
  <div>content</div>
</div>

Since the default as for <Float> is template, it directly renders the child element. If you want to wrap other elements, you can pass in a different as prop:

<Float show as="div">
  <button type="button">button</button>
  <div>content</div>
</Float>

And it will render the outer wrapper element:

<div>
  <button type="button">button</button>
  <div>
    <div>content</div>
  </div>
</div>

Render floating element wrapper #

The wrapper element for the floating element can be set using the floating-as prop, and by default it is div:

<Float show>
  <button type="button">button</button>
  <div>content</div>
</Float>

The following HTML will be rendered:

<button type="button">button</button>
<div>
  <div>content</div>
</div>

If you set floating-as to template, the floating element will not render the wrapper element, but position the floating element itself directly:

<Float show floating-as="template">
  <button type="button">button</button>
  <div>content</div>
</Float>

And it will render the following HTML:

<button type="button">button</button>
<div>content</div>

Pass component wrapper #

Sometimes you may need to add HTML attributes or classes to the wrapper of the floating element, you can use the Functional Component of Vue:

import { h, mergeProps } from 'vue'

const Wrapper = (props, { slots }) => {
  return h('div', mergeProps(props, {
    'class': 'wrapper-class',
    'data-label': 'wrapper label',
  }), slots)
}

Then passing the component:

<Float show :floating-as="Wrapper">
  <button type="button">button</button>
  <div>content</div>
</Float>

The following HTML will be rendered:

<button type="button">button</button>
<div class="wrapper-class" data-label="wrapper label">
  <div>content</div>
</div>

If using TypeScript, you can add the FunctionalComponent type:

import { type FunctionalComponent, h, mergeProps } from 'vue'

const Wrapper: FunctionalComponent = (props, { slots }) => {
  return h('div', mergeProps(props, {
    'class': 'wrapper-class',
    'data-label': 'wrapper label',
  }), slots)
}