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)
}
INFO
If you don't want to use the approach of passing component, you can use the <FloatContent>
component instead, following the usage instructions for the Composable Mode.
With transition
It should be noted if setting floating-as="template"
and using the transition that includes CSS transform at the same time will result in abnormal behavior. When floating-as
is set to template
, the floating element is positioned directly, and for performance optimization, transform is used for positioning by default. Therefore, conflicts may occur between the transform used in the transition animation and the transform used for positioning.
If you need to use it, turn off transform
to switch to using top
/left
properties for positioning:
<Float :transform="false">
Then you can add the class for the transition:
<Float
:transform="false"
floating-as="template"
enter="transition duration-200 ease-out"
enter-from="opacity-0 scale-75"
enter-to="opacity-100 scale-100"
leave="transition duration-150 ease-in"
leave-from="opacity-100 scale-100"
leave-to="opacity-0 scale-75"
tailwindcss-origin-class
>