Radix 首页
WorkOS 出品
Radix 首页
WorkOS 出品
主题主题PrimitivesPrimitives图标图标颜色颜色
文档案例研究博客查看 GitHub
概览

开始使用

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

实现一个弹出框

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

1. 安装 primitive

从命令行安装 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>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 { 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;

}

演示

这是一个完整的演示。

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 设计模式。
  • 可以是受控的或非受控的。
  • 自定义侧边、对齐方式、偏移量、碰撞处理。
  • 可选择渲染指向箭头。
  • 焦点是完全可管理和自定义的。
  • 关闭和分层行为是高度可定制的。
上一篇介绍
下一篇无障碍功能
在 GitHub 上编辑此页。