របារថេបខាងក្រោម

ប្រើពេលកម្មវិធីមានផ្នែកធំៗប្រាំ ឬតិចជាង ដែលអ្នកប្រើគួរទៅដល់ដោយចុចម្តង ពីកន្លែងណាក៏បាន។

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

ប្រភព

HTML CSS

<nav class="dc-tb" aria-label="주요 메뉴">
  <ul class="dc-tb__list">
    <li>
      <a class="dc-tb__item" href="#" aria-current="page">
        <span class="dc-tb__ico" aria-hidden="true">⌂</span>
        <span class="dc-tb__lbl">홈</span>
      </a>
    </li>
    <li>
      <a class="dc-tb__item" href="#">
        <span class="dc-tb__ico" aria-hidden="true">⌕</span>
        <span class="dc-tb__lbl">검색</span>
      </a>
    </li>
    <li>
      <a class="dc-tb__item" href="#">
        <span class="dc-tb__ico" aria-hidden="true">＋</span>
        <span class="dc-tb__lbl">등록</span>
      </a>
    </li>
    <li>
      <a class="dc-tb__item" href="#">
        <span class="dc-tb__ico" aria-hidden="true">♡</span>
        <span class="dc-tb__lbl">찜</span>
        <span class="dc-tb__dot" aria-hidden="true"></span>
        <span class="dc-sr">새 소식 있음</span>
      </a>
    </li>
    <li>
      <a class="dc-tb__item" href="#">
        <span class="dc-tb__ico" aria-hidden="true">◉</span>
        <span class="dc-tb__lbl">내 정보</span>
      </a>
    </li>
  </ul>
</nav>

.dc-tb {
  padding-bottom: var(--dc-safe-bottom);
  background: var(--dc-surface);
  border-top: 1px solid var(--dc-line);
  font-family: var(--dc-font);
}
.dc-tb__list { display: flex; align-items: stretch; }
.dc-tb__list > li { flex: 1 1 0; min-width: 0; display: flex; }
.dc-tb__item {
  position: relative;
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  min-height: 56px; padding: var(--dc-2) var(--dc-1);
  color: var(--dc-text-mute); text-decoration: none;
  transition: color var(--dc-fast), background var(--dc-fast);
}
.dc-tb__item:active { background: var(--dc-sunken); }
.dc-tb__item[aria-current="page"] { color: var(--dc-brand-text); }
.dc-tb__ico { font-size: 20px; line-height: 1; }
.dc-tb__lbl {
  font-size: 11px; font-weight: 700; letter-spacing: -.01em;
  white-space: nowrap; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis;
}
.dc-tb__dot {
  position: absolute; top: 9px; right: calc(50% - 16px);
  width: 8px; height: 8px; border-radius: var(--dc-r-full);
  background: var(--dc-danger);
  box-shadow: 0 0 0 2px var(--dc-surface);
}
.dc-tb__badge {
  position: absolute; top: 5px; right: calc(50% - 22px);
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--dc-r-full);
  background: var(--dc-danger); color: var(--dc-text-on);
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px var(--dc-surface);
}
.dc-tb__item--raised { justify-content: flex-start; padding-top: var(--dc-1); }
.dc-tb__raise {
  display: grid; place-items: center;
  width: 46px; height: 46px; margin-top: -14px;
  border-radius: var(--dc-r-full);
  background: var(--dc-brand); color: var(--dc-text-on);
  font-size: 24px; line-height: 1;
  box-shadow: var(--dc-sh-2);
}

របៀបប្រើ

ដាក់តែ ៣–៥ ប៉ុស្តិ៍; ផ្នែកទីប្រាំមួយគួរដាក់ក្នុងថេបគណនី
រក្សាអក្សរស្លាក — រូបតំណាងតែប៉ុណ្ណោះ មិនមែនគ្រប់គ្នាអានចេញទេ
ថេបកំពុងបើកត្រូវដាក់ aria-current="page" មិនត្រឹមតែពណ៌ទេ
ចុចថេបកំពុងបើកម្តងទៀត គួររមូរត្រឡប់ទៅខាងលើបំផុត

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

បើខ្វះ --dc-safe-bottom ក្នុង padding របារ home នៃ iPhone នឹងបិទថេប
ប្រាំប៉ុស្តិ៍ មានន័យថាមួយៗ ៧៨px; ស្លាកវែងត្រូវបង្រួម
លេខនៅ badge មើលឃើញតែនឹងភ្នែក — សរសេរម្តងទៀតក្នុង span dc-sr

បន្ទាប់

របារកម្មវិធីខាងលើ ការរុករក កម្មវិធី

ម៉ឺនុយថត ការរុករក កម្មវិធី

ការគ្រប់គ្រងជាចំណែក ការរុករក កម្មវិធី

ថេបរំកិល ការរុករក កម្មវិធី