Headless 理念与样式定制

BreezeUI 在设计上深度贯彻了 Headless UI（无头组件） 的理念。虽然我们提供了一套开箱即用、美观的默认样式，但你依然拥有极高的自由度去定制属于你自己的组件。

什么是 Headless 理念？

Headless 理念的核心在于将组件的交互逻辑与视觉样式完全解耦。

在 BreezeUI 中，复杂的交互组件（如 Dialog、Dropdown Menu、Select 等）底层均基于 Radix Vue 构建。这意味着：

• 无障碍访问 (A11y)：组件默认遵循 WAI-ARIA 标准，支持键盘导航、屏幕阅读器等。
• 状态管理：复杂的焦点管理、弹窗层级管理、点击外部关闭等逻辑都已在底层处理完毕。
• 样式自由：底层逻辑完全不包含任何 CSS，BreezeUI 只是在其基础上套用了一层基于 Tailwind CSS 的默认样式。

如何定制样式？

BreezeUI 提供了多种层级的样式定制方案，以满足不同场景的需求。

1. 类名覆盖 (Class Override)

这是最直接、最常用的定制方式。BreezeUI 的所有组件都支持直接传入 class 属性，并且内部使用了 tailwind-merge 来智能合并类名。

这意味着你可以直接传入 Tailwind CSS 类名来覆盖默认样式，而不用担心 CSS 优先级问题。

<template>
  <!-- 默认按钮 -->
  <BrButton>默认按钮</BrButton>

  <!-- 覆盖背景色和文字颜色 -->
  <BrButton class="bg-purple-500 hover:bg-purple-600 text-white">
    紫色按钮
  </BrButton>

  <!-- 修改内边距和圆角 -->
  <BrButton class="px-8 py-4 rounded-3xl">
    大圆角按钮
  </BrButton>
</template>

2. 主题变量定制 (Theming)

如果你需要全局更改组件库的颜色风格（例如修改主色调、圆角大小、背景色等），推荐使用 CSS 变量或 BrConfigProvider 进行全局主题配置。

这种方式非常适合实现暗黑模式或多主题切换。

详细指南请参考 主题定制 文档。

3. 插槽与多态组件 (Slots & Polymorphism)

除了修改 CSS，你还可以通过 Vue 的插槽（Slots）来彻底改变组件的内部 DOM 结构。BreezeUI 暴露了丰富的插槽供你插入自定义内容。

此外，部分组件（如 Button）支持 as 属性（多态），允许你改变组件渲染的 HTML 标签，例如将按钮渲染为 a 标签或 router-link，从而在保持原有样式和行为的基础上扩展功能。

<template>
  <BrButton as="a" href="https://github.com" target="_blank">
    这是一个链接
  </BrButton>
</template>

总结

BreezeUI 既为你提供了基于 Tailwind CSS 的精美默认外观，又保留了 Headless UI 的强大扩展能力。你可以像搭积木一样，轻松构建出完全符合你设计规范的用户界面。