菜单提供了一种简单的方法来构建自定义的、可访问的下拉组件 对键盘导航的强大支持。
<iframe src="https://headlessui.com/v1/examples/vue-menu-hero" style="background-image: linear-gradient(to right, #9259FE,#7937FF);" width="100%" height="400px" class="h-full w-full"></iframe>
列表框是构建自定义、可访问的选择菜单的重要基础 对于你的应用，提供强大的键盘导航支持。
<iframe style="background-image: linear-gradient(to right, #9259FE,#7937FF);" src="https://headlessui.com/v1/examples/vue-listbox-hero" width="100%" height="400px" class="h-full w-full"></iframe>
组合框是可访问的自动完成和命令选项板的基础 对于你的应用，提供强大的键盘导航支持。
<iframe style="background-image: linear-gradient(to right, #9259FE,#7937FF);" src="https://headlessui.com/v1/examples/vue-combobox-hero" width="100%" height="400px" class="h-full w-full"></iframe>
开关是一个令人愉快的界面，用于在两种状态之间切换值，并且 提供与本机复选框元素相同的语义和键盘导航。
<iframe style="background-image: linear-gradient(to right, #9259FE,#7937FF);" src="https://headlessui.com/v1/examples/vue-switch-hero" width="100%" height="200px" class="h-full w-full"></iframe>
用于构建显示和隐藏的自定义 UI 的简单、可访问的基础 内容，如可切换的手风琴面板。
<iframe style="background-image: linear-gradient(to right, #9259FE,#7937FF);" src="https://headlessui.com/v1/examples/vue-disclosure-hero" width="100%" height="400px" class="h-full w-full"></iframe>
一个完全托管的、无渲染的对话组件，充满了可访问性和 键盘功能，非常适合构建完全自定义的模态和对话框 Windows，用于您的下一个应用程序。
<iframe style="background-image: linear-gradient(to right, #9259FE,#7937FF);" src="https://headlessui.com/v1/examples/vue-dialog-hero" width="100%" height="400px" class="h-full w-full"></iframe>
弹出框非常适合具有任意内容的浮动面板，例如 导航菜单、移动菜单和浮出控件菜单。
<iframe style="background-image: linear-gradient(to right, #9259FE,#7937FF);" src="https://headlessui.com/v1/examples/vue-popover-hero" width="100%" height="500px" class="h-full w-full"></iframe>
单选组为您提供了与本机 HTML 单选输入相同的功能， 没有任何造型。它们非常适合构建自定义 UI 选择。
预览法典
复制复制！
<iframe style="background-image: linear-gradient(to right, #9259FE,#7937FF);" src="https://headlessui.com/v1/examples/vue-radio-group-hero" width="100%" height="400px" class="h-full w-full"></iframe>
轻松创建可访问、完全可定制的选项卡界面，具有强大的焦点 管理和键盘导航支持。
<iframe style="background-image: linear-gradient(to right, #9259FE,#7937FF);" src="https://headlessui.com/v1/examples/vue-tabs-hero" width="100%" height="400px" class="h-full w-full"></iframe>
Transition 组件将 Vue 的内置过渡元素向前推进了一步 此外，允许您协调来自单个根的嵌套子转换 元件。
<iframe style="background-image: linear-gradient(to right, #9259FE,#7937FF);" src="https://headlessui.com/v1/examples/vue-transition-hero" width="100%" height="400px" class="h-full w-full"></iframe>
首先，请通过 npm 安装 Headless UI。
请注意， 此库仅支持 Vue 3 。
<pre class="language-shell float-left min-w-full bg-black/75"><div class=""><code class="language-"><span class="token function">npm</span> <span class="token function">install</span> @headlessui/vue</code></div></pre>