<subpanel />

The <subpanel /> element groups boards inside a <panel /> or another subpanel. Each subpanel has its own layout, spacing, and panelization settings. It accepts the same props as <panel />; see the panel properties.

A subpanel can contain only <board /> and <subpanel /> elements, and must contain at least one board, directly or through nesting.

Example

This panel places two routed power-indicator boards in a subpanel beside a larger version of the same circuit. Each board has a power header, resistor, LED, and bypass capacitor; J1 pin 1 is the 3.3V input and pin 2 is ground. The subpanel has explicit dimensions so the parent grid reserves space for the entire group.

const IndicatorBoard = ({ width = "20mm", height = "15mm" }) => (
  <board width={width} height={height} autorouter="auto-local">
    <pinheader name="J1" pinCount={2} pitch="2.54mm" pcbX={-6} pcbY={0} />
    <resistor name="R1" resistance="1k" footprint="0603" pcbX={0} pcbY={3} />
    <led name="LED1" color="red" footprint="0603" pcbX={5} pcbY={0} />
    <capacitor name="C1" capacitance="100nF" footprint="0603" pcbX={0} pcbY={-3} />

    <trace from=".J1 > .pin1" to=".R1 > .pin1" />
    <trace from=".R1 > .pin2" to=".LED1 > .anode" />
    <trace from=".LED1 > .cathode" to=".J1 > .pin2" />
    <trace from=".J1 > .pin1" to=".C1 > .pin1" />
    <trace from=".C1 > .pin2" to=".J1 > .pin2" />
  </board>
)

export default () => (
<panel layoutMode="grid" col={2} boardGap="5mm" edgePadding="5mm">
  <subpanel
    width="48mm"
    height="21mm"
    layoutMode="grid"
    col={2}
    boardGap="2mm"
    edgePadding="3mm"
  >
    <IndicatorBoard />
    <IndicatorBoard />
  </subpanel>
  <IndicatorBoard width="30mm" height="25mm" />
</panel>
)

The outer grid positions the subpanel as one item. The inner grid positions its two boards with a separate 2mm gap. For manual placement, set the parent to layoutMode="none" and position the subpanel with pcbX and pcbY.

See the Panelization guide for another nested layout example.

Example​

Example