# Éléments (low-code)

> Les éléments personnalisés <vimine-sign-in>, <vimine-card> et <vimine-enroll> — une balise HTML, aucun framework.

URL: https://developers.vimine.network/fr/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)` crée (ou reprend) le client navigateur et enregistre les trois éléments ;
il renvoie le client pour que le reste de la page puisse le partager.

| Élément | Attributs | |
|---|---|---|
| `<vimine-sign-in>` | `scope`, `return-to`, `label`, `label-signed-in`, `everywhere`, `handle-redirect`, `lang` | bouton de connexion / déconnexion ; avec `handle-redirect`, il termine de lui-même l’échange du code sur la page de callback ; émet `vimine-change` `{ signedIn }` |
| `<vimine-card>` | `lang` | la carte du membre connecté (SVG avec le QR à jour) ; se redessine quand la session change ; émet `vimine-card` |
| `<vimine-enroll>` | `slug`, `app-url`, `height`, `lang` | le formulaire d’adhésion (iframe), dans la langue de l’élément ; à une personne qui a déjà un compte Vimine, il propose *Continuer sur Vimine*, qui ouvre la page dans un nouvel onglet où elle adhère en une étape ([pourquoi un nouvel onglet](https://developers.vimine.network/fr/guides/embed-and-verify/#une-personne-qui-a-déjà-un-compte-vimine)) |
| `<vimine-events>` | `slug`, `filter`, `limit`, `detail-url`, `app-url`, `lang` | les événements de l’association : les publics pour un visiteur, tous pour un membre connecté, avec les types d’inscription (contribution, places). Un membre connecté a un bouton *S’inscrire* par type. À un visiteur, il propose *Adhérer à l’association et réserver*, qui ouvre la page d’adhésion de Vimine avec l’événement dans un nouvel onglet ([comment ça marche](https://developers.vimine.network/fr/guides/events/#une-personne-qui-nest-pas-encore-membre)), et *Déjà membre ? Se connecter* ; là où l’association ne prend pas de demandes d’adhésion, il ne reste que *Se connecter pour s’inscrire* (depuis 0.3.1). `detail-url` avec `{slug}` ajoute un lien vers le détail ; déclenche `vimine-registration` `{ registration }` |

Shadow DOM : stylez avec `--vimine-font`, `--vimine-color`, `--vimine-accent`, `--vimine-accent-contrast`, `--vimine-radius`,
`--vimine-padding`, `--vimine-muted`, `--vimine-error`, `--vimine-card-width`, `--vimine-card-shadow`. Les textes suivent la
langue de l’élément ou de la page (`lang`, une des langues de Vimine), en italien sinon.

`<vimine-enroll>` porte aussi votre style dans le formulaire, qui est une page Vimine dans une iframe (depuis 0.3.2). Il
lit quatre variables à sa connexion et les transmet à la page :

```css
vimine-enroll {
    --vimine-scheme: light;          /* light ou dark : le thème de la page */
    --vimine-accent: #1e3a5f;        /* boutons, liens, champs actifs, le nom de l’association */
    --vimine-background: transparent; /* le fond derrière les encadrés : une couleur, ou transparent */
    --vimine-typeface: lora;          /* la police de toute la page */
}
```

N’importe quelle couleur convient (un nom, `rgb()`, `hsl()`) : l’élément la transmet en hexadécimal. L’accent reste le
vôtre là où il se lit sur les encadrés du formulaire ; sinon, la page l’éclaircit ou l’assombrit jusqu’à ce qu’il se
lise. Sans les variables, le formulaire a l’apparence de Vimine. Les variables se transmettent par héritage : une seule
règle sur `:root` sert tous les éléments.

`--vimine-typeface` définit la police de toute la page, champs compris, parmi celles que Vimine sert lui-même : `inter`,
`roboto`, `open-sans`, `montserrat`, `nunito`, `lora`, `merriweather`, `roboto-slab` — ou `system`, celle de
l’appareil. Une page dans une iframe ne peut pas utiliser les polices de votre site, et rien n’est téléchargé chez un
tiers.