RPF Design System for Rails
x
1
2
3
4
5
<details class="rpf-accordion"><summary class="rpf-accordion__title">An accordion with some content<span class="rpf-accordion__icon"></span></summary>
  <div class="rpf-accordion__text">
    <div>This is the content for my accordion component.</div>
  </div>
</details>
1
2
3
c = tag.div('This is the content for my accordion component.')
render DesignSystem::AccordionComponent.new(title: 'An accordion with some content').with_content(c)

Accordion Component - adding text as a block

For main docs for this component, see the 'Default' preview. To add content as a block, omit the text attribute:

DesignSystem::AccordionComponent.new(title: 'Abc') do
  tag.div('This is the content for my accordion component.')
end

produces:

<details class="rpf-accordion"><summary class="rpf-accordion__title">Abc<span class="rpf-accordion__icon">
</span></summary>
  <div class="rpf-accordion__text">
    <div>This is the content for my accordion component.</div>
  </div>
</details>

In previews and tests, you can use the with_content method to achieve the same thing (see source for this preview).

No params configured.