我有一个小型 Phoenix 1.7 应用程序,我正在尝试使用默认的 TailwindUI 组件添加径向进度条:https://tailwindui.com/components
对我来说不幸的是,我只能找到正常的进度条:
https://flowbite.com/docs/components/progress/
即:
<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
<div class="bg-blue-600 h-2.5 rounded-full" style="width: 45%"></div>
</div>
我发现的唯一径向进度条是使用 DaisyUI 的:
https://daisyui.com/components/radial-progress/
但是,我想避免安装任何额外的东西,我真的只想使用 Phoenix 1.7 附带的默认 tailwindUI 和 tailwindCSS
我认为你可能需要编写一些自定义 CSS 并用你的顺风类来调味。
您可以检查这个要点以使用 Tailwind 定制圆形进度条。
基本上,这就是您需要的:
// custom.css
.progress-ring__circle {
stroke-dasharray: 400, 400;
transition: stroke-dashoffset 0.35s;
transform: rotate(-90deg);
transform-origin: 50% 50%;
}
// component.html
<div class="relative w-40 h-40">
<svg class="w-full h-full" viewBox="0 0 100 100">
<!-- Background circle -->
<circle
class="text-gray-200 stroke-current"
stroke-width="10"
cx="50"
cy="50"
r="40"
fill="transparent"
></circle>
<!-- Progress circle -->
<circle
class="text-indigo-500 progress-ring__circle stroke-current"
stroke-width="10"
stroke-linecap="round"
cx="50"
cy="50"
r="40"
fill="transparent"
stroke-dashoffset="calc(400 - (400 * 45) / 100)"
></circle>
<!-- Center text -->
<text x="50" y="50" font-family="Verdana" font-size="12" text-anchor="middle" alignment-baseline="middle">70%</text>
</svg>
</div>
我希望这有帮助。祝你好运!
通过使用 Tailwind 和 Apline.js 检查一些示例,我能够分析代码并创建一个完全符合我想要的功能的组件。
此代码仅使用 Phoniex LiveView vanilla,没有额外的 CSS 没有额外的任何东西!
core_components
:
@doc """
Renders a progress bar for an ongoing operation.
## Examples
<.progress_bar hidden=false progress=15 />
<.progress_bar hidden=false progress=20 message="Activating system ..." />
<.progress_bar hidden=false class="cool-bar" />
"""
attr :hidden, :boolean, default: true, doc: "whether or not to show the progress bar"
attr :progress, :integer, default: 0, doc: "the current progress of the bar"
attr :message, :string, default: "Operation in progress ...", doc: "the message to show while the bar is progressing"
attr :class, :string, default: nil
def progress_bar(assigns) do
assigns = assign(assigns, :circumference, 2 * 22 / 7 * 120)
assigns = assign(assigns, :offset, assigns.circumference - assigns.progress / 100 * assigns.circumference)
~H"""
<div class={@class} hidden={@hidden}>
<div class="flex items-center justify-center">
<p class="text-lg font-semibold"><%= @message %></p>
</div>
<div class="flex items-center justify-center">
<svg class="transform -rotate-90 w-72 h-72">
<circle cx="145" cy="145" r="120" stroke-width="30" fill="transparent" class="stroke-gray-700" />
<circle cx="145" cy="145" r="120" stroke-width="30" fill="transparent"
stroke-dasharray={@circumference}
stroke-dashoffset={@offset}
class="stroke-indigo-500" />
</svg>
<span class="absolute text-5xl stroke-black"><%= @progress %></span>
</div>
</div>
"""
end
在
my_app_live.heex.html
中的用法:
<div class="min-h-full max-w-full mx-auto py-6 sm:px-6 lg:px-8">
<.progress_bar hidden={false} progress={40} message="Activating system ..." />
</div>
将产生以下内容:
有关我如何创建此内容的更多信息,请随时在 Elixir 的论坛帖子上查看整个故事:
https://elixirforum.com/t/radial-progress-bar-using-tailwinui/58098/10?u=fl4m3ph03n1x