在SVG中創建UI組件

SVG賦能Web界面構建：探索自定義UI組件的無限可能

SVG在網頁界面構建方面展現出巨大的潛力。初學SVG可能略顯困難，但其規範設計初衷便是創建形狀，同時支持文本、鏈接和ARIA標籤等元素。雖然CSS也能實現部分相同效果，但在精確定位，特別是跨視窗和響應式開發方面，CSS的難度更大。

SVG的獨特之處在於其定位基於坐標系統，類似於遊戲“戰艦”。這意味著確定元素位置、繪製方式以及元素間的相對位置都非常直觀。 CSS定位主要用於佈局，這很好，因為文檔流中的元素彼此對應。但如果要創建具有重疊和精確放置元素的特定組件，這種特性反而會增加難度。

掌握SVG後，您可以繪製任何圖形，並使其在任何設備上都能縮放。甚至本網站也使用SVG創建自定義UI元素，例如上面的頭像（元數據！）。

本文不會涵蓋SVG的全部內容（您可以在這裡、這裡、這里和這裡學習一些基礎知識），但為了說明SVG為UI組件開髮帶來的可能性，讓我們討論一個具體的用例，並分解構建自定義組件的思路。

時間軸任務列表組件

最近，我在Netlify團隊參與了一個項目。我們需要向觀看者展示他們在課程視頻系列中當前觀看的視頻位置。換句話說，我們需要創建一個類似待辦事項列表的東西，但在完成項目時顯示整體進度。 （我們創建了一個免費的太空主題學習平台，非常酷炫。是的，我用了“非常酷炫”這個詞。）

效果如下：

我們該如何實現呢？我將分別展示Vue和React示例，以便您了解這兩種框架中的實現方式。

Vue版本

我們決定使用Next.js構建平台（為了試用我們自己的Netlify Next構建插件），但我更熟悉Vue，所以我用Vue編寫了初始原型，然後移植到React。

完整的CodePen演示： [此處應插入CodePen鏈接]

讓我們逐步分析代碼。首先，這是一個單文件組件（SFC），因此模板HTML、反應式腳本和作用域樣式都封裝在一個文件中。

我們將一些虛擬任務存儲在data中，包括每個任務是否已完成。我們還將創建一個方法，可以在點擊指令上調用該方法，以便切換狀態。

 export default {
  data() {
    return {
      tasks: [
        {
          name: 'thing',
          done: false
        },
        // ...
      ]
    };
  },
  methods: {
    selectThis(index) {
      this.tasks[index].done = !this.tasks[index].done
    }
  }
};

現在，我們要創建一個SVG，其viewBox根據元素數量靈活調整。我們還需要告訴屏幕閱讀器這是一個演示元素，我們將使用唯一ID“timeline”提供標題。 （獲取有關創建可訪問SVG的更多信息。）

<template>
  <div>
    <div>
      <svg :viewbox="`0 0 30 ${tasks.length * 50}`" aria-labelledby="timeline" fill="white" role="presentation" stroke="currentColor" width="30" xmlns="http://www.w3.org/2000/svg">
        <title>timeline element</title>
      </svg>
    </div>
  </div>
</template>

stroke設置為currentColor以提高靈活性——如果要在多個位置重用組件，它將繼承封裝div使用的顏色。

接下來，在SVG內部，我們要創建一個與任務列表長度相同的垂直線。線條非常簡單。我們有x1和x2值（線條在x軸上的繪製位置），類似地，還有y1和y2。

<line :y1="num2" :y2="tasks.length * num1 - num2" x1="10" x2="10"></line>

x軸始終保持在10，因為我們是從上向下繪製線條，而不是從左到右。我們將兩個數字存儲在data中：我們想要的間距，即num1，以及我們想要的邊距，即num2。

 data() {
  return {
    num1: 32,
    num2: 15,
    // ...
  }
}

y軸以num2開始，從末尾減去邊距。 tasks.length乘以間距num1。

現在，我們需要位於線條上的圓圈。每個圓圈都指示任務是否已完成。每個任務都需要一個圓圈，因此我們將使用v-for和唯一的鍵，即索引（在這裡使用是安全的，因為它們永遠不會重新排序）。我們將點擊指令與我們的方法連接起來，並將索引作為參數傳遞。

SVG中的圓圈由三個屬性組成。圓圈的中心位於cx和cy，然後我們用r繪製半徑。與線條一樣，cx從10開始。半徑為4，因為在這個比例下它是可讀的。 cy將像線條一樣進行間隔：索引乘以間距（num1），加上邊距（num2）。

最後，我們將使用三元運算符設置填充。如果任務已完成，則填充currentColor。如果沒有，則填充白色（或任何背景顏色）。例如，這可以使用一個傳遞背景的prop填充，其中包含淺色和深色圓圈。

<circle :cy="i * num1   num2" :fill="task.done ? 'currentColor' : 'white'" :key="task.name" cx="10" r="4" v-for="(task, i) in tasks"></circle>

最後，我們使用CSS網格對齊包含任務名稱的div。佈局方式大致相同，我們遍歷任務，並將其綁定到相同的點擊事件以切換已完成狀態。

<template>
  <div>
    <div :key="task.name" v-for="(task, i) in tasks">
      {{ task.name }}
    </div>
  </div>
</template>

React版本

這是React版本的最終結果。我們正在努力將其開源，以便您可以查看完整的代碼及其歷史記錄。以下是一些修改：

• 我們使用CSS模塊而不是Vue中的SFC
• 我們導入Next.js鏈接，因此我們不是切換“已完成”狀態，而是將用戶帶到Next.js中的動態頁面
• 我們使用的任務實際上是課程的階段——或者我們稱之為“任務”——它們在這裡被傳遞進來，而不是由組件持有。

其他大部分功能都相同:)

 // React 代碼片段(此處應粘貼完整的React代碼)

最終版本

您可以在這裡查看最終的運行版本：[此處應插入最終版本鏈接]

該組件足夠靈活，可以適應大小不同的列表、多個瀏覽器和響應式大小調整。它還使用戶能夠更好地了解他們在課程中的進度。

但這只是一個組件。您可以創建任意數量的UI元素：旋鈕、控件、進度指示器、加載器……可能性無限。您可以使用CSS或內聯樣式對其進行樣式設置，您可以根據prop、上下文或反應式數據對其進行更新，可能性無限！我希望這能為如何開發更引人入勝的Web UI元素打開一些思路。

以上是在SVG中創建UI組件的詳細內容。更多資訊請關注PHP中文網其他相關文章！