入门指南

快速教程，让您快速上手 Radix Primitives。

实现弹出框

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

1. 安装基础组件

从命令行安装 Radix Primitives。

npm install radix-ui@latest

2. 导入组件

导入并结构化组件。

// index.jsx
import * as React from "react";
import { Popover } from "radix-ui";

const PopoverDemo = () => (
	<Popover.Root>
		<Popover.Trigger>更多信息</Popover.Trigger>
		<Popover.Portal>
			<Popover.Content>
				更多信息…
				<Popover.Arrow />
			</Popover.Content>
		</Popover.Portal>
	</Popover.Root>
);

export default PopoverDemo;

3. 添加样式

在需要的地方添加样式。

// index.jsx
import * as React from "react";
import { Popover } from "radix-ui";
import "./styles.css";

const PopoverDemo = () => (
	<Popover.Root>
		<Popover.Trigger className="PopoverTrigger">显示信息</Popover.Trigger>
		<Popover.Portal>
			<Popover.Content className="PopoverContent">
				一些内容
				<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 * as React from "react";
import { Popover } from "radix-ui";
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 Primitive 所涉及的内容。

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

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

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

上一篇介绍 Introduction

下一篇无障碍性 Accessibility

在 GitHub 上编辑此页面

概览 Overview

指南 Guides

组件 Components

通用工具 Utilities

入门指南

实现弹出框

1. 安装基础组件

2. 导入组件

3. 添加样式

演示

总结