Elemente (Low-Code)

import { defineVimineElements } from '@vimine/sdk/elements';
defineVimineElements({ clientId: 'vmc_…', redirectUri: 'https://www.example.org/callback' });

<vimine-sign-in scope="membership:read" return-to="/members" handle-redirect lang="en"></vimine-sign-in>
<vimine-card lang="en"></vimine-card>
<vimine-enroll slug="your-slug"></vimine-enroll>

defineVimineElements(options | client) legt den Browser-Client an (oder übernimmt ihn) und registriert die drei Elemente; er liefert den Client zurück, damit der Rest der Seite ihn mitnutzen kann.

Element	Attribute
<vimine-sign-in>	scope, return-to, label, label-signed-in, everywhere, handle-redirect, lang	Schaltfläche Anmelden / Abmelden; mit handle-redirect schließt es den Eintausch des Codes auf der Callback-Seite selbst ab; löst vimine-change { signedIn } aus
<vimine-card>	lang	der Ausweis des angemeldeten Mitglieds (SVG mit dem aktuellen QR-Code); zeichnet sich bei Änderungen der Sitzung neu; löst vimine-card aus
<vimine-enroll>	slug, app-url, height, lang	das Beitrittsformular (iframe), in der Sprache des Elements; wer schon ein Vimine-Konto hat, bekommt Weiter auf Vimine angeboten, das die Seite in einem neuen Tab öffnet, wo er in einem Schritt beitritt (warum ein neuer Tab)
<vimine-events>	slug, filter, limit, detail-url, app-url, lang	die Veranstaltungen des Vereins: die öffentlichen für einen Besucher, alle für ein angemeldetes Mitglied, mit den Anmeldearten (Beitrag, Plätze). Ein angemeldetes Mitglied erhält pro Art eine Schaltfläche Teilnehmen. Einem Besucher wird Dem Verein beitreten und Platz reservieren angeboten, das die Beitrittsseite von Vimine mit der Veranstaltung in einem neuen Tab öffnet (so funktioniert es), und Schon Mitglied? Anmelden; wo der Verein keine Beitrittsanträge annimmt, bleibt nur Zum Teilnehmen anmelden (ab 0.3.1). detail-url mit {slug} fügt einen Link zu den Details hinzu; löst vimine-registration { registration } aus

Shadow DOM: Gestalten Sie über --vimine-font, --vimine-color, --vimine-accent, --vimine-accent-contrast, --vimine-radius, --vimine-padding, --vimine-muted, --vimine-error, --vimine-card-width, --vimine-card-shadow. Die Texte folgen der Sprache des Elements oder der Seite (lang, eine der Sprachen von Vimine), sonst Italienisch.

<vimine-enroll> trägt Ihren Stil auch in das Formular, das eine Vimine-Seite in einem iframe ist (ab 0.3.2). Es liest vier Variablen, wenn es eingebunden wird, und übergibt sie der Seite:

vimine-enroll {
    --vimine-scheme: light;          /* light oder dark: das Farbschema der Seite */
    --vimine-accent: #1e3a5f;        /* Schaltflächen, Links, fokussierte Felder, der Name des Vereins */
    --vimine-background: transparent; /* der Grund hinter den Karten: eine Farbe oder transparent */
    --vimine-typeface: lora;          /* die Schrift der ganzen Seite */
}

Jede Farbe funktioniert (ein Name, rgb(), hsl()): Das Element übergibt sie als Hex-Wert. Die Akzentfarbe bleibt Ihre, wo sie auf den Karten des Formulars lesbar ist; sonst hellt die Seite sie auf oder dunkelt sie ab, bis sie es ist. Ohne die Variablen sieht das Formular aus wie Vimine. Die Variablen werden vererbt: Eine Regel auf :root gilt für jedes Element.

--vimine-typeface legt die Schrift der ganzen Seite fest, Felder eingeschlossen, unter denen, die Vimine selbst ausliefert: inter, roboto, open-sans, montserrat, nunito, lora, merriweather, roboto-slab — oder system, die des Geräts. Eine Seite in einem iframe kann die Schriften Ihrer Website nicht verwenden, und nichts wird von Dritten geladen.