如何解决如何使难度栏动态化?
我有一个称为难度栏的组件。 我想根据难度级别使其动态(例如,对于初学者,仅第一个点背景被着色而其他未着色;对于中级,仅前两个点被着色,依此类推...) 我正在使用顺风CSS。 请帮我。
import React from 'react'
const DifficultyBar = () => {
return (
<div class="max-w-xl mx-4 my-2">
<p className="pb-2 px-2 font-bold">Beginner</p>
<div class="flex pb-3">
<div class="flex-1 z-10">
<div class="w-6 h-6 bg-secondary mx-0 rounded-full border-2 border-secondary">
</div>
</div>
<div class="w-full align-center items-center align-middle content-center flex">
<div class="w-full items-center align-middle align-center flex-1">
<div class="bg-white border-2 -ml-2 rounded-full border-secondary py-xs w-full"></div>
</div>
</div>
<div class="flex-1 z-10">
<div class="w-6 h-6 bg-white -ml-4 rounded-full border-2 border-secondary">
</div>
</div>
<div class="w-full align-center items-center align-middle content-center flex">
<div class="w-full items-center align-middle align-center flex-1">
<div class="bg-white border-2 -ml-2 rounded-full border-secondary py-xs w-full"></div>
</div>
</div>
<div class="flex-1 z-10">
<div class="w-6 h-6 bg-white -ml-4 rounded-full border-2 border-secondary">
</div>
</div>
<div class="w-full align-center items-center align-middle content-center flex">
<div class="w-full items-center align-middle align-center flex-1">
<div class="bg-white border-2 -ml-2 rounded-full border-secondary py-xs w-full"></div>
</div>
</div>
<div class="flex-1 z-10">
<div class="w-6 h-6 bg-white border-2 border-secondary -ml-4 rounded-full">
</div>
</div>
</div>
</div>
)
}
export default DifficultyBar
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。