跳到内容
🚀 影响 Toolpad Core 的 2025 年路线图！参与最新的开发者调查
+

基础概念

了解 Toolpad Core 的基本概念，以便有效地在您的项目集成和使用它。

导入

Toolpad Core 组件可以直接从 @toolpad/core 包中导入。这允许您将它们与您现有的 Material UI 或其他组件一起使用。

import Button from '@mui/material/Button';
import { DashboardLayout } from '@toolpad/core/DashboardLayout';

组件层级结构

Toolpad Core 库被设计为可以在不同的 React 运行时环境下工作，例如 Next.js、Vite，甚至是您自定义的设置。它的许多组件依赖于它们所使用的特定运行时的功能。使组件能够感知运行时的关键组件是 AppProvider。

App Provider

AppProvider 充当应用程序运行时和 Toolpad 组件之间的桥梁。它应该包裹您的整个应用程序，或者您想要使用 Toolpad 组件的应用程序部分。

import { AppProvider } from '@toolpad/core/AppProvider';

function MyApp({ Component, pageProps }) {
  return (
    <AppProvider>
      <Component {...pageProps} />
    </AppProvider>
  );
}

通过使用 AppProvider 包裹您的应用程序，您可以确保您使用的所有其他 Toolpad 组件都可以访问必要的上下文和功能。

AppProvider 组件接受 props 来配置应用程序的导航、主题、品牌、路由器、身份验证和会话，如下所示

<AppProvider
  navigation={NAVIGATION}
  theme={theme}
  branding={BRANDING}
  router={router}
  authentication={AUTHENTICATION}
  session={session}
>
  {props.children}
</AppProvider>

前往 AppProvider 页面，了解更多详细信息以及所有 props 的使用示例。

Slots（插槽）

Toolpad Core 使用 slots（插槽）进行组件自定义。Slots（插槽）允许您覆盖组件的特定部分，从而在样式和功能方面提供灵活性。您还可以使用 slotProps prop 将额外的 props 传递给特定的 slots（插槽）。

这是一个使用 SignInPage 组件的示例

import { SignInPage } from '@toolpad/core/SignInPage';
function MyComponent() {
  return (
    <SignInPage
      slots={{
        emailField: CustomEmailField,

      }}
      slotProps={{
        passwordField: {
          variant: 'outlined',
        },
      }}
    >
      Custom Button
    </Button>
  );
}

在此示例中

  • slots prop 允许您替换组件的整个部分。
  • slotProps prop 允许您将额外的 props 传递给特定的 slots（插槽）。

本地化

Toolpad 组件支持语言之间的翻译。您可以通过多种方式修改 Toolpad 组件内部的文本和翻译。

默认语言环境为英语（美国）。要使用其他语言环境，请按照以下说明操作。

全局设置翻译

使用主题

要翻译所有 Toolpad 组件，您可以通过主题提供翻译

import { createTheme, ThemeProvider } from '@mui/material/styles';
import { hiIN as coreHiIn } from '@mui/material/locale';
import hiIN from '@toolpad/core/locales/hiIN';

const theme = createTheme({
   {
    palette: {
      primary: { main: '#1976d2' },
    },
  },
  coreHiIn,
  hiIN,
});

 // ...
 <AppProvider theme={theme}>{children}</AppProvider>;

使用 localeText prop

如果您想在不使用 createTheme 的情况下传递语言翻译，您可以直接通过 AppProvider 上的 localeText prop 提供它们

import { AppProvider } from '@toolpad/core/AppProvider';
import hiIN from '@toolpad/core/locales/hiIN';

function App({ children }) {
  return (
    <AppProvider
      localeText={hiIN.components.MuiLocalizationProvider.defaultProps.localeText}
    >
      {children}
    </AppProvider>
  );
}

如果您在应用程序中没有使用 AppProvider，您可以直接使用 LocalizationProvider

import { LocalizationProvider } from '@toolpad/core/AppProvider';
import hiIN from '@toolpad/core/locales/hiIN';

function App({ children }) {
  return (
    <LocalizationProvider
      localeText={hiIN.components.MuiLocalizationProvider.defaultProps.localeText}
    >
      {children}
    </LocalizationProvider>
  );
}

本地设置翻译

如果您想自定义特定组件上的一些翻译，您可以使用所有组件公开的 localeText prop。

<SignInPage localeText={{ signInTitle: '...' }}></SignInPage>

优先级顺序

本地化系统在应用翻译时遵循特定的优先级顺序

  1. 直接提供给特定组件的 localeText prop（最高优先级）
  2. 直接提供给 AppProvider 的 localeText prop
  3. 通过主题提供的翻译
  4. 默认英语翻译（最低优先级）

访问本地化键

您可以使用 useLocaleText() hook 在自定义组件中访问您的本地化键。

import { useLocaleText } from '@toolpad/core/AppProvider';

function CustomMenu() {
  // ...
  const localeText = useLocaleText();
  // ...
}