Lzh on GitHub

快速开始

Reka UI 的快速入门教程。

实现一个 Popover

在这个快速教程中，我们将安装并设置 Popover 组件的样式。

1. 安装库

从命令行安装组件。

npm add reka-ui

2. 导入组件

导入并组织组件。

Popover.vue
<script setup lang="ts">
import { PopoverArrow, PopoverClose, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from 'reka-ui'
</script>

<template>
  <PopoverRoot>
    <PopoverTrigger>More info</PopoverTrigger>
    <PopoverPortal>
      <PopoverContent>
        Some more info...
        <PopoverClose />
        <PopoverArrow />
      </PopoverContent>
    </PopoverPortal>
  </PopoverRoot>
</template>

3. 添加样式

在需要的地方添加样式。

Popover.vue
<template>
  <PopoverRoot>
    <PopoverTrigger class="PopoverTrigger">
      More info
    </PopoverTrigger>
    <PopoverPortal>
      <PopoverContent class="PopoverContent">
        Some more info...
        <PopoverClose />
        <PopoverArrow class="PopoverArrow" />
      </PopoverContent>
    </PopoverPortal>
  </PopoverRoot>
</template>

<style>
.PopoverTrigger {
  background-color: white;
  border-radius: 4px;
}

.PopoverContent {
  border-radius: 4px;
  padding: 20px;
  width: 260px;
  background-color: white;
}

.PopoverArrow {
  background-color: white;
}
</style>

演示

这是一个完整的演示。

演示

总结

上述步骤简要概述了在您的应用程序中使用 Reka UI 所涉及的内容。

这些组件的底层程度足以让您控制如何封装它们。您可以自由引入自己的高级 API，以更好地满足您的团队和产品的需求。

通过几个简单的步骤，我们实现了一个完全可访问的 Popover 组件，而无需担心它的许多复杂性。

  • 遵循 WAI-ARIA 设计模式。
  • 可以是受控的或非受控的。
  • 自定义侧边、对齐方式、偏移量、碰撞处理。
  • 可选地渲染一个指向箭头。
  • 焦点完全受管理和可定制。
  • 关闭和分层行为高度可定制。