បញ្ជីការកំណត់

សម្រាប់បង្ហាញការកំណត់ជាក្រុមតែមួយ — អ្វីដែលបិទបើក និងអ្វីដែលជ្រើសរើស។

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

ប្រភព

HTML CSS

<section class="dc-stg">
  <h2 class="dc-stg__head">알림</h2>
  <ul class="dc-stg__group">
    <li class="dc-stg__row">
      <span class="dc-stg__main">
        <label class="dc-stg__label" for="dc-stg-assign">작업 배정 알림</label>
        <span class="dc-stg__desc">새 배정이 생기면 바로 알려 줍니다</span>
      </span>
      <input class="dc-stg__switch" type="checkbox" role="switch" id="dc-stg-assign" checked>
    </li>
    <li class="dc-stg__row">
      <span class="dc-stg__main">
        <label class="dc-stg__label" for="dc-stg-night">야간 방해 금지</label>
        <span class="dc-stg__desc">밤 10시부터 아침 7시까지 소리를 끕니다</span>
      </span>
      <input class="dc-stg__switch" type="checkbox" role="switch" id="dc-stg-night">
    </li>
    <li class="dc-stg__row dc-stg__row--link">
      <a class="dc-stg__open" href="#">
        <span class="dc-stg__label">알림 소리</span>
        <span class="dc-stg__value">기본음</span>
        <span class="dc-stg__arrow" aria-hidden="true">›</span>
      </a>
    </li>
  </ul>
</section>

.dc-stg {
  padding: var(--dc-4) 0 var(--dc-5);
  background: var(--dc-bg);
  font-family: var(--dc-font);
}
.dc-stg__head {
  margin: 0 0 var(--dc-2); padding: 0 var(--dc-4);
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  color: var(--dc-text-mute);
}
.dc-stg__group {
  margin: 0; padding: 0; list-style: none;
  background: var(--dc-surface);
  border-top: 1px solid var(--dc-line);
  border-bottom: 1px solid var(--dc-line);
}
.dc-stg__row {
  display: flex; align-items: center; gap: var(--dc-3);
  min-height: 60px; padding: var(--dc-3) var(--dc-4);
}
.dc-stg__row + .dc-stg__row { border-top: 1px solid var(--dc-line); }
.dc-stg__row--link { padding: 0; }
.dc-stg__main {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.dc-stg__label { font-size: 15px; color: var(--dc-text); cursor: pointer; }
.dc-stg__desc { font-size: 12px; line-height: 1.5; color: var(--dc-text-mute); }
.dc-stg__switch {
  position: relative; flex: 0 0 auto;
  appearance: none; -webkit-appearance: none;
  width: 52px; height: 32px; margin: 0; border: none;
  border-radius: var(--dc-r-full);
  background: var(--dc-line-field);
  cursor: pointer;
  transition: background var(--dc-fast);
}
.dc-stg__switch::before { content: ""; position: absolute; inset: -6px; }
.dc-stg__switch::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 26px; height: 26px; border-radius: var(--dc-r-full);
  background: var(--dc-surface); box-shadow: var(--dc-sh-1);
  transition: transform var(--dc-fast);
}
.dc-stg__switch:checked { background: var(--dc-brand); }
.dc-stg__switch:checked::after { transform: translateX(20px); }
.dc-stg__open {
  flex: 1 1 auto; display: flex; align-items: center; gap: var(--dc-2);
  min-height: 60px; padding: var(--dc-3) var(--dc-4);
  color: inherit; text-decoration: none;
  transition: background var(--dc-fast);
}
.dc-stg__open:active { background: var(--dc-sunken); }
.dc-stg__open .dc-stg__label { flex: 1 1 auto; }
.dc-stg__open--danger .dc-stg__label { color: var(--dc-danger); font-weight: 700; }
.dc-stg__value { font-size: 14px; color: var(--dc-text-mute); }
.dc-stg__arrow { font-size: 20px; line-height: 1; color: var(--dc-text-mute); }
.dc-stg__check { font-size: 16px; font-weight: 700; color: var(--dc-brand-text); }
.dc-stg__note {
  margin: var(--dc-3) 0 0; padding: 0 var(--dc-4);
  font-size: 12px; line-height: 1.6; color: var(--dc-text-mute);
}

របៀបប្រើ

ដាក់ការកំណត់ដែលទាក់ទងគ្នាជាក្រុម ហើយដាក់ចំណងជើងខ្លីសម្រាប់ក្រុមនីមួយៗ
បិទបើកប្រើកុងតាក់; ជ្រើសមួយក្នុងច្រើនប្រើតម្លៃជាមួយព្រួញ
ការផ្លាស់ប្ដូររក្សាទុកភ្លាម — មិនត្រូវដាក់ប៊ូតុងរក្សាទុកនៅខាងក្រោម

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

កុងតាក់នីមួយៗត្រូវភ្ជាប់ label ដើម្បីចុចអក្សរក៏បិទបើកបាន
ជួរគ្រោះថ្នាក់ (ចេញពីគណនី លុបគណនី) ដាក់ជាក្រុមដោយឡែកនៅខាងក្រោម

បន្ទាប់

ជួរបញ្ជី ការបង្ហាញព័ត៌មាន កម្មវិធី

បញ្ជីកាត ការបង្ហាញព័ត៌មាន កម្មវិធី

សារពពុះ ការបង្ហាញព័ត៌មាន កម្មវិធី

ជួរការជូនដំណឹង ការបង្ហាញព័ត៌មាន កម្មវិធី