Toolpad Core

全栈组件
用于 React |

Toolpad Core 由 Material UI 的创建者打造，为你提供构建下一个管理面板和内部工具项目所需的组件。在我们的 CLI 中使用精心挑选的默认值从头开始引导，或将 Toolpad Core 放入你现有的 Next.js 或 Vite 项目中。

开始使用收藏

功能

集成全栈的组件

使用一组旨在协同工作的组件快速构建管理界面。

导航和布局Layout 组件为功能性应用提供了标准结构，包括可自定义的导航栏、页眉栏等。查看文档

身份验证我们的身份验证组件可帮助你快速设置复杂的身份验证流程，无需订阅费用。查看文档

页面容器为你的页面设置面包屑导航、标题、工具栏和响应式容器。查看文档

对话框Toolpad Core 导出一个命令式 API 来管理你应用中的对话框。还包括适应你应用主题的系统对话框。查看文档

通知我们提供命令式 API 来处理你应用中的 Snackbar 和通知。查看文档

const NAVIGATION: Navigation = [
  {
    kind: 'header',
    title: 'Main items',
  },
  {
    segment: 'dashboard',
    title: 'Dashboard',
    icon: <DashboardIcon />,
  },
  {
    segment: 'orders',
    title: 'Orders',
    icon: <ShoppingCartIcon />,
  },
  {
    kind: 'divider',
  },
  {
    kind: 'header',
    title: 'Analytics',
  },
  {
    segment: 'reports',
    title: 'Reports',
    icon: <BarChartIcon />,
    children: [
      {
        segment: 'sales',
        title: 'Sales',
        icon: <DescriptionIcon />,
      },
      {
        segment: 'traffic',
        title: 'Traffic',
        icon: <DescriptionIcon />,
      },
    ],
  },
  {
    segment: 'integrations',
    title: 'Integrations',
    icon: <LayersIcon />,
  },
];

function DashboardLayoutBasic(props: DemoProps) {
  const { window } = props;

  const [pathname, setPathname] = React.useState('/dashboard');

  const router = React.useMemo<Router>(() => {
    return {
      pathname,
      searchParams: new URLSearchParams(),
      navigate: (path) => setPathname(String(path)),
    };
  }, [pathname]);

  const demoWindow = window !== undefined ? window() : undefined;

  return (
    <AppProvider navigation={NAVIGATION} router={router} window={demoWindow}>
      <DashboardLayout>
        <PageContainer>
          <Grid container spacing={2}>
            <Grid size={6}>
              <PlaceHolder height={100} />
            </Grid>
            <Grid size={6}>
              <PlaceHolder height={100} />
            </Grid>
            <Grid size={12}>
              <PlaceHolder height={200} />
            </Grid>
          </Grid>
        </PageContainer>
      </DashboardLayout>
    </AppProvider>
  );
}

为什么使用 Toolpad 构建？

充分利用最佳
生态系统...

React

Toolpad 是一种以代码为中心的管理应用构建方法。整个应用都可以通过 React 代码进行访问和自定义。

TypeScript

TypeScript 增强了代码可维护性和开发者生产力，使其成为 Toolpad 应用的首选。

Next.js

Next.js 为现代 React 应用设定了行业标准。基于它进行构建是使 Toolpad 高效的优势。

Material UI

与 Material UI 的紧密集成确保你获得我们 Material UI 组件列表中所有最新的功能。

示例

Toolpad Core 非常适合构建

管理应用

这个应用向你展示如何开始使用 Toolpad Core 以及如何使用基本的布局和导航功能。访问教程

构建更多！

了解如何使用 Toolpad Core 构建这些以及更多应用！探索更多示例

全栈 组件用于 React |

功能