Reka UI 标志Reka
backdrop
示例
概览

入门

一个快速教程，帮助您开始使用 Reka UI。

实现 Popover

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

1. 安装库

从命令行安装此组件。

sh
$ npm add reka-ui

2. 导入组件

导入并构建组件。

vue
<!-- 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. 添加您的样式

在需要的地方添加样式。

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 设计模式。
  • 可受控或非受控。
  • 自定义侧边、对齐方式、偏移量、碰撞处理。
  • 可选渲染指向箭头。
  • 焦点完全受控且可自定义。
  • 关闭和层叠行为高度可自定义。