常見問題

以下整理了一些 mdui 社群的常見問題與官方解答，建議在提問前先找找有沒有類似的問題。

使用自閉合標籤為何無法顯示元件？

mdui 是基於 Web Components 開發的元件庫，Web Components 規範不支援自閉合標籤，因此請確保為 mdui 元件加上結束標籤。

<!-- 錯誤用法 -->
<mdui-text-field />

<!-- 正確用法 -->
<mdui-text-field></mdui-text-field>

如何在元件載入完成前隱藏元件？

由於 mdui 元件是透過 JavaScript 進行註冊的，因此在 js 檔案載入並註冊元件之前，元件可能會暫時顯示為無樣式狀態。以下兩種方法可以解決這個問題：

一種方法是使用 CSS 的 :defined 虛擬類別來隱藏未註冊的 mdui 元件。以下 CSS 程式碼將隱藏所有未註冊的 mdui 元件，並在元件註冊完成後立即顯示：

:not(:defined) {
  visibility: hidden;
}

另一種方法是使用 JavaScript 的 customElements.whenDefined() 方法。這個方法回傳 Promise，當指定的元件註冊完成後，Promise 會被 resolve。為了處理某些元件因特殊原因無法載入的情況，你可以搭配使用 Promise.allSettled() 方法。

以下範例首先透過 opacity: 0 將 <body> 隱藏，然後在元件註冊完成後，使頁面淡入顯示。同時，範例使用了 Promise.allSettled() 來等待所有 promise 完成，確保即使某個元件無法載入，頁面也能正常顯示：

<style>
  body {
    opacity: 0;
  }

  body.ready {
    opacity: 1;
    transition: 0.25s opacity;
  }
</style>

<script type="module">
  await Promise.allSettled([
    customElements.whenDefined('mdui-button'),
    customElements.whenDefined('mdui-card'),
    customElements.whenDefined('mdui-checkbox'),
  ]);

  // 現在 button, card, checkbox 元件已經註冊完成，加入 ready class，使頁面淡入顯示
  document.body.classList.add('ready');
</script>

在地化

LLMs.txt