ក្រុមប៊ូតុង

សម្រាប់សកម្មភាពពីរបីដែលមានទម្ងន់ស្មើគ្នា និងធ្វើលើវត្ថុតែមួយ។

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

ប្រភព

HTML CSS

<div class="dc-bgrp" role="group" aria-label="선택한 문서 작업">
  <button type="button" class="dc-bgrp__btn">복사</button>
  <button type="button" class="dc-bgrp__btn">이동</button>
  <button type="button" class="dc-bgrp__btn">이름 바꾸기</button>
</div>

.dc-bgrp { display: inline-flex; }
.dc-bgrp__btn {
  min-height: 44px; padding: 0 var(--dc-4);
  border: 1px solid var(--dc-line-field); border-radius: 0;
  background: var(--dc-surface); color: var(--dc-text);
  font-family: var(--dc-font); font-size: 14px; font-weight: 600; line-height: 1;
  white-space: nowrap;
  transition: background var(--dc-fast);
}
.dc-bgrp__btn:hover { background: var(--dc-sunken); }
.dc-bgrp__btn:focus-visible { position: relative; z-index: 1; }
.dc-bgrp__btn + .dc-bgrp__btn { margin-left: -1px; }
.dc-bgrp__btn:first-child { border-radius: var(--dc-r-sm) 0 0 var(--dc-r-sm); }
.dc-bgrp__btn:last-child { border-radius: 0 var(--dc-r-sm) var(--dc-r-sm) 0; }
.dc-bgrp--vert { flex-direction: column; align-items: stretch; }
.dc-bgrp--vert .dc-bgrp__btn + .dc-bgrp__btn { margin-left: 0; margin-top: -1px; }
.dc-bgrp--vert .dc-bgrp__btn:first-child { border-radius: var(--dc-r-sm) var(--dc-r-sm) 0 0; }
.dc-bgrp--vert .dc-bgrp__btn:last-child { border-radius: 0 0 var(--dc-r-sm) var(--dc-r-sm); }
.dc-bgrp--full { display: flex; width: 100%; }
.dc-bgrp--full .dc-bgrp__btn { flex: 1; }

របៀបប្រើ

ដាក់ជាក្រុមតែសកម្មភាពទម្ងន់ស្មើគ្នា និងគោលដៅតែមួយ
បីទៅប្រាំ។ លើសនោះ ផ្លាស់ទៅមឺនុយ 'បន្ថែម'
ដាក់ aria-label លើក្រុម ដើម្បីដឹងថាធ្វើលើអ្វី

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

បើអ្នកប្រើកំពុងជ្រើស (របៀបមើល ចន្លោះពេល) នោះជាតូហ្គល មិនមែនក្រុមប៊ូតុង
អេក្រង់តូចត្រូវប្ដូរទៅទម្រង់បញ្ឈរ ឬពេញទទឹង; អក្សរចុះជួរថ្មីធ្វើឱ្យខ្សែភ្ជាប់រលាយ

បន្ទាប់

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

ប៊ូតុង ប៊ូតុង និងសកម្មភាព វេប

ប៊ូតុងជំនួយ ប៊ូតុង និងសកម្មភាព វេប

ប៊ូតុងប្រកបដោយហានិភ័យ ប៊ូតុង និងសកម្មភាព វេប