如何用Phoenix 1.7默认TailwindUI实现环形进度条？

问题解答 #

1. 基于默认Tailwind CSS/Tailwind UI创建环形进度条组件 #

Phoenix 1.7默认配置没有内置环形进度条，但可以通过CSS圆锥渐变结合Tailwind工具类手动实现，无需额外依赖。以下是可复用的LiveView组件示例：

组件代码（HEEx）

defmodule MyAppWeb.RadialProgressComponent do
  use MyAppWeb, :live_component

  @impl true
  def render(assigns) do
    ~H"""
    <div class="relative w-24 h-24">
      <!-- 背景圆环 -->
      <div class="absolute inset-0 rounded-full bg-gray-200 dark:bg-gray-700"></div>
      <!-- 进度圆环 -->
      <div 
        class="absolute inset-0 rounded-full bg-blue-600 dark:bg-blue-500"
        style={"clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 50% 100%); transform: rotate({@progress * 3.6}deg);"}
      ></div>
      <!-- 中心遮罩 + 进度文本 -->
      <div class="absolute inset-2 rounded-full bg-white dark:bg-gray-800 flex items-center justify-center">
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{@progress}%</span>
      </div>
    </div>
    """
  end
end

使用方式

在LiveView模板中调用组件：

<.live_component 
  module={MyAppWeb.RadialProgressComponent} 
  id="upload-progress" 
  progress={45} 
/>

动态更新进度（LiveView）

在LiveView事件处理中更新进度值：

def handle_event("update-progress", %{"value" => value}, socket) do
  progress = String.to_integer(value)
  {:noreply, assign(socket, progress: progress)}
end

2. 是否存在原生可用的环形进度条组件？ #

目前Phoenix 1.7默认集成的Tailwind UI组件集里没有原生的环形进度条组件，官方Tailwind UI组件库也未包含这类组件。你找到的常规进度条是默认提供的唯一进度类组件，环形进度条需自行实现。

内容的提问来源于stack exchange，提问作者Flame_Phoenix