「Shoelace」で『Details』でアコーディオン（Accordion）を作成する方法
Contents
「Shoelace」で『Details』でアコーディオン（Accordion）を作成する方法
今回は「Shoelace」の『sl-details』タグに紹介です。
タグ「<sl-details>」
導入方法
JSファイルインクルード
「Shoelace」の全機能を利用する必要はなく、Detailsに関連するJSファイルを読み込んでください。
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.6.0/cdn/components/details/details.component.js"></script>
「Shoelace」の全機能を利用する場合は、以下のファイルを読み込んでください。
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0/dist/shoelace.js"></script>CSSファイルインクルード
「Shoelace」のCSSファイルをインクルードします。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0/dist/themes/light.css" />HTMLマークアップ
まず、タグ「<sl-details>」で定義します。
<sl-details >
...
</sl-details>項目にタイトルを設定するときには、属性『summary』を設定し、値に文字列を指定してください。
タイトルを設定するには？
<sl-details summary="(タイトル)">
...
</sl-details>アイコンを変えるには？
詳細項目が閉じている時／開いている時に表示されるアイコンを変えることができます。
<sl-details summary="(タイトル)">
<sl-icon name="plus-square" slot="expand-icon"></sl-icon>
<sl-icon name="dash-square" slot="collapse-icon"></sl-icon>
...
</sl-details>
<style>slotの『expand-icon』（開いているときのアイコン）と『collapse-icon』（閉じているときのアイコン）で指定できます。
初期表示で開くには？
初期表示で開いた状態にするには、属性『open』を指定してください。
<sl-details summary="(タイトル)" open>
...
</sl-details>
デモ
ベーシック（Collapse）
サンプル
「Details」はクリックすると詳細内容を表示するのに適しています。
HTMLコード
<sl-details summary="詳しく...">
詳細内容です。<br />
「Details」はクリックすると詳細内容を表示するのに適しています。
</sl-details>
無効
サンプル
「Details」はクリックすると詳細内容を表示するのに適しています。
HTMLコード
<sl-details summary="無効" disabled>
詳細内容です。<br />
「Details」はクリックすると詳細内容を表示するのに適しています。
</sl-details>属性『disabled』を設定すると、無効化さえせることができます。
アイコンをカスタマイズ
サンプル
「Details」はクリックすると詳細内容を表示するのに適しています。
HTMLコード
<sl-details summary="詳しく..." class="custom-icons">
<sl-icon name="plus-square" slot="expand-icon"></sl-icon>
<sl-icon name="dash-square" slot="collapse-icon"></sl-icon>
詳細内容です。<br />
「Details」はクリックすると詳細内容を表示するのに適しています。
</sl-details>
<style>
sl-details.custom-icons::part(summary-icon) {
/* 開いたときに適用される回転アニメーションを無効にする */
rotate: none;
}
</style>
タイトル領域をクリックしたとき、アイコンが回転するのがデフォルトです。
よって、その回転を抑止するには、スタイルシートで『rotate: none』を適用してください。
アコーディオン
サンプル
HTMLコード
<div class="details-group-example">
<sl-details summary="１番目" open>
アコーディオン１番目
</sl-details>
<sl-details summary="２番目">
アコーディオン２番目
</sl-details>
<sl-details summary="３番目">
アコーディオン３番目
</sl-details>
</div>
<script>
const container = document.querySelector('.details-group-example');
// Close all other details when one is shown
container.addEventListener('sl-show', event => {
[...container.querySelectorAll('sl-details')].map(details => (details.open = event.target === details));
});
</script>
<style>
.details-group-example sl-details:not(:last-of-type) {
margin-bottom: var(--sl-spacing-2x-small);
}
</style>
