Ga naar inhoud

Plugins

Het gebruik van Plugins

AlpineJS biedt de mogelijkheid om uit te breiden via directives en magics. Dit kan gebruikt worden om bijvoorbeeld een tooltip plugin te maken, met het voorbeeld van AlpineJS components.

Example: Tooltip Plugin

1. Installeer de dependencies

Installeer tippy js in je project.

yarn add @popperjs/core tippy.js

2. Tooltip javascript bestand aanmaken

In je javascript folder maak je een nieuw script aan in de plugins folder.

- scripts/
  - plugins/
    - tooltip.js
  - app.js

3. Tooltip plugin code

In het tooltip.js bestand plaats je de volgende code.

import tippy from "tippy.js";

export default (Alpine) => {
  // Magic: $tooltip
  // This can be used to show a tooltip on an element triggered by an event (e.g. click)
  Alpine.magic("tooltip", (el) => (message) => {
    // Create a new tippy instance
    let instance = tippy(el, { content: message, trigger: "manual" });

    // Show the tooltip
    instance.show();

    // Hide the tooltip after 2 seconds
    setTimeout(() => {
      instance.hide();

      // Destroy the instance after it has been hidden
      setTimeout(() => instance.destroy(), 150);
    }, 2000);
  });

  // Directive: x-tooltip
  // This can be used to show a tooltip on an element on hover
  Alpine.directive("tooltip", (el, { expression }, { evaluate }) => {
    // Get the message from the expression
    let message = evaluate(expression);
    // Create a new tippy instance
    tippy(el, { content: message, allowHTML: true });
  });
};

4. Plugin importeren en activeren

Importeer de plugin in je app.js bestand en activeer de plugin.

import domReady from "@roots/sage/client/dom-ready";
import Alpine from "alpinejs";

// Import the plugins

import tooltip from "./plugins/tooltip.js";

/**
 * Application entrypoint
 */
domReady(async () => {
  // Call the plugins before starting Alpine
  Alpine.plugin(tooltip);

  Alpine.start();
});

5. Tooltip styling

Voeg de default styling toe aan je css bestand.

// Tooltip default styling
@import "tippy.js/dist/tippy.css";

6. Tooltip gebruiken

Om de tooltip te gebruiken in je project voeg je een x-tooltip toe aan je html element.

Hover:

<div x-data="{ message: 'Hello World!' }">
  <div x-tooltip="message"></div>
</div>

<div x-data x-tooltip="'Hello World!'"></div>

Click:

<div x-data @click="$tooltip('En dit werkt ook')"></div>
  1. AlpineJS Component Tooltip: https://alpinejs.dev/component/tooltip
  2. Extending AlpineJS: https://alpinejs.dev/advanced/extending
  3. AlpineJS Plugins: https://ryangjchandler.co.uk/posts/my-favourite-alpinejs-plugins
  4. TODO: Link to the Lemone components project!!