立即开始

¥Getting started

一个快速教程，帮助你快速入门并运行 Radix Primitives。

实现弹出窗口

¥Implementing a Popover

在本快速教程中，我们将安装并设置 弹出框 组件的样式。

¥In this quick tutorial, we will install and style the Popover component.

1. 安装原始主题

¥ Install the primitive

从命令行安装 Radix Primitives。

¥Install Radix Primitives from your command line.

npm install radix-ui@latest

2. 导入组件

¥ Import the parts

导入并构建各个部分。

¥Import and structure the parts.

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

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. 添加样式

¥ Add your styles

在需要的地方添加样式。

¥Add styles where desired.

// index.jsx
import * as React from "react";
import { Popover } from "radix-ui";
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;
}

演示

¥Demo

这是一个完整的演示。

¥Here's a complete demo.

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;
Expand code

摘要

¥Summary

上述步骤简要概述了在应用中使用基元动画所涉及的内容。

¥The steps above outline briefly what's involved in using a Radix Primitive in your application.

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

¥These components are low-level enough to give you control over how you want to wrap them. You're free to introduce your own high-level API to better suit the needs of your team and product.

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

¥In a few simple steps, we've implemented a fully accessible Popover component, without having to worry about many of its complexities.

• 遵循 WAI-ARIA 设计模式。

  ¥Adheres to WAI-ARIA design pattern.

• 可以控制或不受控制。

  ¥Can be controlled or uncontrolled.

• 自定义侧面、对齐方式、偏移量和碰撞处理。

  ¥Customize side, alignment, offsets, collision handling.

• 可选渲染指向箭头。

  ¥Optionally render a pointing arrow.

• 焦点完全可管理且可自定义。

  ¥Focus is fully managed and customizable.

• 关闭和分层行为高度可定制。

  ¥Dismissing and layering behavior is highly customizable.