Foundation - 進度條基本知識

上一個

下一個

描述

進度條包含兩個元素：容器即 .progress 和一個計量器，即 .progress-meter。進度條的狀態透過 role 和 aria- 屬性簡化。

以下列表闡明瞭這些屬性的用途 −

aria-valuemin − 它表示進度條的最小值。
aria-valuemax − 它表示進度條的最大值。
aria-valuenow − 它表示進度條的當前值。
aria-valuetext − 如果進度條的值不是數字，則新增此屬性，其中必須包含進度條值的人類可讀版本。

要填充進度條，您必須向內部計量器新增 width CSS 屬性。

示例

以下示例演示瞭如何在 Foundation 中使用 progress bar。

現場演示

<html>
   <head>
      <title>Progress Bar</title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/css/foundation.min.css" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js" crossorigin="anonymous"></script>

   </head>

   <body>
      <h2>Progress Bar</h2>
      <div class = "progress" role = "progressbar" tabindex = "0" aria-valuenow = "0" aria-valuemin = "0" aria-valuemax = "100">
         <div class = "progress-meter"></div>
      </div>

      <div class = "progress" role = "progressbar" tabindex = "0" aria-valuenow = "80" aria-valuemin = "0" aria-valuetext = "80 percent" aria-valuemax = "100">
         <div class = "progress-meter" style = "width: 80%"></div>
      </div>

      <script>
         $(document).ready(function() {
            $(document).foundation();
         })
      </script>
   </body>
</html>

輸出

讓我們執行以下步驟，看看上面給出的程式碼如何運作 −

將上面給出的 HTML 程式碼儲存為 progress_basics.html 檔案。
在瀏覽器中開啟此 HTML 檔案，將顯示如下所示的輸出。

foundation_media.htm

列印頁面

上一個

下一個