இந்த கட்டுரை வலைப்பக்கத்தில் நிலைப்படுத்தப்பட்ட உறுப்புகளின் இடத்தைக் கட்டுப்படுத்தப் பயன்படுத்தக்கூடிய பயன்பாடுகளை விளக்குகிறது.
டெயில்விண்ட் பயன்பாடுகள் நிலைப்படுத்தப்பட்ட உறுப்புகளின் இடத்தைக் கட்டுப்படுத்தப் பயன்படுகிறதா?
டெயில்விண்ட் CSS பயன்பாடானது, கிடைமட்ட அல்லது செங்குத்து அச்சில் நிலைநிறுத்தப்பட்ட கூறுகளை வைப்பதைக் குறிப்பாகக் கையாளுகிறது. மேல் | வலது | கீழே | விட்டு ”. மற்ற பயன்பாடுகளைப் போலவே, பல்வேறு இடங்களில் நிலைப்படுத்தப்பட்ட உறுப்பை அமைக்கக்கூடிய பல்வேறு வகுப்புகளையும் இது வழங்குகிறது, இந்த வகுப்புகளில் சில கீழே கூறப்பட்டுள்ளன:
- இன்செட்-{placementValue}
- தொடக்கம்-{placementValue}
- top-{placementValue}
- முடிவு-{placementValue}
- கீழே-{placementValue}
- இடது-{placementValue}
- வலது-{placementValue}
இப்போது, இந்த வகுப்புகளில் சிலவற்றை சிறந்த புரிதலுக்காகப் பயன்படுத்த ஒரு நடைமுறை உதாரணத்தைப் பார்ப்போம்.
எடுத்துக்காட்டு: டெயில்விண்ட் CSS பயன்பாடுகளைப் பயன்படுத்தி நிலைப்படுத்தப்பட்ட உறுப்புகளின் இடம்
இந்த எடுத்துக்காட்டில், கீழே காட்டப்பட்டுள்ளபடி, வலைப்பக்கத்தில் வெவ்வேறு இடங்களில் நிலைப்படுத்தப்பட்ட உறுப்பை வைக்க மேலே விவரிக்கப்பட்ட பயன்பாடு பயன்படுத்தப்படும்:
< உடல் வர்க்கம் = 'கிரிட் கிரிட்-கோல்ஸ்-3' >
< div வர்க்கம் = 'relative h-32 w-32 bg-orange-200 p-4 m-4 text-center justify-Stretch rounded' >
< div வர்க்கம் = 'முழுமையான இடது-0 மேல்-0 h-16 w-16 bg-blue-400 வட்டமான p-4' > பொருள் 1 < / div >
< / div >
< div வர்க்கம் = 'relative h-32 w-32 bg-orange-200 p-4 m-4 text-center justify-Stretch rounded' >
< div வர்க்கம் = 'absolute inset-x-0 top-0 h-16 bg-blue-400 rounded p-4' > பொருள் 2 < / div >
< / div >
< div வர்க்கம் = 'relative h-32 w-32 bg-orange-200 p-4 m-4 text-center justify-Stretch rounded' >
< div வர்க்கம் = 'absolute inset-0 bg-blue-400 rounded p-4' > பொருள் 3 < / div >
< / div >
< div வர்க்கம் = 'relative h-32 w-32 bg-orange-200 p-4 m-4 text-center justify-Stretch rounded' >
< div வர்க்கம் = 'absolute inset-y-0 right-0 w-16 bg-blue-400 rounded p-4' > பொருள் 4 < / div >
< / div >
< div வர்க்கம் = 'relative h-32 w-32 bg-orange-200 p-4 m-4 text-center justify-Stretch rounded' >
< div வர்க்கம் = 'முழுமையான கீழே-0 வலது-0 h-16 w-16 bg-blue-400 வட்டமான p-4' > பொருள் 5 < / div >
< / div >
< / உடல் >
மேலே உள்ள குறியீட்டின் விளக்கம்:
- முதலில் ஐந்து பெற்றோரை உருவாக்குங்கள்' div ” உறுப்புகள் மற்றும் தொடர்புடைய நிலை, உயரம், அகலம், பின்னணி, திணிப்பு, விளிம்பு மற்றும் பலவற்றை அமைக்க பல்வேறு டெயில்விண்ட் CSS வகுப்புகளைப் பயன்படுத்தவும்.
- அடுத்து, ஒரு உள்ளமைவை உருவாக்கவும் ' div ”உறுப்பு ஒவ்வொரு பெற்றோருக்கும் “டிவ்”. இந்த உள்ளமைக்கப்பட்ட 'டிவ்' உறுப்புக்கான இட ஒதுக்கீடு செய்யப்பட உள்ளது.
- பின்னர், ' என்ற டெயில்விண்ட் CSS வகுப்புகளைப் பயன்படுத்தவும் அறுதி ”,” ம ”,” இல் ”,” bg ”,” ப ', மற்றும் ' வட்டமானது 'உள்ளதை ஸ்டைல் செய்ய' div ”உறுப்பு.
- அதன் பிறகு, உள்ளமைக்கப்பட்ட பகுதி முதல் ஐந்து வரை, புதிய வகுப்புகளை ஒதுக்கவும் இடது-0 மேல்-0 ”,” இன்செட்-x-0 ”,” இன்செட்-0 ”,” inset-y-0 right-0 ', மற்றும் ' கீழே-0 வலது-0 ' முறையே.
- இந்த வகுப்புகள் மேல்-இடது மூலையில் உள்ளமைக்கப்பட்ட div உறுப்புகளின் நிலையை அமைக்கின்றன, மேல் நிலையை மூடி, முழு பெற்றோர் இடத்தையும் மூடி, வலது பக்கத்தை மூடி, மற்றும் கீழ்-இடது நிலையை முறையே மறைக்கும்.
செயல்பாட்டிற்குப் பிறகு, div உறுப்புகளின் முன்னோட்டம் இப்படி இருக்கும்:
நிலைப்படுத்தப்பட்ட கூறுகள் விரும்பிய நிலைகளில் வைக்கப்பட்டுள்ளன என்பதை வெளியீடு காட்டுகிறது.
முடிவுரை
' மேல் | வலது | கீழே | விட்டு ” டெயில்விண்ட் பயன்பாடு வலைப்பக்கத்தில் உறுப்புகளின் இடத்தைக் கட்டுப்படுத்தப் பயன்படுகிறது. ஒவ்வொரு நிலையையும் குறிவைக்க இது பல வகுப்புகளைப் பயன்படுத்துகிறது, பின்னர் தேவைகளுக்கு ஏற்ப தேர்ந்தெடுக்கப்பட்ட உறுப்பை அந்த இடத்தில் நகர்த்துகிறது. இந்த வகுப்புகள் முக்கியமாக நிலைப்படுத்தப்பட்ட கூறுகளை இடது, வலது, கீழ் மற்றும் மேல் இடங்களில் வைக்கின்றன. அவை முழுப் பகுதியையும் மறைப்பதற்கும், இடது அல்லது மேல் போன்ற குறிப்பிட்ட திசைகளை மறைப்பதற்கும், பலவற்றுக்கும் உதவலாம். நிலைப்படுத்தப்பட்ட உறுப்புகளின் இடத்தைக் கட்டுப்படுத்தப் பயன்படுத்தக்கூடிய பயன்பாடுகளை இந்தக் கட்டுரை வெற்றிகரமாக விளக்கியுள்ளது.