{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<!--NAVIGATION-->\n",
    "< [OPTIONAL - Widget label styling](06.02-OPTIONAL-widget-label-styling.ipynb) | [Contents](00.00-index.ipynb) | [*OPTIONAL* widget layout exercises](06.04-OPTIONAL-container-exercises.ipynb) >"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# OPTIONAL Predefined widget styles\n",
    "\n",
    "If you wish the styling of widgets to make use of colors and styles defined by the environment (to be consistent with e.g. a notebook theme), some widgets enable choosing in a list of pre-defined styles.\n",
    "\n",
    "For example, the `Button` widget has a `button_style` attribute that may take 5 different values:\n",
    "\n",
    " - `'primary'`\n",
    " - `'success'`\n",
    " - `'info'`\n",
    " - `'warning'`\n",
    " - `'danger'`\n",
    "\n",
    "besides the default empty string ''."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from ipywidgets import Button, IntSlider\n",
    "\n",
    "Button(description='Danger Button', button_style='danger')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## The `style` attribute\n",
    "\n",
    "While the `layout` attribute only exposes layout-related CSS properties for the top-level DOM element of widgets, the  \n",
    "`style` attribute is used to expose non-layout related styling attributes of widgets.\n",
    "\n",
    "However, the properties of the `style` attribute are specific to each widget type."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "b1 = Button(description='Custom color')\n",
    "b1.style.button_color = 'lightgreen'\n",
    "b1"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "You can get a list of the style attributes for a widget with the `keys` property."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "b1.style.keys"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Just like the `layout` attribute, widget styles can be assigned to other widgets."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "b2 = Button()\n",
    "b2.style = b1.style\n",
    "b2"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Widget styling attributes are specific to each widget type."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "s1 = IntSlider(description='Blue handle')\n",
    "s1.style.handle_color = 'lightblue'\n",
    "s1"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "There is a [list of all style keys](Table%20of%20widget%20keys%20and%20style%20keys.ipynb#Style-keys)."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<!--NAVIGATION-->\n",
    "< [OPTIONAL - Widget label styling](06.02-OPTIONAL-widget-label-styling.ipynb) | [Contents](00.00-index.ipynb) | [*OPTIONAL* widget layout exercises](06.04-OPTIONAL-container-exercises.ipynb) >"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "widgets-tutorial",
   "language": "python",
   "name": "widgets-tutorial"
  },
  "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.8.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}