入门

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

在这个快速教程中，我们将安装和设置样式气泡提示组件。

1. 安装原语

从您的命令行安装组件。

npm install @radix-ui/react-popover@latest -E

2. 导入部分

导入和构建部分。

// index.jsx
import * as React from 'react';
import * as Popover from '@radix-ui/react-popover';

const PopoverDemo = () => (
  <Popover.Root>
    <Popover.Trigger>More info</Popover.Trigger>
    <Popover.Portal>
      <Popover.Content>
        Some more info…
        <Popover.Arrow />
      </Popover.Content>
    </Popover.Portal>
  </Popover.Root>
);

export default PopoverDemo;

3. 添加您的样式

在需要的地方添加样式。

// index.jsx
import * as React from 'react';
import * as Popover from '@radix-ui/react-popover';
import './styles.css';

const PopoverDemo = () => (
  <Popover.Root>
    <Popover.Trigger className="PopoverTrigger">Show info</Popover.Trigger>
    <Popover.Portal>
      <Popover.Content className="PopoverContent">
        Some content
        <Popover.Arrow className="PopoverArrow" />
      </Popover.Content>
    </Popover.Portal>
  </Popover.Root>
);

export default PopoverDemo;

/* styles.css */
.PopoverTrigger {
  background-color: white;
  border-radius: 4px;
}

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

.PopoverArrow {
  fill: white;
}

演示

这是一个完整的演示。

import React from 'react';
import * as Popover from '@radix-ui/react-popover';
import './styles.css';

const PopoverDemo = () => (
  <Popover.Root>
    <Popover.Trigger className="PopoverTrigger">More info</Popover.Trigger>
    <Popover.Portal>
      <Popover.Content className="PopoverContent" sideOffset={5}>
        Some more info…
        <Popover.Arrow className="PopoverArrow" />
      </Popover.Content>
    </Popover.Portal>
  </Popover.Root>
);

export default PopoverDemo;

总结

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

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

在几个简单的步骤中，我们实现了一个完全可访问的气泡提示组件，而无需担心它的许多复杂性。

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

上一步简介

下一步无障碍性

在 GitHub 上编辑此页面。

概述

指南

组件

实用程序

入门

实现一个气泡提示

1. 安装原语

2. 导入部分

3. 添加您的样式

演示

总结