Card accordion(ui_card_accordion)

UiBibz::Ui::Core::Boxes::CardAccordion

These elements allow the placement of the cards by accordion.

Usage

This component is an extension of component element. A Ui Bibz component consists of 3 arguments:

content[value/block]
html_options[hash]<default: {}>
options[hash]<default: {}>

ui_card_accordion options, html_options do |cc|
  cc.card do |c|
    c.header
      ui_link "Link", url: '#', collapse: "collapse-id"
    end
    c.body collaspe: 'collapse-id' do
      content
    end
  end
end

Options

The specific options for this component are:

action[string](use component stimulus-options method)
cache[string](use to cache your component)
controller[string](use component stimulus-options method)
status[symbol](:primary, :secondary, :success, :danger, :warning, :info, :light, :dark)(use component status method)
target[string](use component stimulus-options method)
turbo[string](use component turbo method)

Items

The allowed items for this component are:

card(inherit of card)
html[html/string]Insert html as a component

Examples

Some examples explain how to use the options present in the component.

Card accordion

Collapse link 1

Content 1

Collapse link 2

Content 2

Collapse link 3

Content 3

Ruby
Html

ui_card_accordion do |cc|
  cc.card do |c|
    c.header do
      ui_link 'Collapse link 1', collapse: 'collapse-1', active_collapse: true
    end
    c.body "Content 1", collapse: 'collapse-1', show: true
  end
  cc.card do |c|
    c.header do
      ui_link 'Collapse link 2', collapse: 'collapse-2'
    end
    c.body "Content 2", collapse: 'collapse-2'
  end
  cc.card do |c|
    c.header do
      ui_link 'Collapse link 3', collapse: 'collapse-3'
    end
    c.body "Content 3", collapse: 'collapse-3'
  end
end

<div class="accordion" id="card-accordion-id-89469">
  <div class="card">
    <div class="card-header">
      <a role="button" data-bs-toggle="collapse" data-bs-target="#collapse-1" aria-expanded="false" href="#" class="collapsed">Collapse link 1</a>
    </div>
    <div class="collapse" id="collapse-1" data-parent="#card-accordion-id-89469" style="">
      <div class="card-body">Content 1</div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      <a role="button" data-bs-toggle="collapse" data-bs-target="#collapse-2" href="#">Collapse link 2</a>
    </div>
    <div class="collapse" id="collapse-2" data-parent="#card-accordion-id-89469">
      <div class="card-body">Content 2</div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      <a role="button" data-bs-toggle="collapse" data-bs-target="#collapse-3" href="#">Collapse link 3</a>
    </div>
    <div class="collapse" id="collapse-3" data-parent="#card-accordion-id-89469">
      <div class="card-body">Content 3</div>
    </div>
  </div>
</div>

Card accordion with external button

Card Header 4

Content 4

Card Header 5

Content 5

Card Header 6

Content 6

Ruby
Html

ui_button_group status: :secondary do |bg|
  bg.button "Button 1", collapse: 'collapse-4', active_collapse: true
  bg.button "Button 2", collapse: 'collapse-5'
  bg.button "Button 3", collapse: 'collapse-6'
end

ui_card_accordion do |cc|
  cc.card do |c|
    c.header "Card Header 4"
    c.body "Content 4", collapse: 'collapse-4', show: true
  end
  cc.card do |c|
    c.header "Card Header 5"
    c.body "Content 5", collapse: 'collapse-5'
  end
  cc.card do |c|
    c.header "Card Header 6"
    c.body "Content 6", collapse: 'collapse-6'
  end
end

<div class="btn-group" role="group">
  <button class="btn-secondary btn collapsed" data-bs-toggle="collapse" data-bs-target="#collapse-4" aria-expanded="false">Button 1</button>
  <button class="btn-secondary btn" data-bs-toggle="collapse" data-bs-target="#collapse-5">Button 2</button>
  <button class="btn-secondary btn" data-bs-toggle="collapse" data-bs-target="#collapse-6">Button 3</button>
</div>

<div class="accordion" id="card-accordion-id-50516">
  <div class="card">
    <div class="card-header">Card Header 4</div>
    <div class="collapse" id="collapse-4" data-parent="#card-accordion-id-50516" style="">
      <div class="card-body">Content 4</div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">Card Header 5</div>
    <div class="collapse" id="collapse-5" data-parent="#card-accordion-id-50516">
      <div class="card-body">Content 5</div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">Card Header 6</div>
    <div class="collapse" id="collapse-6" data-parent="#card-accordion-id-50516">
      <div class="card-body">Content 6</div>
    </div>
  </div>
</div>