ឈីបសកម្មភាព

ជួរប៊ូតុងតូចនៅលើបញ្ជី សម្រាប់ត្រងលទ្ធផល ឬបញ្ជូនសកម្មភាពខ្លី ធ្វើឡើងសម្រាប់ជម្រើសច្រើនជាងទទឹងអេក្រង់។

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

ប្រភព

HTML CSS

<div class="dc-chipwrap">
  <div class="dc-chips" role="group" aria-label="공종으로 걸러보기">
    <button class="dc-chip" type="button" aria-pressed="true">전체</button>
    <button class="dc-chip" type="button" aria-pressed="false">철근</button>
    <button class="dc-chip" type="button" aria-pressed="false">용접</button>
    <button class="dc-chip" type="button" aria-pressed="false">도장</button>
    <button class="dc-chip" type="button" aria-pressed="false">전기</button>
  </div>
  <p class="dc-chipwrap__note">지금 걸려 있는 조건이 줄 맨 앞에 보이도록 둡니다.</p>
</div>

.dc-chipwrap {
  padding: var(--dc-4) 0;
  background: var(--dc-bg);
  font-family: var(--dc-font);
}
.dc-chips {
  display: flex;
  gap: var(--dc-2);
  padding: 0 var(--dc-4);
  overflow-x: auto;
  scrollbar-width: none;
}
.dc-chips::-webkit-scrollbar { display: none; }
.dc-chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--dc-1);
  min-height: 44px;
  padding: 0 var(--dc-4);
  border: 1px solid var(--dc-line-bold);
  border-radius: var(--dc-r-full);
  background: var(--dc-surface);
  color: var(--dc-text-sub);
  font-family: var(--dc-font);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dc-fast), border-color var(--dc-fast), color var(--dc-fast);
}
button.dc-chip:hover { background: var(--dc-sunken); }
.dc-chip[aria-pressed="true"] {
  border-color: var(--dc-brand);
  background: var(--dc-brand-soft);
  color: var(--dc-brand-text);
}
.dc-chip__ico {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.dc-chip--tag {
  padding-right: 0;
  border-style: dashed;
  cursor: default;
}
.dc-chip__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  align-self: stretch;
  margin-left: var(--dc-1);
  border: 0;
  border-radius: 0 var(--dc-r-full) var(--dc-r-full) 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.dc-chip__x:hover { background: var(--dc-sunken); }
.dc-chipwrap__note {
  margin: var(--dc-3) 0 0;
  padding: 0 var(--dc-4);
  font-size: 12px;
  line-height: 1.6;
  color: var(--dc-text-mute);
}

របៀបប្រើ

ដាក់លក្ខខណ្ឌកំពុងប្រើនៅដើមជួរ ដើម្បីឃើញដោយមិនបាច់អូសទទឹង
នាមសម្រាប់ឈីបជ្រើសរើស កិរិយាសព្ទសម្រាប់ឈីបធ្វើសកម្មភាព; មិនលាយពីរប្រភេទក្នុងជួរតែមួយ
ពេលជួរលើស ត្រូវអូសទទឹងជំនួសការចុះបន្ទាត់ ហើយទុកឲ្យឃើញគែមដែលកាត់

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

ឈីបជ្រើសរើសត្រូវមាន aria-pressed; ប្រែពណ៌តែមួយ កម្មវិធីអានមិនដឹងអ្វីទេ
ឲ្យប៊ូតុងលុបមានកម្ពស់ពេញឈីប ដើម្បីម្រាមដៃចុចបាន
ការអូសទទឹងតែមួយ ក្ដារចុចទៅមិនដល់ — ឈីបនីមួយៗត្រូវអាចចុច Tab ដល់

បន្ទាប់

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

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

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

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