# 元素（低程式碼）

> <vimine-sign-in>、<vimine-card> 和 <vimine-enroll> 自訂元素——一個 HTML 標籤即可，無需框架。

URL: https://developers.vimine.network/zh-hant/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` | 已登入會員的會員卡（帶即時 QR Code 的 SVG）；工作階段變化時重新呈現；觸發 `vimine-card` |
| `<vimine-enroll>` | `slug`、`app-url`、`height`、`lang` | 入會表單（iframe），使用元素的語言；對已有 Vimine 帳戶的人，提供“前往 Vimine 繼續”，在新分頁中開啟頁面，一步即可入會（[為什麼用新分頁](https://developers.vimine.network/zh-hant/guides/embed-and-verify/#已有-vimine-帳戶的人)） |
| `<vimine-events>` | `slug`、`filter`、`limit`、`detail-url`、`app-url`、`lang` | 協會的活動：訪客看到公開活動，已登入會員看到全部活動，並附各報名類型（參與費、名額）。已登入會員在每種類型旁都有一個“報名”按鈕。訪客會看到“加入協會並預約”，它會在新分頁中開啟帶有該活動的 Vimine 入會頁面（[工作原理](https://developers.vimine.network/zh-hant/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 中的頁面無法使用您網站的字型，也不會從任何第三方下載內容。