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> ...
Solved! Go to Solution.
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.
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
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.
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.
That's pretty much what I was looking for...thanks very much!