ប៊ូតុងបំបែកជាចំណែក

សម្រាប់ជ្រើសរើសរបៀបមើលបញ្ជីតែមួយ ដោយមានជម្រើសពីពីរទៅបួន ហើយអេក្រង់ប្រែភ្លាមពេលជ្រើស។

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

ប្រភព

HTML CSS

<fieldset class="dc-seg">
  <legend class="dc-sr">작업 상태로 보기</legend>
  <div class="dc-seg__track">
    <input class="dc-seg__in" type="radio" name="dc-seg-state" id="dc-seg-all" checked />
    <label class="dc-seg__lb" for="dc-seg-all">전체</label>
    <input class="dc-seg__in" type="radio" name="dc-seg-state" id="dc-seg-run" />
    <label class="dc-seg__lb" for="dc-seg-run">진행 중</label>
    <input class="dc-seg__in" type="radio" name="dc-seg-state" id="dc-seg-done" />
    <label class="dc-seg__lb" for="dc-seg-done">완료</label>
  </div>
</fieldset>

.dc-seg {
  margin: 0;
  padding: var(--dc-4);
  border: 0;
  background: var(--dc-bg);
  font-family: var(--dc-font);
}
.dc-seg__track {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--dc-r-md);
  background: var(--dc-sunken);
}
.dc-seg__in {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.dc-seg__lb {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: var(--dc-1);
  min-height: 44px;
  padding: 0 var(--dc-3);
  border-radius: calc(var(--dc-r-md) - 3px);
  color: var(--dc-text-sub);
  font-family: var(--dc-font);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dc-fast), color var(--dc-fast);
}
.dc-seg__in:checked + .dc-seg__lb {
  background: var(--dc-surface);
  color: var(--dc-text);
  box-shadow: var(--dc-sh-1);
}
.dc-seg__in:focus-visible + .dc-seg__lb {
  outline: 2px solid var(--dc-brand);
  outline-offset: 2px;
}
.dc-seg__ico {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

របៀបប្រើ

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

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

សូមសង់ដោយ input radio ដើម្បីឲ្យគ្រាប់ចុចទិស និងកម្មវិធីអានចាត់ទុកជាក្រុមមួយ
ចំណែកនីមួយៗកម្ពស់យ៉ាងតិច 44px; ចំណែកតូចចង្អៀតងាយចុចខុស

បន្ទាប់

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

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

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

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