Toolpad Core

全栈组件
用于 React |

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

开始使用 Star

特性

集成全栈的组件

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

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

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

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

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

通知我们提供命令式 API 来处理应用程序周围的 snackbars 和通知。查看文档

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 构建这些以及更多其他应用程序！探索更多示例

Toolpad Studio

正在寻找低代码应用构建器吗？

使用 Toolpad Studio 增强您的团队能力：一个拖放式低代码平台，可轻松构建 UI、连接数据和自托管自定义内部工具。

探索 Studio

全栈 组件用于 React |

特性