Radix Vue

外观

入门 ​

一个快速教程，帮助您开始使用 Radix Primitives。

实现弹出框 ​

在这个快速教程中，我们将安装和设置样式 弹出框 组件。

1. 安装库 ​

从您的命令行安装组件。

sh
$ npm add radix-vue

2. 导入部分 ​

导入和组织部分。

vue
<!-- Popover.vue -->
<script setup lang="ts">
import { PopoverArrow, PopoverClose, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from 'radix-vue'
</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>

演示 ​

这是一个完整的演示。

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

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

总结 ​

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

这些组件的级别足够低，您可以控制如何包装它们。您可以随意引入自己的高级 API，以更好地满足您的团队和产品的需求。

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

  • 符合 WAI-ARIA 设计模式。
  • 可以是受控的或不受控的。
  • 自定义边、对齐方式、偏移量、碰撞处理。
  • 可以选择渲染指向箭头。
  • 焦点是完全管理的，并且可以自定义。
  • 关闭和分层行为高度可自定义。