JavaScript API

兩種用法

lucent-ui.js 無任何相依、原生 JS。有兩種驅動方式，可混用：

宣告式（data 屬性）：像 Bootstrap，在 HTML 上加 data-lct-*，載入 JS 後自動生效，不用寫任何程式。
程式式（Lucent.* 方法）：需要動態產生時呼叫全域物件 Lucent。

宣告式：data 屬性一覽

屬性	放在哪	作用
`data-lct-toggle="modal"` + `data-lct-target="#id"`	觸發按鈕	開啟指定 Modal
`data-lct-dismiss`	Modal / Dialog 內的按鈕	關閉所在的彈窗
`data-lct-toggle="tab"` + `data-lct-group`	分頁按鈕	分頁切換（見導覽章）
`data-lct-toggle="dropdown"`	下拉觸發鈕	開合所在的 `.lct-dropdown`
`data-lct-toggle="favorite"`	愛心鈕	切換收藏 `is-active`

點遮罩空白處或按 ESC 也會關閉開啟中的 Modal / Dialog。

程式式：Lucent 物件

Lucent.toast(options)

浮出提示，詳見「覆蓋層」。回傳 { dismiss, el }。

var t = Lucent.toast({ type: 'success', message: '已儲存' });
t.dismiss();   // 需要時手動關閉

Lucent.confirm(options) → Promise<boolean>

置中確認對話框。

Lucent.confirm({
  title: '移除收藏',
  text: '確定要移除嗎？',
  confirmText: '確認移除',
  cancelText: '取消',
  danger: true
}).then(function (ok) {
  if (ok) { /* … */ }
});

也可搭配 async/await：

if (await Lucent.confirm({ title: '刪除', text: '確定？', danger: true })) {
  // 執行刪除
}

Lucent.openModal(target) / Lucent.closeModal(target)

手動開關 Modal。target 可傳選擇器字串或 DOM 元素。

Lucent.openModal('#favModal');
Lucent.closeModal('#favModal');

自訂事件

可監聽以下事件做進一步處理：

事件	觸發時機	`event.detail`
`lct:modal:open`	Modal 開啟	`{ el }`
`lct:modal:close`	Modal 關閉	`{ el }`
`lct:favorite`	收藏切換	`{ active }`

document.addEventListener('lct:modal:open', function (e) {
  console.log('開啟了', e.detail.el.id);
});

document.addEventListener('lct:favorite', function (e) {
  if (e.detail.active) {
    Lucent.toast({ type: 'success', message: '已加入收藏' });
  }
});

動態產生內容後

lucent-ui.js 用事件委派綁在 document 上，所以就算是 Ajax / 框架後來才插入的元素，data-lct-* 一樣會生效，不需要重新初始化。