New-component: Accordion -> Asking for opinion

[a-gonzalo]

Hello everyone,

I'm working on adapt the (last?) component of Tabler: Accordion:

The actual implementation, renders the accordion correctly and It have the correct functionality of the collapse button:

And this is accordion.handlebars:

<div class="accordion" id="{{default accordion_id 'accordion_default'}}">
    {{#each_row}}
    <div class="accordion-item">
        <h2 class="accordion-header" id="heading-{{@row_index}}">
            <button class="accordion-button" type="button" data-bs-toggle="collapse"
                data-bs-target="#collapse-{{@row_index}}" aria-controls="collapse-{{@index}}">
                {{title}}
            </button>
        </h2>
        <div id="collapse-{{@row_index}}" class="accordion-collapse collapse {{#if (eq @row_index 0)}}show{{/if}}"
            aria-labelledby="heading-{{@row_index}}" data-bs-parent="#{{default accordion_id 'accordion_default'}}">
            <div class="accordion-body">
                {{content}}
            </div>
        </div>
    </div>
    {{/each_row}}
</div>

I'm opening to ask:

The currently implementation of Tabler is being loaded into a .card>.card-body. Should the accordion be embedded by default into a card or should it be an individual div and let people embed it by themselves?

Edit: Also, if there's any Tabler component that you want to replicate into SQLPage, let me know!

[a-gonzalo]

I noticed now that I'm not letting load Markdown content into the "content" property. I'm leaving this comment as a self-note to implement it asap

[lovasoa]

Wow, this looks great, thank you @Ajotah98 !

I think it looks better without the double border.

Like this

Not like this

[lovasoa]

About other components, I think one that would be very useful for dashboards is the big_number, that highlights one key figure, and potentially its evolution.

Like this from the tabler demo

Or like that from evidence.dev

[lovasoa]

Another one that I find useful in dahsboards is the "tables with a jauge", that associates a textual element to a numerical value, and represents the magnitude of the numerical value. It looks like multiple bar charts inline in the page.

They call it "dimension grid" in evidence: https://docs.evidence.dev/components/dimension-grid/

[a-gonzalo]

I really like this design. I didn't know about evidence.dev, I'll peek to see how can I implement it!