Logo

探索HeadlessUI

author
YGHub·2024-11-07·2·字数：573 字·阅读时间：2 分钟

CSS CSS

Headless UI Headless UI

Headless UI是什么？

Headless UI 是由 Tailwind Labs 开发的无样式 UI 组件库，它提供了一系列可以完全自定义样式的基础组件，支持 Vue.js 和 React.js。组件本身没有任何预设的样式，允许开发者根据自己的项目需求进行完全定制。

主要特点：

  • 无样式：Headless UI 组件不附带样式，允许开发者使用 Tailwind CSS 或其他样式方案完全自定义组件的外观。
  • 无障碍：每个组件都考虑了无障碍（a11y），包括键盘导航和屏幕阅读器支持。
  • 状态管理：Headless UI 处理了组件的状态逻辑，比如菜单打开/关闭、选项卡切换等。

常见组件

Headless UI 提供了一些常用的交互组件，以下是一些常见的组件示例：

1. Dialog (对话框)

vue 
复制代码
<template>
  <div>
    <button @click="isOpen = true">Open Dialog</button>
 
    <Dialog v-if="isOpen" as="div" class="fixed inset-0 z-10" @close="isOpen = false">
      <div class="min-h-screen px-4 text-center">
        <DialogOverlay class="fixed inset-0 bg-black opacity-30" />
 
        <!-- 使得Dialog居中 -->
        <span class="inline-block h-screen align-middle" aria-hidden="true">  </span>
 
        <div class="inline-block w-full max-w-md p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl">
          <DialogTitle class="text-lg font-medium leading-6 text-gray-900">Title</DialogTitle>
          <DialogDescription class="mt-2 text-sm text-gray-500">
            This is a dialog description.
          </DialogDescription>
 
          <div class="mt-4">
            <button @click="isOpen = false" class="px-4 py-2 text-sm font-medium text-white bg-blue-500 rounded-md">
              Close
            </button>
          </div>
        </div>
      </div>
    </Dialog>
  </div>
</template>
 
<script setup>
import { ref } from 'vue'
import { Dialog, DialogOverlay, DialogTitle, DialogDescription } from '@headlessui/vue'
 
const isOpen = ref(false)
</script>
 

2. Menu (菜单)

vue 
<template>
  <div class="relative inline-block text-left">
    <Menu as="div" class="relative">
      <MenuButton as="button" class="px-4 py-2 bg-blue-600 text-white rounded-md">
        Options
      </MenuButton>
 
      <MenuItems class="absolute right-0 mt-2 w-56 origin-top-right bg-white border border-gray-200 rounded-md shadow-lg">
        <MenuItem as="template" v-slot="{ active }">
          <a href="#" class="block px-4 py-2 text-sm text-gray-700" :class="{ 'bg-gray-100': active }">Edit</a>
        </MenuItem>
        <MenuItem as="template" v-slot="{ active }">
          <a href="#" class="block px-4 py-2 text-sm text-gray-700" :class="{ 'bg-gray-100': active }">Delete</a>
        </MenuItem>
      </MenuItems>
    </Menu>
  </div>
</template>
 
<script setup>
import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'
</script>
 

3. Switch (开关)

vue 
<template>
  <Switch v-model="enabled" as="button" class="relative inline-flex items-center h-6 rounded-full w-11" :class="{ 'bg-blue-600': enabled, 'bg-gray-200': !enabled }">
    <span class="sr-only">Enable notifications</span>
    <span class="inline-block w-4 h-4 transform bg-white rounded-full transition-transform" :class="{ 'translate-x-6': enabled, 'translate-x-1': !enabled }"></span>
  </Switch>
</template>
 
<script setup>
import { ref } from 'vue'
import { Switch } from '@headlessui/vue'
 
const enabled = ref(false)
</script>
 

如何使用 Headless UI？

1. 安装

如果你正在使用 Vue 3，你可以通过 npm 安装 @headlessui/vue：

bash 
npm install @headlessui/vue
 

如果你使用的是 React，你可以安装 @headlessui/react：

bash 
npm install @headlessui/react
 

2. 结合 Tailwind CSS

Headless UI 通常与 Tailwind CSS 一起使用，但它并不依赖 Tailwind，因此你可以自由选择任何样式框架或自定义样式。

你可以按照 Tailwind CSS 的官方文档 来安装和配置 Tailwind CSS。然后通过 Tailwind 自定义 Headless UI 的组件样式。

适用场景

  • 如果你希望完全自定义 UI，但又想省去处理复杂的状态逻辑（如键盘操作、菜单控制、无障碍支持等），Headless UI 是非常适合的工具。
  • 它非常适合需要频繁使用交互组件（如模态框、菜单、下拉框等）但希望对样式有绝对控制的场景。

总结

Headless UI 提供了可高度定制的、无样式的基础组件，它负责处理组件状态逻辑，你只需关注样式的实现，非常适合那些对 UI 控制精细的项目。结合 Tailwind CSS 或其他样式框架，你可以灵活地构建自己的 UI 组件库。

Preview

2

点个赞 ~

CSS CSS

Headless UI Headless UI

版权申明： © 本文著作权归YGHub所有，未经YGHub网授权许可，禁止第三方以任何形式转载和使用本文内容。

Related article

基于微信小程序实现图片压缩、裁剪、尺寸调整的实践总结

YGHub

2025-01-02

4

Vue3 作用域插槽，提升组件复用性的利器

YGHub

2024-12-03

1

Nuxt3 中使用 localStorage 的正确姿势

YGHub

2024-12-01

3

Vue3 子组件 defineExpose 暴露方法无效的三种常见场景及解决方案

YGHub

2024-11-24

7

Vue3 组件通信实战，实现跨组件数据更新

YGHub

2024-11-21

8