{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "ec1e6217-f87c-4dce-a64b-5cae1af0eba2",
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "import panel_material_ui as pmui\n",
    "from panel_material_ui import Card\n",
    "\n",
    "pn.extension()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "b91cc3fd-6cc5-4f2f-a4ab-a0e82c35c1d1",
   "metadata": {},
   "source": [
    "The `Card` component creates a collapsible container with a header bar.\n",
    "\n",
    "## Parameters\n",
    "\n",
    "### Core\n",
    "\n",
    "* **`collapsed`** (`boolean`): Whether the card content is collapsed. \n",
    "* **`collapsible`** (`boolean`): Whether the card can be expanded/collapsed.\n",
    "* **`header`** (`Panel component`): Custom component to display in the header bar.\n",
    "* **`hide_header`** (`boolean`): Whether to hide the header bar.\n",
    "* **`title`** (`str`): Text to display in the header (overridden by header if set).\n",
    "\n",
    "### Style\n",
    "\n",
    "* **`disable_gutters`** (`boolean`): Whether to disable margins between expanded sections.\n",
    "* **`elevation`** (`int`): The elevation level of the card surface.\n",
    "* **`header_background`** (`str`): The background color of the header.\n",
    "* **`header_color`** (`str`): The color of the header text.\n",
    "* **`raised`** (`boolean`): Whether the card appears elevated above the background.\n",
    "* **`square`** (`boolean`): Whether to disable rounded corners.\n",
    "* **`title_variant`** (`str`): The text variant of the header title (default=\"h3\").\n",
    "* **`variant`** (`Literal[\"filled\", \"outlined\"]`): Whether to show an outline instead of elevation.\n",
    "\n",
    "---"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "a133a97e-14ee-485b-b0de-8f8d52c4aa96",
   "metadata": {},
   "outputs": [],
   "source": [
    "w1 = pmui.TextInput(label='Text:')\n",
    "w2 = pmui.FloatSlider(label='Slider')\n",
    "\n",
    "card = Card(w1, w2, title='Card', margin=10)\n",
    "card"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "fad4f65b-deee-4e8d-b0e0-c1e03733453e",
   "metadata": {},
   "source": [
    "The contents of the `Card.objects` list should never be modified individually, because Panel cannot detect when items in that list have changed internally, and will thus fail to update any already-rendered views of those objects. Instead, use the provided methods for adding and removing items from the list. The only change that is safe to make directly to `Card.objects` is to replace the list of objects entirely. As a simple example of using the methods, we might add an additional widget to the card using the append method:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "6c96ad51-70f9-490a-b66b-6b7cbca43ad8",
   "metadata": {},
   "outputs": [],
   "source": [
    "w3 = pmui.Select(options=['A', 'B', 'C'])\n",
    "card.append(w3)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "c9dcc052-b904-4bbd-a03a-dd08a5d826a3",
   "metadata": {},
   "source": [
    "On a live server or in a notebook the card displayed after the previous code cell (above) will dynamically expand in size to accommodate all three widgets and the title. To see the effect in a statically rendered page, we will display the column a second time:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "8560284b-0af0-47be-b147-cbb27fb368cc",
   "metadata": {},
   "outputs": [],
   "source": [
    "card"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "304cbd7f-aa0a-4c70-9c90-a7fd3a9dc09c",
   "metadata": {},
   "source": [
    "Whether the Card is collapsed or not can be controlled from Python and Javascript:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "c76e7fec-0810-4df0-812f-18a572af4432",
   "metadata": {},
   "outputs": [],
   "source": [
    "print(card.collapsed)\n",
    "card.collapsed = True"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "10cbe45f-5b5a-4353-a3ff-32b3476514d9",
   "metadata": {},
   "source": [
    "## Style"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "b9e4f626-268a-49ad-9a2b-3ac66d8723d7",
   "metadata": {},
   "source": [
    "By default `Card` elements have an `elevation` (just like the `Paper` layout). The level of the elevation can be set:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "2e6dc51a-6fbb-431e-a137-32121d8d68e0",
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.Row(*(\n",
    "    Card(elevation=e, margin=10, title=f'Elevation={e}')\n",
    "    for e in (0, 1, 2, 4, 8, 12)\n",
    "))"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "9467ceea-0fb8-4628-9638-8c371d4db1e3",
   "metadata": {},
   "source": [
    "Alternatively the `Card` can be `outlined`:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "ca094609-8e50-4dda-a703-3f14a3808e1b",
   "metadata": {},
   "outputs": [],
   "source": [
    "Card(w1, w2, variant='outlined', margin=10, title='Outlined')"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "bc3a9694-b530-4c93-b629-45bfb567e578",
   "metadata": {},
   "source": [
    "## Header\n",
    "\n",
    "Instead of using a title, a Card may also be given an explicit header that can contain any component, e.g. in this case the Panel logo:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "0a3edbb3-8a0f-4858-883d-0a75b5b004da",
   "metadata": {},
   "outputs": [],
   "source": [
    "logo = 'https://panel.holoviz.org/_static/logo_horizontal.png'\n",
    "\n",
    "red   = pn.Spacer(styles=dict(background='red'), height=50)\n",
    "green = pn.Spacer(styles=dict(background='green'), height=50)\n",
    "blue  = pn.Spacer(styles=dict(background='blue'), height=50)\n",
    "\n",
    "Card(\n",
    "    red, green, blue,\n",
    "    header_background='#2f2f2f',\n",
    "    header_color='white',\n",
    "    header=pn.panel(logo, height=40),\n",
    "    width=300,\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "0c6ada3a-27d7-4bd2-ad21-499d50906cb0",
   "metadata": {},
   "source": [
    "It is also possible to render a Card entirely without a header:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "3d7a15fc-6bc8-490f-98d3-c7644bb66fed",
   "metadata": {},
   "outputs": [],
   "source": [
    "Card(\n",
    "    pn.indicators.Number(value=42, default_color='white', name='Completion', format='{value}%'),\n",
    "    sx={'background': 'darkgray'},\n",
    "    hide_header=True,\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "8be19f79-66cf-4142-a645-82bb05a8c7b0",
   "metadata": {},
   "source": [
    "## Layout\n",
    "\n",
    "In general a `Card` does not have to be given an explicit `width`, `height`, or `sizing_mode`, allowing it to adapt to the size of its contents. However in certain cases it can be useful to declare a fixed-size layout, which its responsively sized contents will then fill, making it possible to achieve equal spacing between multiple objects:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "cc4bce71-5c9e-4037-9011-868b15a850ae",
   "metadata": {},
   "outputs": [],
   "source": [
    "red   = pn.Spacer(styles=dict(background='red'), sizing_mode='stretch_both')\n",
    "green = pn.Spacer(styles=dict(background='green'), sizing_mode='stretch_both')\n",
    "blue  = pn.Spacer(styles=dict(background='blue'), sizing_mode='stretch_both')\n",
    "\n",
    "Card(red, green, blue, height=300, width=200, title='Fixed size', margin=10)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "38a97242-81ae-42ce-85c4-12397bc96789",
   "metadata": {},
   "source": [
    "When no fixed size is specified the column will expand to accommodate the sizing behavior of its contents:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "b5616fb5-83aa-4318-8a86-00b74e82238d",
   "metadata": {},
   "outputs": [],
   "source": [
    "from bokeh.plotting import figure\n",
    "\n",
    "p1 = figure(height=250, sizing_mode='stretch_width', margin=5)\n",
    "p2 = figure(height=250, sizing_mode='stretch_width', margin=5)\n",
    "\n",
    "p1.line([1, 2, 3], [1, 2, 3])\n",
    "p2.scatter([1, 2, 3], [1, 2, 3])\n",
    "\n",
    "Card(p1, pn.layout.Divider(), p2, title=\"Responsive\", sizing_mode='stretch_width', margin=10)"
   ]
  }
 ],
 "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
}