topic Re: Panel inside accordion in Calcite Design System Questions

Panel inside accordion

tad — Thu, 14 Nov 2024 17:42:23 GMT

Is it possible to put a panel inside of an accordion? I have an accordion that I would like to put in text, dropdowns, textfields, radio buttons, etc in each section. Here's what I have so far that isn't working:

<section>
<calcite-shell>
<calcite-shell-panel slot="panel-start">
<calcite-accordion>
<calcite-accordion-item heading="Search">
<calcite-panel>
<calcite-dropdown width="m" overlay-positioning="fixed">
<calcite-button >Search</calcite-button>
<calcite-dropdown-group group-title="Natural places">
<calcite-dropdown-item>Water Right By File</calcite-dropdown-item>
<calcite-dropdown-item>Water Right By River Mile</calcite-dropdown-item>
<calcite-dropdown-item>TRS</calcite-dropdown-item>
<calcite-dropdown-item>Latitude/Longitude</calcite-dropdown-item>
<calcite-dropdown-item>Gaging Station</calcite-dropdown-item>
</calcite-dropdown-group>
</calcite-dropdown>
</calcite-panel>
</calcite-accordion-item> ...

Re: Panel inside accordion

Mac_And_Cheese — Thu, 14 Nov 2024 18:31:27 GMT

It depends on exactly what you are trying to achieve - but it sounds like using Panels and Blocks to organize content inside the Shell Panel may be what you are after. Generally a Panel would contain one or more Blocks, and each Block would contain related controls or content.

There are examples of these layouts in Block, Panel , Shell, and other component samples.

This might not be quite what you are after, but it might serve as a good starting point: Layout example in Codepen

Re: Panel inside accordion

tad — Thu, 14 Nov 2024 18:54:25 GMT

Thanks very much for your response. I guess my goal is to open an accordion (or block) and have a large panel that has stuff on it instead of just a slot with message. Your example is very similar to the ESRI accordion example. Sorry if I'm not explaining it well, I'm just beginning with Calcite so I'm trying to figure out the different nesting options. Thanks again.

Re: Panel inside accordion

Mac_And_Cheese — Fri, 15 Nov 2024 18:20:33 GMT

Do you have an sketch or rough design of the layout you'd like? It could help me put together a more representative example.

I did update the existing Codepen sample to contain more complex content - ultimately this is where you could place any needed elements - Calcite Components or otherwise.

Re: Panel inside accordion

tad — Fri, 15 Nov 2024 18:55:59 GMT

That's pretty much what I was looking for...thanks very much!