Ngx-Bootstrap - หีบเพลง

หีบเพลงเป็นส่วนควบคุมเพื่อแสดงแผงที่ยุบได้และใช้เพื่อแสดงข้อมูลในพื้นที่ จำกัด

หีบเพลงส่วนประกอบ

แสดงแผงเนื้อหาที่ยุบได้สำหรับการนำเสนอข้อมูลในพื้นที่ จำกัด

ตัวเลือก

accordion

อินพุต

closeOthers - บูลีนหากเป็นจริงการขยายหนึ่งรายการจะปิดรายการอื่นทั้งหมด
isAnimated - บูลีนเปิด / ปิดภาพเคลื่อนไหวค่าเริ่มต้น: เท็จ

AccordionPanelComponent

หีบเพลง

แทนที่จะใช้แอตทริบิวต์ส่วนหัวในกลุ่มหีบเพลงคุณสามารถใช้แอตทริบิวต์หัวเรื่องหีบเพลงกับองค์ประกอบใดก็ได้ภายในกลุ่มที่จะใช้เป็นเทมเพลตส่วนหัวของกลุ่ม

ตัวเลือก

กลุ่มหีบเพลงแผงหีบเพลง

อินพุต

heading - สตริงข้อความที่คลิกได้ในส่วนหัวของกลุ่มหีบเพลง
isDisabled - บูลีนเปิด / ปิดใช้งานกลุ่มหีบเพลง
isOpen- บูลีนกลุ่มหีบเพลงเปิดหรือปิด คุณสมบัตินี้รองรับการผูกแบบสองทาง
panelClass - สตริงให้ความสามารถในการใช้คลาสพาเนลตามบริบทของ Bootstrap (พาเนลหลักแผงสำเร็จข้อมูลพาเนล ฯลฯ ... )

เอาท์พุต

isOpenChange - ส่งเสียงเมื่อสถานะเปิดเปลี่ยนไป

หีบเพลง

Configuration service ให้ค่าเริ่มต้นสำหรับ AccordionComponent

คุณสมบัติ

closeOthers- บูลีนควรปิดแผงอื่นเมื่อเปิดแผงหรือไม่ ค่าเริ่มต้น: เท็จ
isAnimated - บูลีนเปิด / ปิดภาพเคลื่อนไหว

ตัวอย่าง

ในขณะที่เรากำลังจะใช้หีบเพลงเราได้อัปเดต app.module.ts เพื่อใช้ AccordionModuleเช่นเดียวกับในบทการตั้งค่าสภาพแวดล้อม ngx-bootstrap

อัปเดต test.component.html เพื่อใช้หีบเพลง

test.component.html

<accordion>
   <accordion-group heading="Open By Default" [isOpen]="open">
      <p>Open By Default</p>
   </accordion-group>
   <accordion-group heading="Disabled" [isDisabled]="disabled">
      <p>Disabled</p>
   </accordion-group>
   <accordion-group heading="with isOpenChange" (isOpenChange)="log($event)">
      <p>Open Event</p>
   </accordion-group>
</accordion>

อัปเดต test.component.ts สำหรับตัวแปรและวิธีการที่เกี่ยวข้อง

test.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
   open: boolean = true;
   disabled: boolean = true;
   constructor() { }
   ngOnInit(): void {
   }
   log(isOpened: boolean){
      console.log(isOpened);
   }
}

สร้างและให้บริการ

รันคำสั่งต่อไปนี้เพื่อเริ่มเซิร์ฟเวอร์เชิงมุม

ng serve

เมื่อเซิร์ฟเวอร์เริ่มทำงาน เปิด http: // localhost: 4200 และตรวจสอบผลลัพธ์ต่อไปนี้