我们提供 @21st-extension/toolbar-react 用于 React 工程的软件包。 初始化您主条目文件中的工具栏( 例如 ), src/main.tsx),通过为它创建单独的反应根. 这样可以保证不会干扰你的主要应用树.

// src/main.tsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.tsx';
import { TwentyFirstToolbar } from '@21st-extension/toolbar-react';
import './index.css';

// Render the main app
createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

// Initialize toolbar separately
const toolbarConfig = {
  plugins: [], // Add your custom plugins here
};

document.addEventListener('DOMContentLoaded', () => {
  const toolbarRoot = document.createElement('div');
  toolbarRoot.id = 'stagewise-toolbar-root'; // Ensure a unique ID
  document.body.appendChild(toolbarRoot);

  createRoot(toolbarRoot).render(
    <StrictMode>
      <TwentyFirstToolbar config={toolbarConfig} />
    </StrictMode>
  );
});

使用 @21st-extension/toolbar-next next.js 应用程序的软件包。 包含 <TwentyFirstToolbar> 根布局文件中的组件(src/app/layout.tsx) (中文(简体) ).

// src/app/layout.tsx
import { TwentyFirstToolbar } from '@21st-extension/toolbar-next';

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        <TwentyFirstToolbar
          config={{
            plugins: [], // Add your custom plugins here
          }}
        />
        {children}
      </body>
    </html>
  );
}

对于 Nuxt.js 工程,您可以使用 @21st-extension/toolbar-vue 软件包。 设置 <TwentyFirstToolbar> 组件 app.vue 或相关的布局文件.

// app.vue
<script setup lang="ts">
import { TwentyFirstToolbar, type ToolbarConfig } from '@21st-extension/toolbar-vue';

const config: ToolbarConfig = {
  plugins: [], // Add your custom plugins here
};
</script>

<template>
  <div>
    <NuxtRouteAnnouncer />
    <ClientOnly>
      <TwentyFirstToolbar :config="config" />
    </ClientOnly>
    <NuxtWelcome />
  </div>
</template>

使用 @21st-extension/toolbar-vue vue.js 项目的软件包。 添加 <TwentyFirstToolbar> 组件到您的主要 App 组件(例如, App.vue) (中文(简体) ).

// src/App.vue
<script setup lang="ts">
import { TwentyFirstToolbar, type ToolbarConfig } from '@21st-extension/toolbar-vue';

const config: ToolbarConfig = {
  plugins: [], // Add your custom plugins here
};
</script>

<template>
  <TwentyFirstToolbar :config="config" />
  <div>
    <!-- Your app content -->
  </div>
</template>

对于SvelteKit, 您可以使用工具栏集成 @21st-extension/toolbar 和斯维尔特的生命周期功能,或寻找一个专用 @21st-extension/toolbar-svelte 软件包。 创建一个组件,有条件地使/初始化客户端的工具栏(例如, src/lib/components/TwentyFirstToolbarLoader.svelte 或直接输入 src/routes/+layout.svelte) (中文(简体) ).

使用 onMount 内 +layout.svelte (与 @21st-extension/toolbar:

<!-- src/routes/+layout.svelte -->
<script lang="ts">
  import { onMount } from 'svelte';
  import { browser } from '$app/environment';
  import { initToolbar, type ToolbarConfig } from '@21st-extension/toolbar'; // Adjust path if needed

  onMount(() => {
    if (browser) {
      const stagewiseConfig: ToolbarConfig = {
        plugins: [
          // Add your Svelte-specific plugins or configurations here
        ],
      };
      initToolbar(stagewiseConfig);
    }
  });
</script>

<slot />

使用加载器组件(从仓库中取出的例子): 实例存储器使用 ToolbarLoader.svelte 关闭 ToolbarWrapper.svelte。 。 。 . ToolbarWrapper.svelte 然后会打电话 initToolbar 从 @21st-extension/toolbar。 。 。 .

<!-- examples/svelte-kit-example/src/lib/components/stagewise/ToolbarLoader.svelte -->
<script lang="ts">
import type { ToolbarConfig } from '@21st-extension/toolbar';
// ToolbarWrapper.svelte is a custom component that would call initToolbar
import ToolbarWrapper from './ToolbarWrapper.svelte'; 
import { browser } from '$app/environment';

const stagewiseConfig: ToolbarConfig = {
  plugins: [
    // ... your svelte plugin config
  ],
};
</script>

{#if browser}
  <ToolbarWrapper config={stagewiseConfig} />
{/if}

然后,你会使用 TwentyFirstToolbarLoader 在你身边 src/routes/+layout.svelte。 。 。 .