ប៊ូតុងរូបតំណាង

សម្រាប់សកម្មភាពដែលអត្ថន័យច្បាស់ដោយមិនចាំបាច់អក្សរ ក្នុងទីកន្លែងតូចចង្អៀត។

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

ប្រភព

HTML CSS

<button type="button" class="dc-ibtn" aria-pressed="false">
  <svg class="dc-ibtn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
    <path d="M12 20C9 18 5 15 5 11a4 4 0 0 1 7-2.6A4 4 0 0 1 19 11c0 4-4 7-7 9z"></path>
  </svg>
  <span class="dc-sr">관심 목록에 담기</span>
</button>

.dc-ibtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--dc-line-field); border-radius: var(--dc-r-sm);
  background: var(--dc-surface); color: var(--dc-text-sub);
  transition: background var(--dc-fast), color var(--dc-fast), border-color var(--dc-fast);
}
.dc-ibtn:hover { background: var(--dc-sunken); color: var(--dc-text); }
.dc-ibtn[aria-pressed="true"] {
  background: var(--dc-brand-soft); border-color: var(--dc-brand); color: var(--dc-brand-text);
}
.dc-ibtn[aria-pressed="true"] .dc-ibtn__icon { fill: currentColor; }
.dc-ibtn[disabled] {
  background: var(--dc-sunken); color: var(--dc-text-mute);
  border-color: var(--dc-line); cursor: not-allowed;
}
.dc-ibtn__icon { width: 20px; height: 20px; }
.dc-ibtn--quiet { background: transparent; border-color: transparent; }
.dc-ibtn--quiet:hover { background: var(--dc-sunken); }
.dc-ibtn--solid {
  background: var(--dc-brand); border-color: var(--dc-brand); color: var(--dc-text-on);
}
.dc-ibtn--solid:hover { background: var(--dc-brand-hi); color: var(--dc-text-on); }
.dc-ibtn--badge { position: relative; }
.dc-ibtn__dot {
  position: absolute; top: 7px; right: 7px;
  width: 8px; height: 8px; border-radius: var(--dc-r-full);
  background: var(--dc-danger);
  box-shadow: 0 0 0 2px var(--dc-surface);
}

របៀបប្រើ

ប្រើតែរូបតំណាងដែលគេស្គាល់ស្រាប់៖ បិទ ស្វែងរក ជូនដំណឹង បន្ថែម
រូបតំណាង 20px ក៏បាន ប៉ុន្តែតំបន់ចុចត្រូវ 44×44px
បើស្ថានភាពនៅជាប់ ត្រូវប្រាប់តាម aria-pressed

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

ត្រូវដាក់ឈ្មោះក្នុង dc-sr ជាដរាប — បើគ្មាន កម្មវិធីអានអេក្រង់និយាយតែ 'ប៊ូតុង'
កុំបង្រៀនអត្ថន័យថ្មីតាមរូបតំណាង; ដាក់អក្សរវិញលឿនជាង

បន្ទាប់

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

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

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

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