# Elementi (low-code)

> I custom element <vimine-sign-in>, <vimine-card> e <vimine-enroll> — un tag HTML, nessun framework.

URL: https://developers.vimine.network/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="/area-soci" handle-redirect></vimine-sign-in>
<vimine-card></vimine-card>
<vimine-enroll slug="tuo-slug"></vimine-enroll>
```

`defineVimineElements(options | client)` crea (o riceve) il client del browser e registra i tre elementi; li
condivide con il resto della pagina restituendolo.

| Elemento | Attributi | |
|---|---|---|
| `<vimine-sign-in>` | `scope`, `return-to`, `label`, `label-signed-in`, `everywhere`, `handle-redirect`, `lang` | pulsante Accedi / Esci; con `handle-redirect` completa da solo lo scambio del codice sulla pagina di ritorno; emette `vimine-change` `{ signedIn }` |
| `<vimine-card>` | `lang` | la tessera del socio connesso (SVG con QR aggiornato); si aggiorna al cambio di sessione; emette `vimine-card` |
| `<vimine-enroll>` | `slug`, `app-url`, `height`, `lang` | il modulo di iscrizione (iframe), nella lingua dell'elemento; a chi ha già un account Vimine offre *Continua su Vimine*, che apre la pagina in una nuova scheda dove si aderisce in un passo ([perché una nuova scheda](https://developers.vimine.network/guides/embed-and-verify/#chi-ha-già-un-account-vimine)) |
| `<vimine-events>` | `slug`, `filter`, `limit`, `detail-url`, `app-url`, `lang` | gli eventi dell'associazione: quelli pubblici per un visitatore, tutti per un socio connesso, con i tipi di iscrizione (contributo, posti). Il socio connesso ha un pulsante *Iscriviti* per ogni tipo. Al visitatore l'evento propone *Iscriviti all'associazione e prenota*, che apre in una nuova scheda la pagina di iscrizione di Vimine con l'evento ([come funziona](https://developers.vimine.network/guides/events/#chi-non-è-ancora-socio)), e *Sono già socio: accedi*; se l'associazione non accetta richieste di adesione resta il solo *Accedi per iscriverti* (dalla 0.3.1). `detail-url` con `{slug}` aggiunge il link alla scheda; emette `vimine-registration` `{ registration }` |

Shadow DOM: lo stile passa dalle variabili `--vimine-font`, `--vimine-color`, `--vimine-accent`, `--vimine-accent-contrast`,
`--vimine-radius`, `--vimine-padding`, `--vimine-muted`, `--vimine-error`, `--vimine-card-width`, `--vimine-card-shadow`. Le stringhe seguono la
lingua dell'elemento o della pagina (`lang`, una delle lingue di Vimine), in italiano altrimenti.

`<vimine-enroll>` porta il tuo stile anche dentro il modulo, che è una pagina di Vimine in un iframe (dalla 0.3.2). Legge
quattro variabili quando si collega e le passa alla pagina:

```css
vimine-enroll {
    --vimine-scheme: light;          /* light o dark: lo schema della pagina */
    --vimine-accent: #1e3a5f;        /* pulsanti, link, campi attivi, il nome dell'associazione */
    --vimine-background: transparent; /* lo sfondo dietro le schede: un colore, o transparent */
    --vimine-typeface: lora;          /* il carattere di tutta la pagina */
}
```

Un colore qualsiasi va bene (un nome, `rgb()`, `hsl()`): l'elemento lo passa in esadecimale. L'accento resta il tuo dove
si legge sulle schede del modulo; altrimenti la pagina lo schiarisce o lo scurisce finché si legge. Senza variabili il
modulo ha l'aspetto di Vimine. Le variabili si ereditano: una regola su `:root` vale per tutti gli elementi.

`--vimine-typeface` sceglie il carattere di tutta la pagina, campi compresi, tra quelli che Vimine serve da sé: `inter`,
`roboto`, `open-sans`, `montserrat`, `nunito`, `lora`, `merriweather`, `roboto-slab` — oppure `system`, quello del
dispositivo. Una pagina in un iframe non può usare i font del tuo sito, e nulla viene scaricato da terzi.