元素（低程式碼）

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	已登入會員的會員卡（帶即時 QR Code 的 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 中的頁面無法使用您網站的字型，也不會從任何第三方下載內容。