docs: add Spacer reference notebook

examples/reference/layouts/Spacer.ipynb

@@ -0,0 +1,158 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "id": "setup",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import panel as pn\n",
+    "\n",
+    "pn.extension()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "overview",
+   "metadata": {},
+   "source": [
+    "The ``Spacer`` component adds fixed or responsive empty space to a layout. The ``HSpacer`` and ``VSpacer`` variants expand along the horizontal and vertical axes, respectively.\n",
+    "\n",
+    "#### Parameters:\n",
+    "\n",
+    "* **``width``** (int): The fixed width of a ``Spacer`` in pixels.\n",
+    "* **``height``** (int): The fixed height of a ``Spacer`` in pixels.\n",
+    "* **``sizing_mode``** (str): Controls whether a ``Spacer`` has fixed dimensions or expands with its container. ``HSpacer`` uses ``'stretch_width'`` and ``VSpacer`` uses ``'stretch_height'``.\n",
+    "\n",
+    "For details on other options for customizing the component see the [layout](../../how_to/layout/index.md) and [styling](../../how_to/styling/index.md) how-to guides.\n",
+    "\n",
+    "___"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "fixed-spacing",
+   "metadata": {},
+   "source": [
+    "## Fixed spacing\n",
+    "\n",
+    "Set ``width`` or ``height`` on a ``Spacer`` to reserve a fixed amount of room between components. This is useful when the spacing should remain unchanged as the browser is resized:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "id": "fixed-spacing-example",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "pn.Row(\n",
+    "    pn.widgets.Button(name=\"One\", width=100),\n",
+    "    pn.Spacer(width=50),\n",
+    "    pn.widgets.Button(name=\"Two\", width=100),\n",
+    "    pn.Spacer(width=100),\n",
+    "    pn.widgets.Button(name=\"Three\", width=100),\n",
+    ")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "horizontal-spacing",
+   "metadata": {},
+   "source": [
+    "## Responsive horizontal spacing\n",
+    "\n",
+    "An ``HSpacer`` expands to use the available horizontal space. Placing one before, between, and after the components distributes them evenly across the row:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "id": "horizontal-spacing-example",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "pn.Row(\n",
+    "    pn.HSpacer(),\n",
+    "    pn.widgets.Button(name=\"Left\", width=100),\n",
+    "    pn.HSpacer(),\n",
+    "    pn.widgets.Button(name=\"Center\", width=100),\n",
+    "    pn.HSpacer(),\n",
+    "    pn.widgets.Button(name=\"Right\", width=100),\n",
+    "    pn.HSpacer(),\n",
+    "    width=700,\n",
+    "    styles={\"border\": \"1px solid #d9d9d9\"},\n",
+    ")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "vertical-spacing",
+   "metadata": {},
+   "source": [
+    "## Responsive vertical spacing\n",
+    "\n",
+    "A ``VSpacer`` works the same way along the vertical axis. In a fixed-height column, the spacers grow and shrink to keep the components evenly distributed:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "id": "vertical-spacing-example",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "pn.Column(\n",
+    "    pn.VSpacer(),\n",
+    "    pn.widgets.Button(name=\"Top\", width=120),\n",
+    "    pn.VSpacer(),\n",
+    "    pn.widgets.Button(name=\"Middle\", width=120),\n",
+    "    pn.VSpacer(),\n",
+    "    pn.widgets.Button(name=\"Bottom\", width=120),\n",
+    "    pn.VSpacer(),\n",
+    "    height=350,\n",
+    "    width=180,\n",
+    "    align=\"center\",\n",
+    "    styles={\"border\": \"1px solid #d9d9d9\"},\n",
+    ")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "alignment",
+   "metadata": {},
+   "source": [
+    "``HSpacer`` and ``VSpacer`` can also be combined to align a component within a larger layout. Here the horizontal spacer pushes the button to the right, while the vertical spacer pushes it to the bottom:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "id": "alignment-example",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "pn.Column(\n",
+    "    pn.VSpacer(),\n",
+    "    pn.Row(\n",
+    "        pn.HSpacer(),\n",
+    "        pn.widgets.Button(name=\"Bottom right\", width=120),\n",
+    "        sizing_mode=\"stretch_width\",\n",
+    "    ),\n",
+    "    height=220,\n",
+    "    width=420,\n",
+    "    styles={\"border\": \"1px solid #d9d9d9\"},\n",
+    ")"
+   ]
+  }
+ ],
+ "metadata": {
+  "language_info": {
+   "name": "python",
+   "pygments_lexer": "ipython3"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}