檔案下載清單 (Download List)

  • 新提案
  • →
  • 封閉測試
  • →
  • 公開測試
  • →
  • 已穩定
成熟度說明
  • 新提案：未完成開發、請勿使用。
  • 封閉測試：開發暫時性完成，可使用。可能仍有親和力或其他使用上問題待透過實測發現。
  • 公開測試：開發暫時性完成，歡迎使用。具有完整親和力報告。
  • 已穩定：開發完成、歡迎使用。應無任何親和力或使用上問題。

基本範例

HTML
<ul class="download-list">
  <li class="download-list__item">
    <a class="download-list__link" href="/files/meeting-notes.txt">
      <span class="download-list__title">會議紀錄</span>
      <span class="download-list__meta">TXT，0.2 KB</span>
    </a>
  </li>
  <li class="download-list__item">
    <a class="download-list__link" href="/files/application-form.csv">
      <span class="download-list__title">申請表單</span>
      <span class="download-list__meta">CSV，0.2 KB</span>
    </a>
  </li>
  <li class="download-list__item download-list__item--unavailable">
    <span class="download-list__title">附件資料</span>
    <span class="download-list__meta">ZIP，檔案目前無法下載</span>
  </li>
</ul>
  • 檔案標題、格式與容量屬於同一個連結；格式與容量顯示在標題下一行。
  • 無法下載的項目使用一般文字，不建立停用連結。

使用方式

  • 連結可能直接開啟或下載檔案，實際行為取決於瀏覽器、回應標頭與使用者設定。

CSS

  • .download-list／.download-list__item：清單與項目。
  • .download-list__link／.download-list__title：可用連結與不可用項目的標題。
  • .download-list__meta／.download-list__item--unavailable：檔案資訊與不可用狀態。

親和力

  • 使用原生清單與連結，不加入額外 role 或自訂鍵盤操作；檔案標題應能單獨辨識。
  • 將格式與容量放在同一個可見連結中，讓使用者只瀏覽連結時也能辨識檔案類型與大小。

參考