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

សម្រាប់សកម្មភាពប៉ុន្មានដែលមានទម្ងន់ស្មើគ្នា ដូចជាចូលចិត្ត មតិ ចែករំលែក ដាក់ជាប់គ្នានៅក្រោមប្រកាស ឬរូបថត។

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

ប្រភព

HTML CSS

<div class="dc-iwrap">
  <p class="dc-iwrap__body">현장 사진 3장을 올렸습니다. 확인 부탁드립니다.</p>
  <div class="dc-irow" role="group" aria-label="게시물 동작">
    <button class="dc-ibtn" type="button" aria-pressed="false">
      <svg class="dc-ibtn__ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20s-7-4.5-7-9.5A4 4 0 0 1 12 7a4 4 0 0 1 7 3.5C19 15.5 12 20 12 20z" /></svg>
      <span class="dc-sr">좋아요</span>
    </button>
    <button class="dc-ibtn" type="button">
      <svg class="dc-ibtn__ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M21 12a8 8 0 0 1-11.3 7.3L4 21l1.7-5.7A8 8 0 1 1 21 12z" /></svg>
      <span class="dc-sr">댓글 쓰기</span>
    </button>
    <button class="dc-ibtn" type="button">
      <svg class="dc-ibtn__ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 16V4m0 0L8 8m4-4 4 4" /><path d="M5 14v4a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4" /></svg>
      <span class="dc-sr">공유</span>
    </button>
    <span class="dc-irow__gap"></span>
    <button class="dc-ibtn" type="button" aria-pressed="false">
      <svg class="dc-ibtn__ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 4h10a1 1 0 0 1 1 1v15l-6-4-6 4V5a1 1 0 0 1 1-1z" /></svg>
      <span class="dc-sr">저장</span>
    </button>
  </div>
</div>

.dc-iwrap {
  padding: var(--dc-4);
  background: var(--dc-surface);
  font-family: var(--dc-font);
}
.dc-iwrap__body {
  margin: 0 0 var(--dc-2);
  font-size: 15px;
  line-height: 1.6;
  color: var(--dc-text);
}
.dc-irow {
  display: flex;
  align-items: center;
  gap: var(--dc-1);
  margin-left: calc(var(--dc-2) * -1);
}
.dc-irow__gap { flex: 1; }
.dc-ibtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: var(--dc-r-sm);
  background: none;
  color: var(--dc-text-sub);
  cursor: pointer;
  transition: background var(--dc-fast), color var(--dc-fast);
}
.dc-ibtn:hover {
  background: var(--dc-sunken);
  color: var(--dc-text);
}
.dc-ibtn__ico {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dc-ibtn[aria-pressed="true"] {
  color: var(--dc-brand-text);
}
.dc-ibtn--col {
  flex-direction: column;
  gap: 2px;
  min-width: 56px;
  min-height: 52px;
  padding: var(--dc-1) var(--dc-2);
}
.dc-ibtn__label {
  font-family: var(--dc-font);
  font-size: 11px;
  line-height: 1.2;
}
.dc-topbar {
  display: flex;
  align-items: center;
  gap: var(--dc-1);
  padding: var(--dc-2) var(--dc-2);
  padding-top: calc(var(--dc-2) + var(--dc-safe-top));
  background: var(--dc-surface);
  border-bottom: 1px solid var(--dc-line);
}
.dc-topbar__title {
  flex: 1;
  margin: 0;
  padding-left: var(--dc-1);
  font-family: var(--dc-font);
  font-size: 16px;
  font-weight: 600;
  color: var(--dc-text);
}

របៀបប្រើ

ច្រើនបំផុតបួនក្នុងមួយជួរ; ដែលនៅសល់ដាក់ក្នុងមឺនុយបន្ថែម
ដាក់តែសកម្មភាពទម្ងន់ដូចគ្នា; ការលុបដែលពិបាកត្រឡប់ មិនគួរនៅទីនេះ
បន្ថែមអក្សរលើរូបតំណាងដែលងាយយល់ច្រឡំ ដូចជាចែករំលែក និងរក្សាទុក

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

ប៊ូតុងមានតែរូបតំណាងរាល់មួយ ត្រូវមានឈ្មោះក្នុង dc-sr
តំបន់ចុចគឺប៊ូតុង មិនមែនរូប: មិនតូចជាង 44×44px
ពេលធ្វើជារបារលើថេរ ត្រូវបន្ថែម --dc-safe-top បើមិនដូច្នេះស្នាមចាក់នឹងបាំងចំណងជើង

បន្ទាប់

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

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

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

ប៊ូតុងបិទបើកចូលចិត្ត ប៊ូតុង និងសកម្មភាព កម្មវិធី