# Elementos (low-code)

> Los custom elements <vimine-sign-in>, <vimine-card> y <vimine-enroll> — una etiqueta HTML, sin framework.

URL: https://developers.vimine.network/es/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)` crea (o recibe) el cliente de navegador y registra los tres elementos;
devuelve el cliente para que el resto de la página pueda compartirlo.

| Elemento | Atributos | |
|---|---|---|
| `<vimine-sign-in>` | `scope`, `return-to`, `label`, `label-signed-in`, `everywhere`, `handle-redirect`, `lang` | botón Iniciar sesión / Cerrar sesión; con `handle-redirect` completa por sí solo el intercambio del código en la página de callback; emite `vimine-change` `{ signedIn }` |
| `<vimine-card>` | `lang` | el carné del socio que ha iniciado sesión (SVG con el QR en vivo); se vuelve a dibujar cuando cambia la sesión; emite `vimine-card` |
| `<vimine-enroll>` | `slug`, `app-url`, `height`, `lang` | el formulario de inscripción (iframe), en el idioma del elemento; a quien ya tiene una cuenta de Vimine se le ofrece *Continuar en Vimine*, que abre la página en una pestaña nueva donde se hace socio en un solo paso ([por qué una pestaña nueva](https://developers.vimine.network/es/guides/embed-and-verify/#quien-ya-tiene-una-cuenta-de-vimine)) |
| `<vimine-events>` | `slug`, `filter`, `limit`, `detail-url`, `app-url`, `lang` | los eventos de la asociación: los públicos para un visitante, todos para un socio que ha iniciado sesión, con los tipos de inscripción (contribución, plazas). Un socio que ha iniciado sesión tiene un botón *Inscríbete* por tipo. A un visitante se le ofrece *Hazte socio y reserva*, que abre en una pestaña nueva la página de inscripción de Vimine con el evento ([cómo funciona](https://developers.vimine.network/es/guides/events/#quien-aún-no-es-socio)), y *¿Ya eres socio? Inicia sesión*; donde la asociación no acepta solicitudes de inscripción solo queda *Inicia sesión para inscribirte* (desde la 0.3.1). `detail-url` con `{slug}` añade un enlace a los detalles; emite `vimine-registration` `{ registration }` |

Shadow DOM: el estilo se aplica con `--vimine-font`, `--vimine-color`, `--vimine-accent`, `--vimine-accent-contrast`,
`--vimine-radius`, `--vimine-padding`, `--vimine-muted`, `--vimine-error`, `--vimine-card-width`, `--vimine-card-shadow`.
Los textos siguen el idioma del elemento o de la página (`lang`, uno de los idiomas de Vimine); si no, en italiano.

`<vimine-enroll>` lleva tu estilo también al formulario, que es una página de Vimine en un iframe (desde la 0.3.2). Lee
cuatro variables al conectarse y se las pasa a la página:

```css
vimine-enroll {
    --vimine-scheme: light;          /* light o dark: el esquema de la página */
    --vimine-accent: #1e3a5f;        /* botones, enlaces, campos con el foco, el nombre de la asociación */
    --vimine-background: transparent; /* el fondo detrás de las tarjetas: un color, o transparent */
    --vimine-typeface: lora;          /* el tipo de letra de toda la página */
}
```

Vale cualquier color (un nombre, `rgb()`, `hsl()`): el elemento lo pasa en hexadecimal. El color de acento sigue
siendo el tuyo donde se lee bien sobre las tarjetas del formulario; si no, la página lo aclara o lo oscurece hasta que
se lea. Sin las variables, el formulario tiene el aspecto de Vimine. Las variables se heredan: una sola regla en
`:root` sirve para todos los elementos.

`--vimine-typeface` fija el tipo de letra de toda la página, campos incluidos, entre los que sirve el propio Vimine:
`inter`, `roboto`, `open-sans`, `montserrat`, `nunito`, `lora`, `merriweather`, `roboto-slab` — o `system`, el del
dispositivo. Una página en un iframe no puede usar las fuentes de tu sitio, y no se descarga nada de terceros.