Angularでアコーディオンを実装したいけどどうすればいいんだろう…？
この記事では上記の悩みを解決します。
angularでアコーディオンを実装しきますが、まずはイメージ図からです。
アコーディオン開く前
アコーディオン開いたあと
実際の挙動に関しては、yoteipickerというアプリで確認できます。
休日で空いた時間の暇つぶしを探せるアプリを公開しています。
アコーディオンの実装
それではアコーディオンを実装していきましょう。
Angularでアコーディオンを実装するのに、Angular materialのアコーディオンの力を借りています。
アコーディオンのコンポーネントを作成します。今回は、以下のようにアコーディオンが呼べるようにします。
<app-accordion></app-accordion>Angular materialのアコーディオンを使えるように、app.module.tsにモジュールをimportします。
import { CdkAccordionModule } from '@angular/cdk/accordion';
import { AccordionComponent } from './component/parts/accordion/accordion.component';
@NgModule({
declarations: [
AppComponent,
AccordionComponent,
],
imports: [
CdkAccordionModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
アコーディオンのコンポーネントは以下のような感じで書きました。
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-accordion',
templateUrl: './accordion.component.html',
styleUrls: ['./accordion.component.css']
})
export class AccordionComponent implements OnInit {
// アコーディオンのタイトルリスト
public items = [
'気になった予定はどうすればいいですか？',
'pickした予定はどこから確認すればいいですか？',
'管理者に予定をリクエストしたい場合はどうすればいいですか？',
];
constructor() { }
ngOnInit(): void {
}
}
解説すると、itemsにアコーディオンのタイトル部分を追加していきます。これは後でhtmlのファイルでngForを使って展開していく形になります。
続いてhtml側です。
<cdk-accordion class="accordion">
<cdk-accordion-item
*ngFor="let item of items; let index = index;"
#accordionItem="cdkAccordionItem"
class="accordion-item"
role="button"
tabindex="0"
[attr.id]="'accordion-header-' + index"
[attr.aria-expanded]="accordionItem.expanded"
[attr.aria-controls]="'accordion-body-' + index">
<div class="accordion-item-header" (click)="accordionItem.toggle()">
{{ item }}
<span class="accordion-item-description">
Click to {{ accordionItem.expanded ? 'close' : 'open' }}
</span>
</div>
<div
class="accordion-item-body"
role="region"
[style.display]="accordionItem.expanded ? '' : 'none'"
[attr.id]="'accordion-body-' + index"
[attr.aria-labelledby]="'accordion-header-' + index">
<span *ngIf="index === 0">Pickボタンをクリックして、pickに保存しましょう。</span>
<span *ngIf="index === 1">ヘッダーのpickをクリックすると、pickした予定一覧が見れます。</span>
<span *ngIf="index === 2">フッターのリクエストをクリックし、ページ内部にあるリクエストフォームより可能です。</span>
</div>
</cdk-accordion-item>
</cdk-accordion>HTML側の解説をすると、まずngForを使ってitemsを展開します。そこにindex番号も付与します。
“‘accordion-header-‘ + index”となっていますが、itemsに格納した要素数を展開するので、要素1番目はindex番号0の気になった予定はどうすればいいですか？が表示されます。その次は要素2番目のindex=1…と表示される形です。
accordionItem.toggle()となっており、toggleにすることでアコーディオンの開閉ができます。
CSS側です。
.accordion {
display: block;
max-width: 600px;
margin: 0 auto;
padding-bottom: 150px;
}
.accordion-item {
display: block;
border: solid 1px #ccc;
background-color: #fff;
}
.accordion-item + .accordion-item {
border-top: none;
}
.accordion-item-header {
display: flex;
align-content: center;
justify-content: space-between;
}
.accordion-item-description {
font-size: 0.85em;
color: #999;
}
.accordion-item-header,
.accordion-item-body {
padding: 16px;
}
.accordion-item-header:hover {
cursor: pointer;
background-color: #eee;
}
.accordion-item:first-child {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.accordion-item:last-child {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}休日で空いた時間の暇つぶしを探せるアプリを公開しています。
コメント