ប៊ូតុងបែងចែក

ពេលប្រាំបួនក្នុងដប់នាក់ចុចរឿងដូចគ្នា ប៉ុន្តែម្នាក់ទៀតក៏ត្រូវមានផ្លូវដែរ។

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

ប្រភព

HTML CSS

<div class="dc-split">
  <button type="button" class="dc-split__main">저장</button>
  <details class="dc-split__more">
    <summary class="dc-split__toggle">
      <svg class="dc-split__caret" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M6 9l6 6 6-6"></path></svg>
      <span class="dc-sr">저장 옵션 더 보기</span>
    </summary>
    <ul class="dc-split__list">
      <li><button type="button" class="dc-split__item">다른 이름으로 저장</button></li>
      <li><button type="button" class="dc-split__item">사본 만들기</button></li>
      <li><button type="button" class="dc-split__item">서식만 저장</button></li>
    </ul>
  </details>
</div>

.dc-split { display: inline-flex; }
.dc-split__main {
  min-height: 44px; padding: 0 var(--dc-5);
  border: 1px solid var(--dc-brand); border-radius: var(--dc-r-sm) 0 0 var(--dc-r-sm);
  background: var(--dc-brand); color: var(--dc-text-on);
  font-family: var(--dc-font); font-size: 15px; font-weight: 600; line-height: 1;
  white-space: nowrap;
  transition: background var(--dc-fast);
}
.dc-split__main:hover { background: var(--dc-brand-hi); }
.dc-split__more { position: relative; }
.dc-split__toggle {
  display: flex; align-items: center; justify-content: center;
  width: 44px; min-height: 44px;
  border: 1px solid var(--dc-brand);
  border-left-color: color-mix(in srgb, var(--dc-text-on) 35%, var(--dc-brand));
  border-radius: 0 var(--dc-r-sm) var(--dc-r-sm) 0;
  background: var(--dc-brand); color: var(--dc-text-on);
  cursor: pointer; list-style: none;
  transition: background var(--dc-fast);
}
.dc-split__toggle::-webkit-details-marker { display: none; }
.dc-split__toggle:hover { background: var(--dc-brand-hi); }
.dc-split__caret { width: 18px; height: 18px; transition: transform var(--dc-fast); }
.dc-split__more[open] .dc-split__caret { transform: rotate(180deg); }
.dc-split__list {
  position: absolute; top: calc(100% + var(--dc-1)); right: 0; z-index: 2;
  min-width: 210px; padding: var(--dc-1);
  border: 1px solid var(--dc-line); border-radius: var(--dc-r-md);
  background: var(--dc-surface); box-shadow: var(--dc-sh-2);
}
.dc-split__item {
  display: block; width: 100%; min-height: 44px; padding: 0 var(--dc-3);
  border: 0; border-radius: var(--dc-r-xs);
  background: transparent; color: var(--dc-text);
  font-family: var(--dc-font); font-size: 14px; text-align: left;
}
.dc-split__item:hover { background: var(--dc-sunken); }

របៀបប្រើ

ដាក់សកម្មភាពប្រើច្រើនបំផុតនៅផ្នែកខាងឆ្វេង រីឯផ្សេងទៀតលាក់ក្រោយសញ្ញាព្រួញ
មឺនុយដាក់តែទម្រង់ប្រែប្រួលនៃសកម្មភាពដើម (រក្សាទុក / រក្សាទុកជាឈ្មោះថ្មី)
បើលាក់តែមួយមុខ ប្រើប៊ូតុងពីរដាច់ដោយឡែកវិញច្បាស់ជាង

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

សញ្ញាព្រួញក៏ត្រូវមានឈ្មោះ — 'មើលជម្រើសរក្សាទុកបន្ថែម' ក្នុង dc-sr
នៅគែមខាងស្ដាំ មឺនុយនឹងលើសអេក្រង់; ត្រូវប្ដូរទិសបើក
សង់ដោយ details ដូច្នេះបើកបានទោះគ្មានស្គ្រីប

បន្ទាប់

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

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

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

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