# 元素（低代码）

> <vimine-sign-in>、<vimine-card> 和 <vimine-enroll> 自定义元素——一个 HTML 标签即可，无需框架。

URL: https://developers.vimine.network/zh-hans/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)` 创建（或接收）浏览器客户端并注册这三个元素；它会返回该客户端，以便页面的其余部分共用。

| 元素 | 属性 | |
|---|---|---|
| `<vimine-sign-in>` | `scope`、`return-to`、`label`、`label-signed-in`、`everywhere`、`handle-redirect`、`lang` | 登录 / 退出按钮；带有 `handle-redirect` 时，会在回调页面上自行完成授权码交换；触发 `vimine-change` `{ signedIn }` |
| `<vimine-card>` | `lang` | 已登录会员的会员卡（带实时二维码的 SVG）；会话变化时重新渲染；触发 `vimine-card` |
| `<vimine-enroll>` | `slug`、`app-url`、`height`、`lang` | 入会表单（iframe），使用元素的语言；对已有 Vimine 账户的人，提供“前往 Vimine 继续”，在新标签页中打开页面，一步即可入会（[为什么用新标签页](https://developers.vimine.network/zh-hans/guides/embed-and-verify/#已有-vimine-账户的人)） |
| `<vimine-events>` | `slug`、`filter`、`limit`、`detail-url`、`app-url`、`lang` | 协会的活动：访客看到公开活动，已登录会员看到全部活动，并附各报名类型（参与费、名额）。已登录会员在每种类型旁都有一个“报名”按钮。访客会看到“加入协会并预约”，它会在新标签页中打开带有该活动的 Vimine 入会页面（[工作原理](https://developers.vimine.network/zh-hans/guides/events/#尚未入会的人)），以及“已是会员？请登录”；如果协会不接受入会申请，则只保留“登录后报名”（自 0.3.1 起）。带 `{slug}` 的 `detail-url` 会添加一个详情链接；触发 `vimine-registration` `{ registration }` |

Shadow DOM：通过 `--vimine-font`、`--vimine-color`、`--vimine-accent`、`--vimine-accent-contrast`、`--vimine-radius`、`--vimine-padding`、`--vimine-muted`、`--vimine-error`、`--vimine-card-width`、`--vimine-card-shadow` 设置样式。文字跟随元素或页面的语言（`lang`，Vimine 支持的任何语言），否则使用意大利语。

`<vimine-enroll>` 还会把您的样式带进表单——表单是 iframe 中的一个 Vimine 页面（自 0.3.2 起）。它在连接时读取四个变量，并传给该页面：

```css
vimine-enroll {
    --vimine-scheme: light;          /* light 或 dark：页面的明暗模式 */
    --vimine-accent: #1e3a5f;        /* 按钮、链接、获得焦点的字段、协会名称 */
    --vimine-background: transparent; /* 卡片后面的底色：一种颜色，或 transparent */
    --vimine-typeface: lora;          /* 整个页面的字体 */
}
```

任何颜色写法都可以（颜色名、`rgb()`、`hsl()`）：元素会把它转换为十六进制传递。只要强调色在表单卡片上清晰可读，就保持您设定的颜色；否则页面会把它调亮或调暗，直到清晰可读。不设置这些变量时，表单保持 Vimine 的外观。这些变量会继承：在 `:root` 上写一条规则即可作用于所有元素。

`--vimine-typeface` 设置整个页面（包括字段）的字体，从 Vimine 自行托管的字体中选择：`inter`、`roboto`、`open-sans`、`montserrat`、`nunito`、`lora`、`merriweather`、`roboto-slab`——或者 `system`，即设备自带的字体。iframe 中的页面无法使用您网站的字体，也不会从任何第三方下载内容。