mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-13 13:48:28 +00:00
75 lines
3.3 KiB
Plaintext
75 lines
3.3 KiB
Plaintext
---
|
|
layout: layouts/component.njk
|
|
title: Accordion
|
|
description: A vertically stacked set of interactive headings that each reveal a section of content.
|
|
toc:
|
|
- label: Usage
|
|
id: usage
|
|
---
|
|
|
|
{% from "macros/code_preview.njk" import code_preview %}
|
|
{% from "macros/code_block.njk" import code_block %}
|
|
|
|
<div class="alert mb-6">
|
|
{% lucide "circle-alert" %}
|
|
<h2>There is no dedicated accordion component in Basecoat.</h2>
|
|
</div>
|
|
|
|
{% set code %}<section
|
|
x-init
|
|
@click="
|
|
const clickedSummary = $event.target.closest('summary');
|
|
if (!clickedSummary) return;
|
|
const clickedDetails = clickedSummary.closest('details');
|
|
if (!clickedDetails) return;
|
|
$el.querySelectorAll('details').forEach(detailsEl => {
|
|
if (detailsEl !== clickedDetails) {
|
|
detailsEl.removeAttribute('open');
|
|
}
|
|
});
|
|
"
|
|
>
|
|
<details class="group border-b last:border-b-0 ">
|
|
<summary class="w-full focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] transition-all outline-none rounded-md">
|
|
<h2 class="flex flex-1 items-start justify-between gap-4 py-4 text-left text-sm font-medium hover:underline ">
|
|
Is it accessible?
|
|
{% lucide "chevron-down", { "class": "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200 group-open:rotate-180" } %}
|
|
</h2>
|
|
</summary>
|
|
<section class="pb-4">
|
|
<p class="text-sm">Yes. It adheres to the WAI-ARIA design pattern.</p>
|
|
</section>
|
|
</details>
|
|
<details class="group border-b last:border-b-0">
|
|
<summary class="w-full focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] transition-all outline-none rounded-md">
|
|
<h2 class="flex flex-1 items-start justify-between gap-4 py-4 text-left text-sm font-medium hover:underline ">
|
|
Is it styled?
|
|
{% lucide "chevron-down", { "class": "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200 group-open:rotate-180" } %}
|
|
</h2>
|
|
</summary>
|
|
<section class="pb-4">
|
|
<p class="text-sm">Yes. It comes with default styles that matches the other components' aesthetic.</p>
|
|
</section>
|
|
</details>
|
|
<details class="group border-b last:border-b-0">
|
|
<summary class="w-full focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] transition-all outline-none rounded-md">
|
|
<h2 class="flex flex-1 items-start justify-between gap-4 py-4 text-left text-sm font-medium hover:underline ">
|
|
Is it animated?
|
|
{% lucide "chevron-down", { "class": "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200 group-open:rotate-180" } %}
|
|
</h2>
|
|
</summary>
|
|
<section>
|
|
<p class="text-sm whitespace-pre-wrap">Yes. It's animated by default, but you can disable it if you prefer.</p>
|
|
</section>
|
|
</details>
|
|
</section>
|
|
{% endset %}
|
|
{{ code_preview("accordion", code | prettyHtml, "w-full max-w-md") }}
|
|
|
|
<h2 id="usage"><a href="#usage">Usage</a></h2>
|
|
|
|
<section class="prose my-6">
|
|
<p>Basecoat animates <code><details></code> elements by default. Using Alpine.js to handle the open/close state and Tailwind to style the the <code><details></code> elements, you can get an accordion component:</p>
|
|
</section>
|
|
|
|
{{ code_block(code) }} |