Accordion
Disclosure list. Changed to nested syntax in v0.4.0 (naturally pass Blade slots without XSS). Nest <x-accordion-item title="...">content</x-accordion-item> inside <x-accordion>. Single-open or multiple-open, 3 sizes. Content is a Blade slot, so any Blade markup, components, or links work. Alpine x-collapse animates smoothly.
default single-open / size=md
1つ目の内容。
2つ目の内容。
3つ目の内容。
multiple-open — 複数同時に開ける
1つ目の内容。
2つ目の内容。
3つ目の内容。
size variants
size=sm
1つ目の内容。
2つ目の内容。
3つ目の内容。
size=md
1つ目の内容。
2つ目の内容。
3つ目の内容。
size=lg
1つ目の内容。
2つ目の内容。
3つ目の内容。
リッチコンテンツ — Blade slot なので任意の markup / コンポーネント / リンク / リスト・複数段落も自然に書ける
外部リソースへのリンクを含むコンテンツ。公式ドキュメント を参照してください。
- 箇条書き 1
- 箇条書き 2
- 箇条書き 3
最初の段落。pinion-ui v0.4.0 以降は Blade slot として受け取るため、任意の HTML / Blade コンポーネントを埋め込めます。
2 段落目。改行・装飾も自由です。
FAQ デモ — 実利用イメージ (single-open)
Tailwind v4 + daisyUI v5 + Alpine.js をベースにした、Yakaze Tech Studio 内製の Blade コンポーネントライブラリです。プロジェクト横断で UI 一貫性を担保することを目的としています。
composer require sparrowhawk-labs/pinion-ui のあと、php artisan ui:install で必要な resource を wire-up してください。
はい。pinion-ui は daisyUI の class を内部で利用しているため、同じ theme variable を共有します。<x-...> と通常の daisyUI markup を併用しても問題ありません。
daisyUI v5 の
@plugin "daisyui/theme" ディレクティブでテーマを定義してください。pinion-ui の class はすべて theme variable 経由なので、テーマを変えるだけで配色が追従します。
GitHub Issues で報告してください。再現手順とスクリーンショットがあると助かります。sparrowhawk-labs/pinion-ui#issues
FAQ (multiple-open) — 比較対象を同時に見たい時
Tailwind v4 + daisyUI v5 + Alpine.js をベースにした、Blade コンポーネントライブラリ。
composer require → php artisan ui:install。
v0.4.0 から light only (pinion)。dark が必要なら daisyUI 標準
dark / dim / night を <html data-theme> で指定。
使い方
{{-- single-open (default) — 1度に1つしか開かない --}}
<x-accordion>
<x-accordion-item title="質問 1">回答 1 (Blade slot なので任意の markup 可)</x-accordion-item>
<x-accordion-item title="質問 2">
<p>複数段落も OK</p>
<a href="/docs" class="link link-primary">リンクも自然に</a>
</x-accordion-item>
</x-accordion>
{{-- multiple-open — 複数同時に開ける --}}
<x-accordion :multiple="true"> … </x-accordion>
{{-- サイズ (sm / md / lg) --}}
<x-accordion size="sm"> … </x-accordion>