ក្បាលចំណងជើងធំ

សម្រាប់អេក្រង់ដែលចូលទៅជ្រៅ ដែលអក្សរធំមួយបន្ទាត់ត្រូវប្រាប់ឲ្យច្បាស់ថានៅកន្លែងណា។

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

ប្រភព

HTML CSS

<header class="dc-bh">
  <div class="dc-bh__bar">
    <button class="dc-bh__back" type="button">
      <span aria-hidden="true">‹</span><span class="dc-sr">뒤로</span>
    </button>
    <button class="dc-bh__act" type="button">
      <span aria-hidden="true">⇪</span><span class="dc-sr">공유</span>
    </button>
  </div>
  <h1 class="dc-bh__title">알림 설정</h1>
  <p class="dc-bh__desc">푸시와 이메일을 따로 켜고 끌 수 있어요. 중요한 배송 알림은 항상 보냅니다.</p>
</header>

.dc-bh {
  padding: 0 var(--dc-4) var(--dc-5);
  padding-top: var(--dc-safe-top);
  background: var(--dc-surface);
  border-bottom: 1px solid var(--dc-line);
  font-family: var(--dc-font);
}
.dc-bh__bar {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 calc(-1 * var(--dc-2));
  padding-top: var(--dc-1);
}
.dc-bh__back,
.dc-bh__act {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 0; border-radius: var(--dc-r-full);
  background: transparent; color: var(--dc-text);
  line-height: 1; cursor: pointer;
  transition: background var(--dc-fast);
}
.dc-bh__back { font-size: 24px; }
.dc-bh__act { font-size: 18px; }
.dc-bh__back:active,
.dc-bh__act:active { background: var(--dc-sunken); }
.dc-bh__title {
  margin: var(--dc-3) 0 0;
  font-size: 28px; font-weight: 800; line-height: 1.25;
  letter-spacing: -.02em; color: var(--dc-text);
}
.dc-bh__desc {
  margin: var(--dc-2) 0 0;
  font-size: 14px; line-height: 1.6; color: var(--dc-text-sub);
  max-width: 34em;
}
.dc-bh--compact { padding-bottom: var(--dc-2); }
.dc-bh--compact .dc-bh__bar { align-items: center; gap: var(--dc-1); }
.dc-bh--compact .dc-bh__title {
  flex: 1 1 auto; min-width: 0;
  margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

របៀបប្រើ

មួយអេក្រង់មួយ h1 ហើយចំណងជើងធំនោះគឺ h1
ការពណ៌នាត្រឹមមួយឃ្លា និយាយតែអ្វីដែលចំណងជើងនិយាយមិនបាន
ពេលរំកិល បង្រួមចំណងជើងធំទៅជាបន្ទាត់តូចមួយ — រក្សាប៊ូតុងថយក្រោយនៅកន្លែងដើម
ប្រើនៅអេក្រង់ចូលមួយកម្រិត មិនមែនអេក្រង់ទីមួយរបស់ថេប

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

បើខ្វះ --dc-safe-top ក្នុង padding-top ប៊ូតុងថយក្រោយនឹងនៅក្រោមរបារស្ថានភាព
សញ្ញា ‹ ទទេដោយគ្មានឈ្មោះ dc-sr នឹងត្រូវអានតែថា «តំណ»
ទំហំ ២៨px ងាយចុះបន្ទាត់; ពីរបន្ទាត់បាន បីបន្ទាត់មានន័យថាចំណងជើងវែងពេក

បន្ទាប់

របារថេបខាងក្រោម ការរុករក កម្មវិធី

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

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

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