{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "pn.extension()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The ``Alert`` pane allows providing **contextual feedback messages** for typical user actions with the handful of available and flexible alert messages.\n",
    "\n",
    "It's heavily inspired by the [Bootstrap Alert](https://getbootstrap.com/docs/4.0/components/alerts/).\n",
    "\n",
    "#### Parameters:\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",
    "* **``object``** (str): The contextual feedback message.\n",
    "* **``alert_type``** (str): The type of Alert and one of `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark`.\n",
    "\n",
    "___"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The `Alert` pane supports Markdown and HTML syntax :"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pn.pane.Alert('## Alert\\nThis is a warning!')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The `Alert` pane also a number of `alert_type` options which control the color of the alert message:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "text = (\n",
    "    \"This is a **{alert_type}** alert with [an example link]\"\n",
    "    \"(https://panel.holoviz.org/). Give it a click if you like.\"\n",
    ")\n",
    "\n",
    "pn.Column(*[\n",
    "    pn.pane.Alert(text.format(alert_type=at), alert_type=at)\n",
    "    for at in pn.pane.Alert.param.alert_type.objects],\n",
    "    sizing_mode=\"stretch_width\"\n",
    ").servable()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "It may also be used for longer messages:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "text = \"\"\"\n",
    "### Well done!\n",
    "\n",
    "Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.\n",
    "\n",
    "<hr>\n",
    "\n",
    "Did you notice the use of the divider?\n",
    "\"\"\"\n",
    "pn.pane.Alert(text, alert_type=\"success\")"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}