tsParticles

Русский

English
Italiano
Français
Español
Deutsch
Português
中文
日本語
हिन्दी

Русский

English
Italiano
Français
Español
Deutsch
Português
中文
日本語
हिन्दी

Appearance

Wrappers ​

Эта страница — центральный хаб wrappers. Здесь можно выбрать нужный пакет и перейти к подробной инструкции по установке и использованию.

Исходная папка: https://github.com/tsparticles/tsparticles/tree/main/wrappers

Страницы wrappers ​

Самые популярные ​

Экосистема React ​

Экосистема Vue ​

Другие (в алфавитном порядке) ​

Общий поток интеграции ​

Независимо от framework:

  1. установить wrapper + @tsparticles/engine
  2. загрузить функции один раз (@tsparticles/slim, @tsparticles/all или пользовательские plugins)
  3. отрендерить wrapper-компонент с опциями

Официальные wrappers (в алфавитном порядке) ​

Правило порядка для этого раздела:

Примечания по WordPress и Elementor ​

  • @tsparticles/wordpress — официальный пакет плагина, требующий полноценного WordPress-окружения.
  • Для Elementor нет официального отдельного плагина tsParticles.
  • В README указана интеграция через Premium Addons for Elementor: https://premiumaddons.com/particles-section-addon-for-elementor-page-builder/

Сопоставление wrapper -> demo ​

Используйте эту матрицу, чтобы быстро перейти от wrapper-пакета к рабочему demo-проекту в монорепозитории.

Правило сортировки таблицы:

  • по имени wrapper-пакета
  • явное исключение для 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

Минимальные паттерны ​

Provider в стиле React / Next.js ​

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);
  });
}

Связанные страницы ​