ជំហាននៃដំណើរការ

ឧទាហរណ៍

 
<div class="cgds stepper">
  <div class="stepper-item is-completed">
    <div class="stepper-marker">1</div>
    <div class="stepper-detail">
      <p><b>ឈ្មោះជំហាន</b></p>
    </div>
  </div>
  <div class="stepper-item is-active">
    <div class="stepper-marker">2</div>
    <div class="stepper-detail">
      <p><b>ឈ្មោះជំហាន</b></p>
    </div>
  </div>
  <div class="stepper-item">
    <div class="stepper-marker">3</div>
    <div class="stepper-detail">
      <p><b>ឈ្មោះជំហាន</b></p>
    </div>
  </div>
</div>

        

ធាតុផ្សំ

1. លេខលំដាប់របស់ជំហាន៖ បង្ហាញពីលំដាប់លំដោយរបស់ដំណើរការ។
2. ឈ្មោះជំហាន៖ ប្រាប់អ្នកប្រើប្រាស់ពីគោលបំណងរបស់ជំហាននីមួយៗ។
3. របាចង្អុលបង្ហាញ៖ របារនេះតម្រៀបជំហានរបស់ដំណើរការតាមលំដាប់លំដោយ។

គម្លាត

នៅក្នុងជំហាននៃដំណើរការ
រក្សាគម្លាតយ៉ាងតិច 32px នៅលើអ័ក្សដេកចន្លោះជំហាននីមួយៗ។
រក្សាគម្លាតយ៉ាងតិច 4px នៅលើអ័ក្សឈរចន្លោះរូបលេខលំដាប់របស់ជំហាន និងឈ្មោះជំហាន។

គោលការណ៍ណែនាំនៃការប្រើប្រាស់

ជំហាននៃដំណើរការគួរប្រើប្រាស់នៅពេល៖

• មានជំហានច្រើននៅក្នុងទម្រង់បែបបទមួយ។

ជំហាននៃដំណើរការមិនគួរប្រើប្រាស់នៅពេល៖

• ប្រសិនបើទម្រង់បែបបទមួយមានជំហានតិចជាងបីជំហាន យើងមិនចាំបាច់ត្រូវប្រើជំហាននៃដំណើរការនោះទេ។

គោលការណ៍ណែនាំនៃការរចនា

ឈ្មោះជំហានត្រូវសរសេរឱ្យខ្លី ប៉ុន្តែច្បាស់
ឈ្មោះជំហានត្រូវប្រាប់អ្នកប្រើប្រាស់ពីគោលបំណងរបស់ជំហាននីមួយៗឱ្យបានច្បាស់លាស់ដោយប្រើតែពាក្យមួយឬពីរតែប៉ុណ្ណោះ។

តម្រៀបជំហានតាមលំដាប់លំដោយត្រឹមត្រូវ
បង្ហាញឈ្មោះជំហាននីមួយៗតាមលំដាប់ និងពីឆ្វេងទៅស្តាំដើម្បីបង្ហាញប្រាប់អ្នកប្រើប្រាស់ថាពួកគាត់កំពុងនៅក្នុងដំណើរការមួយដែលមានច្រើនជំហាន។ អនុញ្ញាតឱ្យពួកគាត់ត្រឡប់ក្រោយបានដើម្បីអាចកែប្រែបាន។

រំលេចជំហានដែលពួកគាត់ស្ថិតនៅក្នុង
ដើម្បីឱ្យអ្នកប្រើប្រាស់ដឹងថាពួកគាត់ស្ថិតនៅក្នុងជំហានណាមួយនាពេលឥឡូវនេះ។ ធ្វើបែបនេះអាចផ្តល់ព័ត៌មានមួយចំនួនទៅកាន់អ្នកប្រើប្រាស់ដូចជា បង្ហាញថាតើនៅពេលនេះពួកគាត់កំពុងស្ថិតនៅជំហានកាលទីប៉ុន្មាន និងនៅសល់ប៉ុន្មានជំហានទៀតដែលពួកគាត់ត្រូវបំពេញ។ ប្រើសញ្ញាបង្ហាញដូចជាសញ្ញាគ្រីសដើម្បីបញ្ជាក់ថាជំហានមុនៗត្រូវបានបញ្ចប់រួចរាល់ហើយ។

ខ្នាតសម្រាប់រចនា

$steps-maker-default-color: $gray-400 !default;
$steps-marker-default-border: .25rem solid $white !default;
$steps-default-color: $gray-300 !default;
$steps-completed-color: $primary !default;
$steps-active-color: $primary !default;
$steps-divider-height: .25rem !default;