Ngx-Bootstrap - akordeon

Akordeon, katlanabilir panelleri görüntülemek için bir kontroldür ve bilgileri sınırlı alanda görüntülemek için kullanılır.

Akordeon Bileşeni

Bilgileri sınırlı bir alanda sunmak için daraltılabilir içerik panellerini görüntüler.

seçici

• accordion

Girişler

• closeOthers - boole, eğer bir öğeyi doğru genişletmek diğerlerini kapatacaksa

• isAnimated - boole, animasyonu aç / kapat, varsayılan: false

Akordeon Panel Bileşeni

Akordeon başlığı

Akordeon grubunda başlık özniteliğini kullanmak yerine, grubun başlık şablonu olarak kullanılacak bir grubun içindeki herhangi bir öğede bir akordeon başlığı özniteliği kullanabilirsiniz.

seçici

• akordeon grubu, akordeon paneli

Girişler

• heading - dize, akordeonun grup başlığındaki tıklanabilir metin

• isDisabled - boole, akordeon grubunu etkinleştirir / devre dışı bırakır

• isOpen- boolean, akordeon grubu açık mı yoksa kapalı mı. Bu özellik, iki yönlü bağlamayı destekler

• panelClass - string, Bootstrap'in bağlamsal panel sınıflarını (panel birincil, panel başarısı, panel bilgisi vb.) Kullanma yeteneği sağlar.

çıktılar

• isOpenChange - Açık durum değiştiğinde yayar

AkordeonConfig

Yapılandırma hizmeti, AccordionComponent için varsayılan değerler sağlar.

Özellikleri

• closeOthers- boolean, Bir panel açıldığında diğer panellerin kapatılıp kapatılmayacağı. Varsayılan: yanlış

• isAnimated - boole, animasyonu aç / kapat

Misal

Akordeon kullanacağımızdan, kullanmak için app.module.ts'yi güncelledik AccordionModulegibi NGX-önyükleme Ortamı Kurulumu bölüm.

Akordeonu kullanmak için test.component.html'yi güncelleyin.

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>

İlgili değişkenler ve yöntemler için test.component.ts dosyasını güncelleyin.

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);
   }
}

Oluşturun ve Sunun

Açısal sunucuyu başlatmak için aşağıdaki komutu çalıştırın.

ng serve

Sunucu çalışmaya başladığında. Http: // localhost: 4200'ü açın ve aşağıdaki çıktıyı doğrulayın.