Buttons
Buttons ក្នុង Bootstrap - មូលដ្ឋាន និងទ្រឹស្តី
Buttons គឺជាសមាសធាតុមួយដែលមានការប្រើប្រាស់ច្រើនបំផុតនៅលើគេហទំព័រ។ Bootstrap ផ្តល់នូវ button styles ជាច្រើនប្រភេទដែលរចនាស្អាត និងងាយស្រួលប្រើប្រាស់។
🎯 ហេតុអ្វី Buttons សំខាន់?
Buttons គឺជាចំណុចទំនាក់ទំនង (interaction point) សំខាន់បំផុតរវាងអ្នកប្រើប្រាស់និងគេហទំព័រ។ ពួកវាត្រូវបានប្រើសម្រាប់:
- ✅ ស្នើសុំសកម្មភាព - ឲ្យអ្នកប្រើធ្វើអ្វីមួយ (Submit, Buy, Download)
- ✅ Navigation - ទៅកាន់ទំព័រផ្សេង
- ✅ បើក/បិទ - បង្ហាញ ឬលាក់មាតិកា (Modal, Dropdown)
- ✅ ផ្លាស់ប្តូរស្ថានភាព - បិទ/បើក, លុប, កែ
📋 ប្រភេទ Buttons ក្នុង Bootstrap:
| ប្រភេទ | Class | ពណ៌ | ប្រើសម្រាប់ |
|---|---|---|---|
| Primary | .btn-primary |
ខៀវ | សកម្មភាពសំខាន់ (Submit, Save) |
| Secondary | .btn-secondary |
ប្រផេះ | សកម្មភាពបន្ទាប់បន្សំ (Cancel, Back) |
| Success | .btn-success |
បៃតង | សកម្មភាពជោគជ័យ (Confirm, Approve) |
| Danger | .btn-danger |
ក្រហម | សកម្មភាពគ្រោះថ្នាក់ (Delete, Remove) |
| Warning | .btn-warning |
លឿង | ព្រមាន (Caution, Warning) |
| Info | .btn-info |
ខៀវស្រាល | ព័ត៌មាន (Info, Help) |
| Light | .btn-light |
ស | រចនាស្រាល (Background ងងឹត) |
| Dark | .btn-dark |
ខ្មៅ | រចនាងងឹត (Background ស្រាល) |
| Link | .btn-link |
ដូចតំណភ្ជាប់ | រចនាដូច link ធម្មតា |
🎨 ការជ្រើសរើសពណ៌ Button ត្រឹមត្រូវ:
គោលការណ៍ណែនាំ (UI/UX Best Practices):
- 🔵 Primary (ខៀវ) - ប្រើសម្រាប់សកម្មភាពសំខាន់បំផុតតែមួយលើទំព័រ
ឧទាហរណ៍: ប៊ូតុង "ទិញឥឡូវ", "ចុះឈ្មោះ", "រក្សាទុក" - ⚫ Secondary (ប្រផេះ) - សកម្មភាពបន្ទាប់បន្សំ ឬមិនសូវសំខាន់
ឧទាហរណ៍: "បោះបង់", "ត្រឡប់ក្រោយ", "រំលង" - 🟢 Success (បៃតង) - បញ្ជាក់ការជោគជ័យ ឬសកម្មភាពវិជ្ជមាន
ឧទាហរណ៍: "អនុម័ត", "ទទួលយក", "បញ្ជូន" - 🔴 Danger (ក្រហម) - សកម្មភាពគ្រោះថ្នាក់ដែលមិនអាចត្រឡប់វិញ
ឧទាហរណ៍: "លុបគណនី", "លុបចោល", "បដិសេធ" - 🟡 Warning (លឿង) - សកម្មភាពដែលត្រូវប្រុងប្រយ័ត្ន
ឧទាហរណ៍: "កែប្រែទិន្នន័យ", "ផ្លាស់ប្តូរ", "ព្រមាន" - 🔵 Info (ខៀវស្រាល) - ផ្តល់ព័ត៌មានបន្ថែម
ឧទាហរណ៍: "មើលព័ត៌មាន", "ជំនួយ", "ព័ត៌មានលម្អិត"
⚠️ កំហុសទូទៅក្នុងការប្រើ Button Colors:
| កំហុស | ហេតុអ្វីខុស | ដំណោះស្រាយ |
|---|---|---|
| ប្រើ Primary ច្រើនពេក | អ្នកប្រើមិនដឹងថាអ្វីសំខាន់ | មាន Primary តែ 1 លើទំព័រ |
| ប្រើ Danger សម្រាប់កែប្រែ | បង្កភ័យអ្នកប្រើ | ប្រើ Warning ឬ Secondary |
| មិនមានពណ៌ខុសគ្នា | រំខានដល់ការយល់ | ប្រើពណ៌តាមគោលការណ៍ |
| ប្រើ Success សម្រាប់លុប | បញ្ចូលគ្នានឹងអត្ថន័យ | ប្រើ Danger សម្រាប់លុប |
📏 Button Sizes & Styles - ទំហំ និងរចនា
🔢 ទំហំ Button (Button Sizes):
Bootstrap ផ្តល់ទំហំ button ចំនួន 4 យ៉ាង:
| ទំហំ | Class | Height | Padding | ប្រើពេលណា |
|---|---|---|---|---|
| Large | .btn-lg |
~48px | 0.5rem 1rem | Button សំខាន់, Hero section |
| Default | (មិនចាំបាច់ class) | ~38px | 0.375rem 0.75rem | Button ធម្មតា |
| Small | .btn-sm |
~31px | 0.25rem 0.5rem | តារាង, Cards តូចៗ |
| Custom | CSS ផ្ទាល់ខ្លួន | ប្រែប្រួល | ប្រែប្រួល | ទំហំពិសេស |
🎨 Outline Buttons - ប៊ូតុងដែលមានតែគ្រោង:
Outline buttons មានតែborder ដោយមិនមានពណ៌ផ្ទៃខាងក្រោយ។ ពួកវាល្អសម្រាប់:
- ✅ រចនាស្រាល និងទំនើប
- ✅ ចំណាត់ថ្នាក់ទីពីរ (Secondary actions)
- ✅ ចៀសវាងការប្រើពណ៌ច្រើនពេក
- ✅ Hover effect ស្អាត
| រចនា | Class | ប្រើពេលណា |
|---|---|---|
| Solid (ពេញ) | .btn-primary |
សកម្មភាពសំខាន់ |
| Outline (គ្រោង) | .btn-outline-primary |
សកម្មភាពបន្ទាប់បន្សំ |
🔲 Block Buttons - ប៊ូតុងពេញទទឹង:
Bootstrap 5 លុប .btn-block class រួចហើយ។ ឥឡូវត្រូវប្រើ utility classes:
<!-- Bootstrap 4 (deprecated) -->
<button class="btn btn-primary btn-block">Full Width</button>
<!-- Bootstrap 5 (ថ្មី) -->
<div class="d-grid">
<button class="btn btn-primary">Full Width</button>
</div>
<!-- ឬប្រើ w-100 -->
<button class="btn btn-primary w-100">Full Width</button>🎯 ទំហំ Button តាម Mobile-First:
| ឧបករណ៍ | ទំហំសមរម្យ | មូលហេតុ |
|---|---|---|
| ទូរស័ព្ទ | Large (.btn-lg) | ងាយស្រួលចុចដោយម្រាមដៃ |
| Tablet | Default | សមតុល្យរវាងទំហំ និងទំនេរ |
| Desktop | Default/Small | មានទំនេរច្រើន, mouse ច្បាស់ |
🎛️ Button Groups & States - ក្រុម និងស្ថានភាព
👥 Button Groups - ក្រុមប៊ូតុង:
Button Groups អនុញ្ញាតឲ្យអ្នកដាក់ buttons ជាច្រើនជាប់គ្នាទៅជាមួយ។ ល្អសម្រាប់:
- ✅ Toolbar - ប្រដាប់កែសម្រួល (Bold, Italic, Underline)
- ✅ Pagination - ទំព័រទី 1, 2, 3...
- ✅ View modes - Grid view, List view
- ✅ Filters - All, Active, Completed
🎨 ប្រភេទ Button Groups:
| ប្រភេទ | Class | ពិពណ៌នា | ប្រើពេលណា |
|---|---|---|---|
| Basic Group | .btn-group |
ប៊ូតុងជាប់គ្នាផ្ដេក | Toolbar, Filters |
| Vertical Group | .btn-group-vertical |
ប៊ូតុងជាប់គ្នាបញ្ឈរ | Sidebar, Mobile menu |
| Toolbar | .btn-toolbar |
ក្រុមជាច្រើនជាប់គ្នា | Editor, Complex UI |
🔄 Button States - ស្ថានភាពប៊ូតុង:
Buttons អាចមានស្ថានភាពផ្សេងៗគ្នាដើម្បីបង្ហាញពីអាកប្បកិរិយារបស់វា:
| State | Class/Attribute | ពិពណ៌នា | ប្រើពេលណា |
|---|---|---|---|
| Active | .active |
ប៊ូតុងកំពុងជ្រើសរើស | Tab active, Filter active |
| Disabled | disabled attribute |
ប៊ូតុងមិនអាចចុចបាន | Form មិនត្រឹមត្រូវ, Loading |
| Loading | + Spinner | កំពុងដំណើរការ | រង់ចាំការឆ្លើយតប |
| Hover | :hover pseudo-class | ពណ៌ផ្លាស់ប្តូរពេលកណ្តុរលើ | ដោយស្វ័យប្រវត្តិ |
| Focus | :focus pseudo-class | ពណ៌ពន្លឺពេលចុច Tab | Accessibility |
♿ Accessibility សម្រាប់ Buttons:
ការធ្វើឲ្យ buttons accessible គឺសំខាន់ណាស់:
- ✅ ប្រើ
<button>- ជាជាង<div>ឬ<span> - ✅ មានអត្ថបទច្បាស់លាស់ - "ចុះឈ្មោះ" ជាជាង "ចុចទីនេះ"
- ✅ ប្រើ aria-label - សម្រាប់ icon buttons
- ✅ Focus state - ត្រូវមើលឃើញច្បាស់
- ✅ Keyboard navigation - អាចប្រើ Tab, Enter, Space
- ✅ Color contrast - អក្សរ និងផ្ទៃខាងក្រោយខុសគ្នាច្បាស់
🎨 ឧទាហរណ៍ Button States:
<!-- Active State -->
<button class="btn btn-primary active">Selected</button>
<!-- Disabled State -->
<button class="btn btn-primary" disabled>Disabled</button>
<!-- Loading State -->
<button class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm"></span>
Loading...
</button>
<!-- Icon Button with ARIA -->
<button class="btn btn-primary" aria-label="Delete">
<i class="bi bi-trash"></i>
</button>💡 Best Practices សម្រាប់ Button Usage:
| ធ្វើ ✅ | មិនធ្វើ ❌ |
|---|---|
| ប្រើអត្ថបទច្បាស់លាស់ (Save, Delete) | អត្ថបទមិនច្បាស់ (OK, ចុចទីនេះ) |
| មាន Primary button តែ 1 លើទំព័រ | Primary buttons ច្រើនពេក |
| ប្រើពណ៌តាមគោលការណ៍ | ប្រើពណ៌ចៃដន្យ |
| ទំហំសមរម្យ (44x44px+ mobile) | ទំហំតូចពេក (<40px) |
| Loading state ពេលរង់ចាំ | គ្មាន feedback ពេលចុច |
| Disabled ពេលមិនអាចប្រើ | លាក់button ចោល |