# Elemente (Low-Code)

> Die Custom Elements <vimine-sign-in>, <vimine-card> und <vimine-enroll> — ein HTML-Tag, kein Framework.

URL: https://developers.vimine.network/de/sdk/elements/

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

```html
<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](https://developers.vimine.network/de/guides/embed-and-verify/#wer-schon-ein-vimine-konto-hat)) |
| `<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](https://developers.vimine.network/de/guides/events/#wer-noch-nicht-mitglied-ist)), 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:

```css
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.