របៀបប្រើ Dropdown នៅក្នុង Bootstrap

• techfree


• 18 Oct 2016

ម៉ឺនុយទម្លាក់ចុះ (dropdown menu) មួយគឺជាម៉ឺនុយ toggleable មួយដែលអនុញ្ញាតឱ្យអ្នកប្រើ ជ្រើសតម្លៃមួយពីបញ្ជីដែលបានកំណត់ជាមុន:

ពន្យល់ឧទាហរណ៍ខាងលើ

• .dropdown class បង្ហាញម៉ឺនុយទម្លាក់ចុះ។
• ដើម្បីបើកម៉ឺនុយទម្លាក់ចុះ, ប្រើប៊ូតុងមួយ ឬ តំណភ្ជាប់ជាមួយនឹង class នៃការ .dropdown-toggle និង data-toggle= “dropdown” attribute។
• .caret class បង្កើតរូបតំណាងសញ្ញាព្រួញ (), ដែលបង្ហាញថាប៊ូតុងទម្លាក់ចុះ។
• ដើម្បីបង្កើតម៉ឺនុយទម្លាក់ចុះត្រូវបន្ថែម .dropdown-menu class ទៅក្នុងធាតុ <ul> ។

១) បែងចែកទម្លាក់ចុះ (Dropdown Divider)
.divider class ត្រូវបានប្រើដើម្បីចែកតំណភ្ជាប់ដោយឡែកពីគ្នានៅក្នុងម៉ឺនុយទម្លាក់ចុះផ្ដេក:

យើងបានលទ្ធផលដូចខាងក្រោម

២) Header ម៉ឺនុយទម្លាក់ចុះ (Dropdown Header)
.dropdown-header class បានប្រើដើម្បីបន្ថែម headers នៅក្នុងម៉ឺនុយទម្លាក់ចុះ:

យើងបានលទ្ធផលដូចខាងក្រោម

៣) បិទធាតុ (Disable an Item)
ដើម្បីបិទធាតុនៅក្នុងម៉ឺនុយទម្លាក់ចុះប្រើ .disabled class:

យើងបានលទ្ធផលដូចខាងក្រោម

៤) ទីតាំងទម្លាក់ចុះ (Dropdown Position)
ដើម្បី right-align ទម្លាក់ចុះ ត្រូវបន្ថែម .dropdown-menu-right ទៅក្នុងធាតុ .dropdown-menu:

យើងបានលទ្ធផលដូចខាងក្រោម

៥) ទម្លាក់ឡើង (Dropup)
ប្រសិនបើអ្នកចង់ម៉ឺនុយទម្លាក់ចុះដើម្បីជំនួសឱ្យការធ្លាក់ចុះ ទៅជាទម្លាក់ឡើង ផ្លាស់ប្តូរធាតុ <div> ជាមួយ class= “dropdown” ទៅជា “dropup”:

យើងបានលទ្ធផលដូចខាងក្រោម