文档演练博客

立即开始

¥Getting started

安装 Radix 主题并在几分钟内开始构建。

Radix Themes 是一个预先设置好样式的组件库，旨在以极少的配置开箱即用。如果你需要无样式组件，请转到 Radix 基础组件。

¥Radix Themes is a pre-styled component library that is designed to work out of the box with minimal configuration. If you are looking for the unstyled components, go to Radix Primitives.

安装

¥Installation

快速上手。

¥Getting up and running is quick and easy.

1. 安装 Radix 主题

¥ Install Radix Themes

从命令行安装软件包。

¥Install the package from your command line.

npm install @radix-ui/themes

2. 导入 CSS 文件

¥ Import the CSS file

在应用的根目录下导入全局 CSS 文件。

¥Import the global CSS file at the root of your application.

import "@radix-ui/themes/styles.css";

3. 添加主题组件

¥ Add the Theme component

将 Theme 添加到你的应用，将根组件包裹在 body 内部。

¥Add Theme to your application, wrapping the root component inside of body.

import { Theme } from "@radix-ui/themes";

export default function () {
	return (
		<html>
			<body>
				<Theme>
					<MyApp />
				</Theme>
			</body>
		</html>
	);
}

4. 开始构建

¥ Start building

现在，你可以使用 Radix Themes 组件了。

¥You are now ready to use Radix Themes components.

import { Flex, Text, Button } from "@radix-ui/themes";

export default function MyApp() {
	return (
		<Flex direction="column" gap="2">
			<Text>Hello from Radix Themes :)</Text>
			<Button>Let's go</Button>
		</Flex>
	);
}

自定义主题

¥Customizing your theme

配置通过主题组件进行管理和应用。

¥Configuration is managed and applied via the Theme component.

基本配置

¥Basic configuration

将 configuration 传递给 Theme 以自定义外观。

¥Pass configuration to the Theme to customize appearance.

<Theme accentColor="crimson" grayColor="sand" radius="large" scaling="95%">
	<MyApp />
</Theme>

使用主题面板

¥Using the theme panel

ThemePanel 是一个嵌入式组件，可让你实时预览主题。访问组件游乐场查看实际效果。

¥ThemePanel is a drop-in component that allows you to preview the theme in real time. Visit the component playground to see it in action.

要将 ThemePanel 添加到你的应用，请将其从包中导入并放入你的根 Theme 中。

¥To add ThemePanel to your app, import it from the package and drop it inside your root Theme.

import { Theme, ThemePanel } from "@radix-ui/themes";

export default function () {
	return (
		<Theme>
			<MyApp />
			<ThemePanel />
		</Theme>
	);
}