Select to view content in your preferred language

Panel inside accordion

481
4
Jump to solution
11-14-2024 09:42 AM
tad
by
Occasional Contributor

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> ...

0 Kudos
1 Solution

Accepted Solutions
Mac_And_Cheese
Occasional Contributor

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.

View solution in original post

4 Replies
Mac_And_Cheese
Occasional Contributor

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 BlockPanel , 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 

0 Kudos
tad
by
Occasional Contributor

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.

0 Kudos
Mac_And_Cheese
Occasional Contributor

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.

tad
by
Occasional Contributor

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

0 Kudos