CSS Summoner

Component Docs

Accordion コンポーネント

すべてのアコーディオンの基本スタイル。折りたたみ可能なコンテンツを表示するための共通のスタイルとレイアウトを提供します。 .accordion-base

バリアント

Default

.accordion-default

デフォルトスタイルのアコーディオン。シンプルな外観で、ヘッダーにホバー効果があります。

Ghost

.accordion-ghost

ゴーストスタイルのアコーディオン。背景色も枠線もなく、ホバー時に薄い背景色が表示されます。

Outline

.accordion-outline

アウトラインスタイルのアコーディオン。枠線のみで、ヘッダーにホバー時に背景色が表示されます。

Solid

.accordion-solid

塗りつぶしスタイルのアコーディオン。ヘッダーに背景色が適用されます。

Subtle

.accordion-subtle

控えめなアコーディオン。薄い背景色が適用され、ホバー時に色が濃くなります。

使用例


							
								<div class="accordion-base accordion-default text-xs theme-primary">
<div class="accordion-item">
<div class="accordion-header" tabindex="0" role="button" aria-expanded="false" aria-controls="accordion-panel-m4kxjh" data-accordion-toggle="true">
<span>アコーディオンタイトル</span>
<span class="accordion-icon" aria-hidden="true"></span>
</div>
<div id="accordion-panel-m4kxjh" class="accordion-content" aria-hidden="true" role="region" data-accordion-content="true">
<div style="padding:1rem">
<p>これはアコーディオンの内容です。</p>
<p>テキスト、画像、その他のコンポーネントなど様々な要素を含めることができます。</p>
</div>
</div>
</div>
</div>
							
						

							
								<div class="accordion-base accordion-solid text-xs theme-primary">
<div class="accordion-item">
<div class="accordion-header" tabindex="0" role="button" aria-expanded="false" aria-controls="accordion-panel-m4kxjh" data-accordion-toggle="true">
<span>アコーディオンタイトル</span>
<span class="accordion-icon" aria-hidden="true"></span>
</div>
<div id="accordion-panel-m4kxjh" class="accordion-content" aria-hidden="true" role="region" data-accordion-content="true">
<div style="padding:1rem">
<p>これはアコーディオンの内容です。</p>
<p>テキスト、画像、その他のコンポーネントなど様々な要素を含めることができます。</p>
</div>
</div>
</div>
</div>
							
						

							
								<div class="accordion-base accordion-outline text-xs theme-primary">
<div class="accordion-item">
<div class="accordion-header" tabindex="0" role="button" aria-expanded="false" aria-controls="accordion-panel-m4kxjh" data-accordion-toggle="true">
<span>アコーディオンタイトル</span>
<span class="accordion-icon" aria-hidden="true"></span>
</div>
<div id="accordion-panel-m4kxjh" class="accordion-content" aria-hidden="true" role="region" data-accordion-content="true">
<div style="padding:1rem">
<p>これはアコーディオンの内容です。</p>
<p>テキスト、画像、その他のコンポーネントなど様々な要素を含めることができます。</p>
</div>
</div>
</div>
</div>
							
						

							
								<div class="accordion-base accordion-subtle text-xs theme-primary">
<div class="accordion-item">
<div class="accordion-header" tabindex="0" role="button" aria-expanded="false" aria-controls="accordion-panel-m4kxjh" data-accordion-toggle="true">
<span>アコーディオンタイトル</span>
<span class="accordion-icon" aria-hidden="true"></span>
</div>
<div id="accordion-panel-m4kxjh" class="accordion-content" aria-hidden="true" role="region" data-accordion-content="true">
<div style="padding:1rem">
<p>これはアコーディオンの内容です。</p>
<p>テキスト、画像、その他のコンポーネントなど様々な要素を含めることができます。</p>
</div>
</div>
</div>
</div>
							
						

							
								<div class="accordion-base accordion-ghost text-xs theme-primary">
<div class="accordion-item">
<div class="accordion-header" tabindex="0" role="button" aria-expanded="false" aria-controls="accordion-panel-m4kxjh" data-accordion-toggle="true">
<span>アコーディオンタイトル</span>
<span class="accordion-icon" aria-hidden="true"></span>
</div>
<div id="accordion-panel-m4kxjh" class="accordion-content" aria-hidden="true" role="region" data-accordion-content="true">
<div style="padding:1rem">
<p>これはアコーディオンの内容です。</p>
<p>テキスト、画像、その他のコンポーネントなど様々な要素を含めることができます。</p>
</div>
</div>
</div>
</div>

Component Docs

← back to css-summoner