{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "e0256001-1383-416e-8f8a-c62cb0057a3f",
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "import panel_material_ui as pmui\n",
    "\n",
    "pn.extension()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "56285c8a-7c6c-4d1c-9d99-52b05d88a6f2",
   "metadata": {},
   "source": [
    "The `Container` component centers content horizontally with responsive padding. \n",
    "\n",
    "#### Parameters:\n",
    "\n",
    "##### Core\n",
    "\n",
    "* **`disable_gutters`** (`boolean`): If True, removes the default padding on the left and right.\n",
    "* **`fixed`** (`boolean`): Sets max-width to match min-width of current breakpoint for fixed-width layouts.\n",
    "* **`width_option`** (`Literal[\"xs\", \"sm\", \"md\", \"lg\", \"xl\", False]`): Maximum width breakpoint for the container.\n",
    "\n",
    "##### Styling\n",
    "\n",
    "- **`sx`** (dict): Component level styling API.\n",
    "- **`theme_config`** (dict): Theming API.\n",
    "\n",
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "d10a2d1c-adc5-47fb-9990-9565c4f94af9",
   "metadata": {},
   "source": [
    "### Basic Uage\n",
    "\n",
    "A `Container` has two modes, fluid (the default), where the width is bounded by the `width_option`, which corresponds to a breakpoint:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "0a698dc1-77d9-4d03-987b-72480637a9a0",
   "metadata": {},
   "outputs": [],
   "source": [
    "sx = {'boxShadow':'var(--mui-shadows-12)', 'backgroundColor': '#afafaf'}\n",
    "\n",
    "title = pmui.Typography('Container', height=100, variant='h4')\n",
    "content = pmui.Typography('This container centers it contents', height=100)\n",
    "\n",
    "pmui.Container(title, content, sx=sx, width_option='sm')"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "7357572d-976d-4c2a-ab31-e720e5bbe4a4",
   "metadata": {},
   "source": [
    "### Fixed\n",
    "\n",
    "If you want to design for a fixed set of sizes instead of trying to accommodate a fully fluid viewport, you can set the `fixed` parameter. The Container will adapt it's max-width to the min-width of the current breakpoint:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "a5c6f13f-2c15-4c4e-980c-b961bb63e792",
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.Container(title, sx=sx, width_option=False, fixed=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "4d265a93-078d-4452-ac77-a1a3b011390c",
   "metadata": {},
   "source": [
    "### Gutters\n",
    "\n",
    "By default the `Container` will have gutters around the contents, you can disable this with `disable_gutters=True`:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "51c0d8c1-041c-491f-a612-67afabd5b5c7",
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.Container(title, sx=sx, width_option='xs', disable_gutters=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "ec466d75-02fb-4756-b790-1b724c0d0476",
   "metadata": {},
   "source": [
    "### API Reference\n",
    "\n",
    "#### Parameters"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "759321d0-4f99-4ca2-a05a-313565d05fb6",
   "metadata": {},
   "outputs": [],
   "source": [
    "container = pmui.Container(title, sx=sx, width_option='sm')\n",
    "\n",
    "pmui.Row(container.controls(jslink=True), container)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "8fb4b0f7-de97-48ef-a020-e101a80f0c51",
   "metadata": {},
   "source": [
    "### References\n",
    "\n",
    "**Material UI Container:**\n",
    "\n",
    "- [Material UI Container Reference](https://mui.com/material-ui/react-container/) - Complete documentation for the underlying Material UI component\n",
    "- [Material UI Container API](https://mui.com/material-ui/api/container/) - Detailed API reference and configuration options"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.12.2"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}