{
 "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
}