चिप कार्य

सूचीमाथि सर्त लगाउने वा छोटो काम चलाउने साना बटनको लहर — विकल्प स्क्रिनको चौडाइभन्दा धेरै हुँदा प्रयोग गर्ने टुक्रा।

प्रत्यक्ष पूर्वावलोकन

स्रोत

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 राख्नु; रङ मात्र बदले स्क्रिन रिडरलाई थाहै हुन्न
हटाउने बटनलाई चिपको पूरै उचाइ दिनु, तब औंला पुग्छ
तेर्सो स्क्रोल किबोर्डले पुग्दैन — प्रत्येक चिप ट्याबले छुन सक्ने हुनुपर्छ

अर्को

तल्लो कार्य बार बटन र क्रिया एप

तैरिने कार्य बटन बटन र क्रिया एप

आइकन कार्य लहर बटन र क्रिया एप

सेगमेन्ट टगल बटन र क्रिया एप वेब