ប៊ូតុងបិទបើកចូលចិត្ត

សម្រាប់សកម្មភាពដែលបិទបើកនៅនឹងកន្លែង ដោយមិនប្ដូរអេក្រង់ មិនចុចរក្សាទុក គ្រាន់តែស្ថានភាពប្រែ។

មើលជាមុនផ្ទាល់

ប្រភព

HTML CSS

<div class="dc-likebox">
  <input class="dc-like__in" type="checkbox" id="dc-like-post" />
  <label class="dc-like" for="dc-like-post">
    <svg class="dc-like__ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20.3 10.6 19C6.5 15.3 4 13 4 10.2A4.2 4.2 0 0 1 8.2 6c1.5 0 2.9.7 3.8 1.9A4.7 4.7 0 0 1 15.8 6 4.2 4.2 0 0 1 20 10.2c0 2.8-2.5 5.1-6.6 8.8z" /></svg>
    <span class="dc-like__txt">좋아요</span>
  </label>
</div>

.dc-likebox {
  display: flex;
  align-items: center;
  padding: var(--dc-4);
  background: var(--dc-surface);
  font-family: var(--dc-font);
}
.dc-like__in {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.dc-like {
  display: inline-flex;
  align-items: center;
  gap: var(--dc-2);
  min-height: 44px;
  padding: 0 var(--dc-3);
  border-radius: var(--dc-r-full);
  color: var(--dc-text-sub);
  font-family: var(--dc-font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dc-fast), color var(--dc-fast);
}
.dc-like:hover { background: var(--dc-sunken); }
.dc-like__ico {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
  transition: transform var(--dc-fast), fill var(--dc-fast);
}
.dc-like__txt { line-height: 1.2; }
.dc-like__n {
  min-width: 2ch;
  font-variant-numeric: tabular-nums;
  color: var(--dc-text-sub);
}
.dc-like__in:checked + .dc-like {
  color: var(--dc-danger);
  background: var(--dc-danger-soft);
}
.dc-like__in:checked + .dc-like .dc-like__ico {
  fill: currentColor;
  stroke: currentColor;
  transform: scale(1.12);
}
.dc-like__in:checked + .dc-like .dc-like__n { color: var(--dc-danger); }
.dc-like__in:focus-visible + .dc-like {
  outline: 2px solid var(--dc-brand);
  outline-offset: 2px;
}
.dc-like--round {
  justify-content: center;
  min-width: 44px;
  padding: 0;
}

របៀបប្រើ

ប្រែរូបភ្លាមពេលចុច; ការរង់ចាំចម្លើយពីម៉ាស៊ីនបម្រើមុនធ្វើឲ្យកម្មវិធីដូចគាំង
ពេលបង្ហាញចំនួន ត្រូវបូកការចុចរបស់អ្នកប្រើចូលភ្លាម
រូបរាងត្រូវបង្ហាញថាចុចម្ដងទៀតគឺលុបចោល

ចំណុចត្រូវប្រុងប្រយ័ត្ន

កុំប្រើពណ៌តែមួយបង្ហាញស្ថានភាពបើក; ត្រូវប្រែការបំពេញ ឬកម្រាសបន្ទាត់ផង
សង់ដោយ checkbox នោះកម្មវិធីអានប្រាប់បើក/បិទដោយខ្លួនឯង — មិនត្រូវប្រើ div ជាមួយ click ទេ
ទម្រង់មានតែរូបតំណាង ត្រូវមានឈ្មោះ dc-sr និងតំបន់ចុច 44×44px

បន្ទាប់

របារសកម្មភាពខាងក្រោម ប៊ូតុង និងសកម្មភាព កម្មវិធី

ប៊ូតុងសកម្មភាពអណ្តែត ប៊ូតុង និងសកម្មភាព កម្មវិធី

ជួរប៊ូតុងរូបតំណាង ប៊ូតុង និងសកម្មភាព កម្មវិធី

ប៊ូតុងបំបែកជាចំណែក ប៊ូតុង និងសកម្មភាព កម្មវិធី វេប