tsParticles

中文

English
Italiano
Français
Español
Deutsch
Português
Русский
日本語
हिन्दी

中文

English
Italiano
Français
Español
Deutsch
Português
Русский
日本語
हिन्दी

Appearance

Wrappers ​

本页是 wrappers 总览。你可以先选择合适的 package，再进入对应页面查看安装与使用细节。

源码目录: https://github.com/tsparticles/tsparticles/tree/main/wrappers

wrappers 页面 ​

先看常用 ​

React 生态 ​

Vue 生态 ​

其他（按字母顺序） ​

通用集成流程 ​

不管使用哪个 framework，流程都一致：

  1. 安装 wrapper + @tsparticles/engine
  2. 功能只加载一次（@tsparticles/slim、@tsparticles/all 或自定义 plugins）
  3. 传入 options 并渲染 wrapper 组件

官方 wrappers（按字母顺序） ​

本节排序规则：

WordPress 与 Elementor 说明 ​

wrapper 到 demo 的映射 ​

使用下表可快速从 wrapper package 跳转到可运行的 monorepo demo。

表格排序规则：

  • 按 wrapper package 名字母排序
  • 对 demo 不适用的 wrapper 作显式例外（@tsparticles/wordpress）

demo 源目录: https://github.com/tsparticles/tsparticles/tree/main/demo

Wrapper packageDemo project
@tsparticles/angulardemo/angular
@tsparticles/astrodemo/astro
@tsparticles/emberdemo/ember
@tsparticles/infernodemo/inferno
@tsparticles/jquerydemo/jquery
@tsparticles/litdemo/lit
@tsparticles/nextjsdemo/nextjs, demo/nextjs-legacy
@tsparticles/nuxt2demo/nuxt2
@tsparticles/nuxt3demo/nuxt3
@tsparticles/nuxt4demo/nuxt4
@tsparticles/preactdemo/preact
@tsparticles/qwikdemo/qwik
@tsparticles/reactdemo/react
@tsparticles/riotdemo/riot
@tsparticles/soliddemo/solid
@tsparticles/sveltedemo/svelte, demo/svelte-kit
@tsparticles/vue2demo/vue2
@tsparticles/vue3demo/vue3
@tsparticles/webcomponentsdemo/webcomponents
@tsparticles/wordpress不适用（需要完整 WordPress 安装）
angular-confettidemo/angular
angular-fireworksdemo/angular

最小模式 ​

React / Next.js 风格 Provider ​

tsx
import Particles, { ParticlesProvider } from "@tsparticles/react";
import type { Engine } from "@tsparticles/engine";
import { loadSlim } from "@tsparticles/slim";

const init = async (engine: Engine): Promise<void> => {
  await loadSlim(engine);
};

export function Background() {
  return (
    <ParticlesProvider init={init}>
      <Particles id="tsparticles" options={{ particles: { move: { enable: true } } }} />
    </ParticlesProvider>
  );
}

Vue / Nuxt 风格注册函数 ​

ts
import type { Engine } from "@tsparticles/engine";

export async function registerParticles(engine: Engine): Promise<void> {
  const [{ loadSlim }] = await Promise.all([import("@tsparticles/slim")]);

  await loadSlim(engine);
}

Angular 单次初始化 ​

ts
import { NgParticlesService } from "@tsparticles/angular";
import { loadSlim } from "@tsparticles/slim";

constructor(private readonly particlesService: NgParticlesService) {}

ngOnInit(): void {
  void this.particlesService.init(async engine => {
    await loadSlim(engine);
  });
}

相关页面 ​