元素（低代码）

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

<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 继续”，在新标签页中打开页面，一步即可入会（为什么用新标签页）
<vimine-events>	slug、filter、limit、detail-url、app-url、lang	协会的活动：访客看到公开活动，已登录会员看到全部活动，并附各报名类型（参与费、名额）。已登录会员在每种类型旁都有一个“报名”按钮。访客会看到“加入协会并预约”，它会在新标签页中打开带有该活动的 Vimine 入会页面（工作原理），以及“已是会员？请登录”；如果协会不接受入会申请，则只保留“登录后报名”（自 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 起）。它在连接时读取四个变量，并传给该页面：

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 中的页面无法使用您网站的字体，也不会从任何第三方下载内容。