VelvetKit

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="w-full" data-controller="ui--accordion" data-ui--accordion-type-value="single" data-ui--accordion-values-value="["item-1"]" id="ui-accordion-31678038">
  <div class="border-b last:border-b-0" data-ui--accordion-target="item" data-value="item-1" data-state="closed">
    <h3 class="contents"><button id="ui-accordion-trigger-52b3118c" class="group flex w-full items-center gap-3 py-2 text-sm font-medium hover:underline text-left text-primary rounded disabled:pointer-events-none disabled:opacity-50 transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background" type="button" aria-expanded="false" aria-controls="ui-accordion-content-8ae76e70cb6d" data-ui--accordion-target="trigger" data-action="click->ui--accordion#toggle keydown->ui--accordion#keydown"><i data-lucide="chevron-right" class="inline-block w-4 h-4 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-90" aria-hidden="true"></i>
        Is it accessible?</button></h3>
    <div id="ui-accordion-content-a24308eb" role="region" class="grid grid-rows-[0fr] transition-[grid-template-rows] duration-200 data-[state=open]:grid-rows-[1fr]" aria-labelledby="ui-accordion-trigger-8ae76e70cb6d" data-ui--accordion-target="content" data-state="closed">
      <div class="overflow-hidden min-h-0">
        <div class="pl-8 pb-4 text-sm">
          <p class="text-muted-foreground">Yes. It adheres to the WAI-ARIA design pattern.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="border-b last:border-b-0" data-ui--accordion-target="item" data-value="item-2" data-state="closed">
    <h3 class="contents"><button id="ui-accordion-trigger-27389140" class="group flex w-full items-center gap-3 py-2 text-sm font-medium hover:underline text-left text-primary rounded disabled:pointer-events-none disabled:opacity-50 transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background" type="button" aria-expanded="false" aria-controls="ui-accordion-content-f17ed8071148" data-ui--accordion-target="trigger" data-action="click->ui--accordion#toggle keydown->ui--accordion#keydown"><i data-lucide="chevron-right" class="inline-block w-4 h-4 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-90" aria-hidden="true"></i>
        Is it styled?</button></h3>
    <div id="ui-accordion-content-0ef5f9f7" role="region" class="grid grid-rows-[0fr] transition-[grid-template-rows] duration-200 data-[state=open]:grid-rows-[1fr]" aria-labelledby="ui-accordion-trigger-f17ed8071148" data-ui--accordion-target="content" data-state="closed">
      <div class="overflow-hidden min-h-0">
        <div class="pl-8 pb-4 text-sm">
          <p class="text-muted-foreground">Yes. It comes with default styles that match the other components' aesthetic.</p>
        </div>
      </div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
render(UI::Accordion.new(type: type.to_sym, default_value: "item-1")) do |accordion|
  accordion.with_item(value: "item-1") do |item|
    item.with_trigger { "Is it accessible?" }
    item.with_content do
      tag.p(class: "text-muted-foreground") { "Yes. It adheres to the WAI-ARIA design pattern." }
    end
  end
  accordion.with_item(value: "item-2") do |item|
    item.with_trigger { "Is it styled?" }
    item.with_content do
      tag.p(class: "text-muted-foreground") { "Yes. It comes with default styles that match the other components' aesthetic." }
    end
  end
end

No notes provided.

Param Description Input

—