Accordion
A vertically stacked set of interactive headings that each reveal a section of content.
Usage
Example
PhlexUI is a UI component library for Ruby devs who want to build better, faster.
Yes, PhlexUI is pure Ruby and works great with Rails. It's a Ruby gem that you can install into your Rails app.
div(class: "w-full") do Accordion do AccordionItem do AccordionTrigger do p(class: "font-medium") { "What is PhlexUI?" } AccordionIcon() end AccordionContent do p(class: "text-sm pb-4") do "PhlexUI is a UI component library for Ruby devs who want to build better, faster." end end end end Accordion do AccordionItem do AccordionTrigger do p(class: "font-medium") { "Can I use it with Rils?" } AccordionIcon() end AccordionContent do p(class: "text-sm pb-4") do "Yes, PhlexUI is pure Ruby and works great with Rails. It's a Ruby gem that you can install into your Rails app." end end end end end
Copied!
Copy failed!
Components
Component | Built using | Source |
---|---|---|
Accordion | Phlex | |
AccordionContent | Phlex | |
AccordionIcon | Phlex | |
AccordionItem | Phlex | |
AccordionTrigger | Phlex |
Component | Built using | Source |
---|---|---|
Accordion | Phlex | |
AccordionContent | Phlex | |
AccordionDefaultContent | Phlex | |
AccordionDefaultTrigger | Phlex | |
AccordionIcon | Phlex | |
AccordionItem | Phlex | |
AccordionTrigger | Phlex | |
AccordionController | Stimulus JS |