自適應寬度

在一些情況下，我們需要讓浮動元素和上方的參考元素有同等的寬度，可以選擇使用 CSS 或 JS 的方式來實現。

使用 CSS 實現自適應寬度

要使用 CSS 來實現自適應寬度，我們可以增加以下設定：

先將 <Float> 元件增加 as="div" 和 class="relative"，將外圍渲染成 <div class="relative"> 後，再增加 floating-as="template" 讓浮動元素外圍不渲染任何元素 (因為預設會渲染一層 <div> 元素)，直接對浮動元素進行定位，最後為參考元素和浮動元素加上 w-full class 就大功告成了。

現在按鈕和選單就會有同等的寬度了：

<Listbox>
  <Float
    as="div"
    class="relative"
    placement="bottom"
    :offset="4"
    floating-as="template"
  >
    <ListboxButton class="w-full ...">
      ...
    </ListboxButton>

    <ListboxOptions class="w-full ...">
      ...
    </ListboxOptions>
  </Float>
</Listbox>

當然也可以直接指定寬度：

<Listbox>
  <Float
    ...
    class="relative w-[260px]"
    ...
  >
    ...
  </Float>
</Listbox>

如果放在 flex 容器中要撐滿寬度的話，需要加上 w-full class：

<div class="flex justify-center items-center">
  <Listbox>
    <Float
      ...
      class="relative w-full"
      ...
    >
      ...
    </Float>
  </Listbox>
</div>

使用 JS 實現自適應寬度 v0.10+

有些情況下 CSS relative 無法正常同步浮動元素的寬度，比如像同時使用到 portal 的時候。此時可以使用 adaptive-width prop，背後使用了 ResizeObserver API 來監測參考元素的寬度並同步到浮動元素上，但相對的是效能會比 CSS 實現還要差。

<Float adaptive-width>