ផ្ទាំងបិទបើក

ការដាក់មាតិកានៅក្នុងប្រអប់មួយដែលអ្នកប្រើប្រាស់អាចចុចបិទឬបើកបាន។

មានជាទូទៅ

ឧទាហរណ៍

លំនាំដើម

នេះជាខ្លឹមសារនៅក្នុងស្រោមសំបុត្រទី១។ វាត្រូវបានបើកបង្ហាញដោយស្វ័យប្រវត្តិ រហូតទាល់តែប៊ូតុងដែលមាន class "collapse" ត្រូវបានចុច។ ធាតុផ្សេងៗទៀតដែលនៅក្នុងclass "collapse" មាននាទីរចនារូបរាងទាំងស្រុងរបស់ស្រោមសំបុត្រ ហើយក៏មាននាទីបើកបង្ហាញ ឬលាក់ខ្លឹមសារខាងក្នុងដោយប្រើវិធីផ្លាស់ប្តូររបស់ CSS ផងដែរ។ អ្នកអាចផ្លាស់ប្តូរការរចនារបស់ស្រោមសំបុត្របានដោយការកែប្រែកូដ CSS របស់ស្រោមសំបុត្រលំនាំដើមដែលយើងខ្ញុំបានសរសេរជូន។ គួរកត់សម្គាល់ផងដែរថាស្ទើរតែគ្រប់ធាតុរបស់ HTML ទាំងអស់អាចដាក់ចូលទៅក្នុងclass ឈ្មោះ .accordion-body បាន។

នេះជាខ្លឹមសារនៅក្នុងស្រោមសំបុត្រទី២។ វាត្រូវបានបើកលាក់ទុកដោយស្វ័យប្រវត្តិ រហូតទាល់តែប៊ូតុងដែលមាន class "collapse" ត្រូវបានចុច។ ធាតុផ្សេងៗទៀតដែលនៅក្នុងclass "collapse" មាននាទីរចនារូបរាងទាំងស្រុងរបស់ស្រោមសំបុត្រ ហើយក៏មាននាទីបើកបង្ហាញ ឬលាក់ខ្លឹមសារខាងក្នុងដោយប្រើវិធីផ្លាស់ប្តូររបស់ CSS ផងដែរ។ អ្នកអាចផ្លាស់ប្តូរការរចនារបស់ស្រោមសំបុត្របានដោយការកែប្រែកូដ CSS របស់ស្រោមសំបុត្រលំនាំដើមដែលយើងខ្ញុំបានសរសេរជូន។ គួរកត់សម្គាល់ផងដែរថាស្ទើរតែគ្រប់ធាតុរបស់ HTML ទាំងអស់អាចដាក់ចូលទៅក្នុងclass ឈ្មោះ .accordion-body បាន។

នេះជាខ្លឹមសារនៅក្នុងស្រោមសំបុត្រទី3។ វាត្រូវបានបិទទុកដោយស្វ័យប្រវត្តិ រហូតទាល់តែប៊ូតុងដែលមាន class "collapse" ត្រូវបានចុច។ ធាតុផ្សេងៗទៀតដែលនៅក្នុងclass "collapse" មាននាទីរចនារូបរាងទាំងស្រុងរបស់ស្រោមសំបុត្រ ហើយក៏មាននាទីបើកបង្ហាញ ឬលាក់ខ្លឹមសារខាងក្នុងដោយប្រើវិធីផ្លាស់ប្តូររបស់ CSS ផងដែរ។ អ្នកអាចផ្លាស់ប្តូរការរចនារបស់ស្រោមសំបុត្របានដោយការកែប្រែកូដ CSS របស់ស្រោមសំបុត្រលំនាំដើមដែលយើងខ្ញុំបានសរសេរជូន។ គួរកត់សម្គាល់ផងដែរថាស្ទើរតែគ្រប់ធាតុរបស់ HTML ទាំងអស់អាចដាក់ចូលទៅក្នុងclass ឈ្មោះ .accordion-body បាន។ 

 
<div class="cgds accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
              aria-expanded="true" aria-controls="collapseOne">
        <i class="bi bi-info-circle-fill"></i>
        ស្រោមសំបុត្រទី១
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
         data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>នេះជាខ្លឹមសារនៅក្នុងស្រោមសំបុត្រទី១។</strong> វាត្រូវបានបើកបង្ហាញដោយស្វ័យប្រវត្តិ រហូតទាល់តែប៊ូតុងដែលមាន class "collapse" ត្រូវបានចុច។
        ធាតុផ្សេងៗទៀតដែលនៅក្នុងclass "collapse" មាននាទីរចនារូបរាងទាំងស្រុងរបស់ស្រោមសំបុត្រ ហើយក៏មាននាទីបើកបង្ហាញ ឬលាក់ខ្លឹមសារខាងក្នុងដោយប្រើវិធីផ្លាស់ប្តូររបស់ CSS ផងដែរ។
        អ្នកអាចផ្លាស់ប្តូរការរចនារបស់ស្រោមសំបុត្របានដោយការកែប្រែកូដ CSS របស់ស្រោមសំបុត្រលំនាំដើមដែលយើងខ្ញុំបានសរសេរជូន។ គួរកត់សម្គាល់ផងដែរថាស្ទើរតែគ្រប់ធាតុរបស់ HTML ទាំងអស់អាចដាក់ចូលទៅក្នុងclass ឈ្មោះ
        <code>.accordion-body </code> បាន។
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
              data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        <i class="bi bi-info-circle-fill"></i>
        ស្រោមសំបុត្រទី២
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
         data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>នេះជាខ្លឹមសារនៅក្នុងស្រោមសំបុត្រទី២។</strong> វាត្រូវបានបើកលាក់ទុកដោយស្វ័យប្រវត្តិ រហូតទាល់តែប៊ូតុងដែលមាន class "collapse" ត្រូវបានចុច។
        ធាតុផ្សេងៗទៀតដែលនៅក្នុងclass "collapse" មាននាទីរចនារូបរាងទាំងស្រុងរបស់ស្រោមសំបុត្រ ហើយក៏មាននាទីបើកបង្ហាញ ឬលាក់ខ្លឹមសារខាងក្នុងដោយប្រើវិធីផ្លាស់ប្តូររបស់ CSS ផងដែរ។
        អ្នកអាចផ្លាស់ប្តូរការរចនារបស់ស្រោមសំបុត្របានដោយការកែប្រែកូដ CSS របស់ស្រោមសំបុត្រលំនាំដើមដែលយើងខ្ញុំបានសរសេរជូន។ គួរកត់សម្គាល់ផងដែរថាស្ទើរតែគ្រប់ធាតុរបស់ HTML ទាំងអស់អាចដាក់ចូលទៅក្នុងclass ឈ្មោះ 
        <code>.accordion-body </code> បាន។

      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
              data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        <i class="bi bi-info-circle-fill"></i>
        ស្រោមសំបុត្រទី៣
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
         data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>នេះជាខ្លឹមសារនៅក្នុងស្រោមសំបុត្រទី3។</strong> វាត្រូវបានបិទទុកដោយស្វ័យប្រវត្តិ រហូតទាល់តែប៊ូតុងដែលមាន class "collapse" ត្រូវបានចុច។
        ធាតុផ្សេងៗទៀតដែលនៅក្នុងclass "collapse" មាននាទីរចនារូបរាងទាំងស្រុងរបស់ស្រោមសំបុត្រ ហើយក៏មាននាទីបើកបង្ហាញ ឬលាក់ខ្លឹមសារខាងក្នុងដោយប្រើវិធីផ្លាស់ប្តូររបស់ CSS ផងដែរ។
        អ្នកអាចផ្លាស់ប្តូរការរចនារបស់ស្រោមសំបុត្របានដោយការកែប្រែកូដ CSS របស់ស្រោមសំបុត្រលំនាំដើមដែលយើងខ្ញុំបានសរសេរជូន។ គួរកត់សម្គាល់ផងដែរថាស្ទើរតែគ្រប់ធាតុរបស់ HTML ទាំងអស់អាចដាក់ចូលទៅក្នុងclass ឈ្មោះ
        <code>.accordion-body </code> បាន។
      </div>
    </div>
  </div>
</div>

ធាតុផ្សំ

ស្រោមសំបុត្របិទ

Closed Accordion Anatomy
  1. រូបសញ្ញា (ដាក់ក៏បានមិនដាក់ក៏បាន)៖ បង្ហាញប្រាប់អ្នកប្រើប្រាស់ពីមុខងាររបស់ស្រោមសំបុត្រ។
  2. ចំណងជើង៖ សរសេរប្រាប់ឱ្យអ្នកអានដឹងថាខ្លឹមសារនៅខាងក្នុងនិយាយពីអ្វី។
  3. ក្បាលស្រោមសំបុត្រ៖ សម្រាប់លាក់ខ្លឹមសារពីក្នុង។ វានឹងទម្លាក់ខ្លឹមសារជាសំណេរនេះចុះក្រោមពេលដែលអ្នកប្រើប្រាស់ចុចពីលើវា។

ស្រោមសំបុត្របើក

Open Accordion Anatomy
  1. រូបសញ្ញា (ដាក់ក៏បានមិនដាក់ក៏បាន)៖ បង្ហាញប្រាប់អ្នកប្រើប្រាស់ពីមុខងាររបស់ស្រោមសំបុត្រ។
  2. ចំណងជើង៖ សរសេរប្រាប់ឱ្យអ្នកអានដឹងថាខ្លឹមសារនៅខាងក្នុងជាអ្វី។ ចំណងជើងបានរចនាជាពណ៌ដិតក្នុងករណីដែលស្រោមសំបុត្រជាស្រោមសំបុត្របើក ឬស្រោមសំបុត្រត្រូវបានបើក។
  3. ប្រអប់សំបុត្រ៖ សម្រាប់ផ្ទុកខ្លឹមសារដោយបើកចំហ។
  4. សំណេរ៖ សរសេរប្រាប់ពីខ្លឹមសារដែលអ្នកចង់ឱ្យអ្នកប្រើប្រាស់អានពីក្នុងស្រោមសំបុត្រនេះ។

គម្លាត

Accordion Spacing
នៅក្នុងក្បាលស្រោមសំបុត្រ

រក្សាចន្លោះ 24px នៅគែមដេករបស់ប្រអប់និង 16px នៅគែមឈរ។ ក្បាលស្រោមសំបុត្រមានកម្ពស់ដើម 64px ចំណែកឯកម្ពស់របស់ប្រអប់សំបុត្រគឺអាស្រ័យទៅលើទំហំនៃសំណេរនៅខាងក្នុងស្រោមសំបុត្រ។

នៅក្នុងស្រោមសំបុត្រទាំងមូល
រក្សាចន្លោះ 24px នៅគែមដេករបស់ប្រអប់និង 16px នៅគែមឈរ និងចន្លោះ 16px ដូចគ្នាសម្រាប់គម្លាតពីចំណងជើងទៅខ្លឹមសារ។ ក្បាលស្រោមសំបុត្រមានកម្ពស់ដើម 64px។

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

ស្រោមសំបុត្រអនុញ្ញាតឱ្យអ្នកប្រើប្រាស់អានតែខ្លឹមសារណាដែលគាត់ចង់អាន។ ពួកគាត់សម្រេចចិត្តថាអានឬមិនអានពេលដែលគាត់ឃើញចំណងជើងរបស់ស្រោមសំបុត្រនីមួយៗ។ ប្រសិនបើចំណងជើងនោះទាក់ទាញឱ្យគាត់ចង់អាន ឬជាអ្វីដែលគាត់ចង់ដឹងទើបគាត់ចុចប៊ូតុងទម្លាក់មាតិកានោះចុះមកដើម្បីអាច បើចំណងជើងមិនទាក់ទាញចំណាប់អារម្មណ៍គាត់ទេនោះ គាត់អាចអូសរំលងបាន។

ស្រោមសំបុត្រគួរតែត្រូវបានប្រើប្រាស់នៅពេល៖

  1. ទំព័រគ្មានកន្លែងគ្រប់គ្រាន់សម្រាប់ដាក់បង្ហាញខ្លឹមសារសំខាន់ៗ។
  2. ការបង្ហាញសំណួរដែលសួរញឹកញាប់ (FAQ) - សំណួរអាចយកទៅដាក់ក្នុងផ្នែកចំណងជើងរបស់ស្រោមសំបុត្រ ហើយចម្លើយលម្អិតនឹងត្រូវបានបង្ហាញនៅពេលប៊ូតុងទម្លាក់ខ្លឹមសារចុះក្រោមត្រូវបានចុច។

ស្រោមសំបុត្រមិនគួរត្រូវបានប្រើប្រាស់ទេនៅពេល៖

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

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

ធ្វើយ៉ាងណាឱ្យប៊ូតុងទម្លាក់ខ្លឹមសារចុះងាយចុចបាន
អ្នកគួរតែរចនាប៊ូតុងនោះឱ្យធំ និងងាយស្រួលមើលឃើញ។

រក្សាគម្លាតធំល្មមនៅចន្លោះចំណងជើង និងខ្លឹមសារសំណេររួម
ធ្វើបែបនេះដើម្បីចៀសវាងអ្នកប្រើប្រាស់ជ្រុលដៃចុចបិទខ្លឹមសារទៅវិញនៅពេលដែលគាត់អានមិនទាន់ចប់។

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

$accordion-padding-y: 1rem !default;
$accordion-padding-x: 1.25rem !default;
$accordion-color: $body-color !default;
$accordion-bg: $body-bg !default;
$accordion-border-width: $border-width !default;
$accordion-border-color: $border-color !default;
$accordion-border-radius: $border-radius !default;
$accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width) !default;
$accordion-body-padding-y: $accordion-padding-y !default;
$accordion-body-padding-x: 1.5rem !default;
$accordion-button-padding-y: $accordion-padding-y !default;
$accordion-button-padding-x: 1.5rem !default;
$accordion-button-color: $accordion-color !default;
$accordion-button-bg: $accordion-bg !default;
$accordion-transition: $btn-transition, border-radius .15s ease !default;
$accordion-button-active-bg: none !default;
$accordion-button-active-color: $purple-500 !default;
$accordion-button-focus-border-color: $input-focus-border-color !default;
$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
$accordion-icon-width: 1.25rem !default;
$accordion-icon-color: $accordion-button-color !default;
$accordion-icon-active-color: $accordion-button-active-color !default;
$accordion-icon-transition: transform .2s ease-in-out !default;
$accordion-icon-transform: rotate(-180deg) !default;
$accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'
                                                     fill='#{$accordion-icon-color}'>
  <path fill-rule='evenodd'
        d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z' />
</svg>") !default;
$accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'
                                                            fill='#{$accordion-icon-active-color}'>
  <path fill-rule='evenodd'
        d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z' />
</svg>") !default;
Home
Previous version 1.0.3