时间戳

首页 > 解决方案 > 如何使难度条动态化？

html - 如何使难度条动态化？

问题描述

我有一个名为难度栏的组件。我想根据难度级别使其动态化（即对于初学者来说，只有第一个点背景是彩色的，而对于中级来说，只有前两个点是彩色的等等......）我正在使用顺风反应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

标签： htmlcssreactjsjsxtailwind-css

解决方案

推荐阅读