எதிர்வினையுடன் அணுகக்கூடிய முன்னேற்றப் பட்டியை எவ்வாறு உருவாக்குவது

முன்னேற்றப் பார்கள் பயனர் ஈடுபாட்டிற்கு சிறந்தவை, ஏனெனில் அவை அடைய ஒரு இலக்கை வழங்குகின்றன. ஆதாரத்தில் காத்திருக்கும் வலைப்பக்கத்தைப் பார்த்துக் கொண்டிருப்பதற்குப் பதிலாக, ஒரு முன்னேற்றப் பட்டி நிரப்பப்படுவதைக் காண்கிறீர்கள். முன்னேற்றப் பட்டைகள் பார்வையுள்ள பயனர்களுக்கு மட்டுமே இருக்கக்கூடாது. உங்கள் முன்னேற்றப் பட்டியை அனைவரும் எளிதாகப் புரிந்து கொள்ள முடியும்.

ரியாக்ட் மூலம் அணுகக்கூடிய முன்னேற்றப் பட்டியை எப்படி உருவாக்குவது?

அன்றைய வீடியோவை உருவாக்கவும்

முன்னேற்றப் பட்டை கூறுகளை உருவாக்கவும்

ProgressBar.js எனப்படும் புதிய கூறுகளை உருவாக்கி, பின்வரும் குறியீட்டைச் சேர்க்கவும்:

const ProgressBar = ({progress}) => { 
    return ( 
        <div> 
            <div role="progressbar" 
                 aria-valuenow={progress} 
                 aria-valuemin={0} 
                 aria-valuemax={100}> 
                <span>{`${progress}%`}</span> 
            </div> 
        </div> 
    ); 
}; 
   
export default ProgressBar;

முதல் div உறுப்பு கொள்கலன் மற்றும் இரண்டாவது div உண்மையான முன்னேற்றப் பட்டியாகும். ஸ்பான் உறுப்பு முன்னேற்றப் பட்டியின் சதவீதத்தைக் கொண்டுள்ளது.

ராம் குச்சிகள் பொருத்த வேண்டுமா?

அணுகல்தன்மை நோக்கங்களுக்காக, இரண்டாவது பிரிவு பின்வரும் பண்புக்கூறுகளைக் கொண்டுள்ளது:

முன்னேற்றப்பட்டியின் பங்கு.
முன்னேற்றப் பட்டியின் தற்போதைய மதிப்பைக் குறிக்க aria-valuenow.
முன்னேற்றப் பட்டியின் குறைந்தபட்ச மதிப்பைக் குறிக்க aria-valuemin.
முன்னேற்றப் பட்டியின் அதிகபட்ச மதிப்பைக் குறிக்க aria-valuemax.

இந்த மதிப்புகளுக்கு HTML இயல்புநிலையாக இருப்பதால், முன்னேற்றப் பட்டி அதிகபட்சம் மற்றும் குறைந்தபட்ச மதிப்புகள் 0 மற்றும் 100 ஆக இருந்தால், aria-valuemin மற்றும் aria-valuemax பண்புக்கூறுகள் தேவையில்லை.

ஆண்ட்ராய்டுக்கான சிறந்த பெரிய விசைப்பலகை பயன்பாடு

முன்னேற்றப் பட்டியை ஸ்டைலிங் செய்தல்

நீங்கள் இன்லைன் ஸ்டைல்களைப் பயன்படுத்தி முன்னேற்றப் பட்டியை வடிவமைக்கலாம் அல்லது a சிஎஸ்எஸ்-இன்-ஜேஎஸ் லைப்ரரி போன்ற பாணி-கூறுகள் . இந்த இரண்டு அணுகுமுறைகளும் கூறுகளிலிருந்து CSS க்கு முட்டுகளை அனுப்புவதற்கான எளிய வழியை வழங்குகின்றன.

இந்த செயல்பாடு உங்களுக்குத் தேவை, ஏனெனில் முன்னேற்றப் பட்டியின் அகலம் முட்டுக்களாக அனுப்பப்பட்ட முன்னேற்ற மதிப்பைப் பொறுத்தது.

நீங்கள் இந்த இன்லைன் பாணிகளைப் பயன்படுத்தலாம்:

const container = { 
    height: 20, 
    width: "100%", 
    backgroundColor: "#fff", 
    borderRadius: 50, 
    margin: 50 
} 
  
const bar = { 
    height: "100%", 
    width: `${progress}%`, 
    backgroundColor: "#90CAF9", 
    borderRadius: "inherit", 
} 
  
const label = { 
    padding: "1rem", 
    color: "#000000", 
}

கீழே காட்டப்பட்டுள்ளபடி பாணிகளைச் சேர்க்க, கூறுகளின் திரும்பப் பகுதியை மாற்றவும்:

<div style={container}> 
    <div style={bar} role="progressbar" 
        aria-valuenow={progress} 
        aria-valuemin={0} 
        aria-valuemax={100}> 
        <span style={label} >{`${progress}%`}</span> 
    </div> 
</div>

முன்னேற்றப் பட்டியை இப்படி ரெண்டர் செய்யவும்:

ஆண்ட்ராய்டில் லினக்ஸை எப்படி நிறுவுவது

<ProgressBar progress={50}/>

இது 50 சதவீதம் நிறைவடைந்த ஒரு முன்னேற்றப் பட்டியைக் காட்டுகிறது.

எதிர்வினையில் கூறுகளை உருவாக்குதல்

உங்கள் பயன்பாட்டின் எந்தப் பகுதியிலும் நீங்கள் மீண்டும் பயன்படுத்தக்கூடிய சதவீதங்களுடன் அணுகக்கூடிய முன்னேற்றப் பட்டியை இப்போது உருவாக்கலாம். ரியாக்ட் மூலம், நீங்கள் இது போன்ற சுயாதீன UI கூறுகளை உருவாக்கலாம் மற்றும் அவற்றை சிக்கலான பயன்பாட்டின் கட்டுமானத் தொகுதிகளாகப் பயன்படுத்தலாம்.