在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中文网其他相关文章！