Jassif Team Institution

CSS Pagination

CSS பயன்படுத்தி பதிலளிக்கக்கூடிய பக்கமேற்றத்தை எவ்வாறு உருவாக்குவது என்பதைக் கற்றுக்கொள்ளுங்கள்.

நீங்கள் நிறைய பக்கங்களைக் கொண்ட ஒரு வலைத்தளத்தைக் கொண்டிருந்தால், ஒவ்வொரு பக்கத்திலும் ஒரு வகையான பக்கமேற்றத்தைச் சேர்க்க விரும்பலாம்.

பக்கமேற்றம் பொதுவாக ஒரு வரிசை இணைப்புகளாகும், ஒரு வரிசைப்படுத்தப்படாத பட்டியலில் (<ul>) பொதிக்கப்பட்டுள்ளது. ஒவ்வொரு இணைப்பும் ஒரு தனிப்பட்ட பக்க எண்ணைக் குறிக்கிறது. கூடுதலாக "முந்தைய" மற்றும் "அடுத்தது" கட்டுப்பாடுகள் உள்ளன:

Simple Pagination

.pagination {
  display: flex;
  justify-content: center;
  list-style: none; /* பட்டியல் புல்லட்களை அகற்று */
  padding: 0px;
}

.pagination li a {
  display: block; /* இணைப்புகள் பட்டியல் உருப்படியை நிரப்பட்டும் */
  padding: 8px 12px;
  text-decoration: none;
  border: 1px solid gray;
  color: black;
  margin: 0 4px;
  border-radius: 5px; /* வட்டமான எல்லைகளைச் சேர் */
}

Pagination With an Active Class

பயனர் எந்தப் பக்கத்தில் இருக்கிறார் என்பதைக் குறிக்க .active வகுப்புடன் தற்போது செயலில் உள்ள பக்கத்தை முன்னிலைப்படுத்தவும்:

.pagination li a.active {
  background-color: #4CAF50;
  color: white;
}

Pagination With a Disabled Class

பயனர் தற்போது கடைசிப் பக்கத்தில் இருந்தால், "அடுத்தது" பொத்தான் செயலிழக்கப்பட வேண்டும்.

இங்கே, நாம் ஒரு .disabled வகுப்பைச் சேர்க்கிறோம், மற்றும் "அடுத்தது" பொத்தானை செயலிழக்க வண்ணம், கர்சர் மற்றும் சுட்டிக்காட்டி-நிகழ்வுகள் பண்புகளை அமைக்கிறோம்:

.pagination li a.disabled {
  color: #dddddd;
  cursor: not-allowed;
  pointer-events: none;
}

Pagination with Hover Effect

பயனர் ஒவ்வொரு பக்க இணைப்பின் மேல் சுட்டியை நகர்த்தும்போது பின்னணி நிறத்தை மாற்ற :hover தேர்வியைப் பயன்படுத்தவும்:

.pagination li a:hover:not(.active) {
  background-color: lightgray;
}

Transition Effect on Hover

பக்க இணைப்புகளில் transition பண்பைச் சேர்த்து, சுட்டி நகர்த்தும் போது மாற்ற விளைவை உருவாக்கவும்:

.pagination li a {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  border: 1px solid gray;
  color: black;
  margin: 0 4px;
  border-radius: 5px;
  transition: background-color 1s;
}

Breadcrumb Pagination

பக்கமேற்றத்தின் மற்றொரு மாறுபாடு "ப்ரெட்க்ரம்ப்" என்று அழைக்கப்படுகிறது:

ul.breadcrumb {
  padding: 8px;
  list-style: none;
  background-color: #eee;
}

ul.breadcrumb li {display: inline;}
ul.breadcrumb li a {color: green;}

ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: "/\00a0";
}

Exercise