{ "cells": [ { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "import panel as pn\n", "import panel_material_ui as pmui\n", "\n", "pn.extension()" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "The `ColorPicker` widget provides an intuitive interface for selecting color values in your Panel applications.\n", "\n", "#### Parameters:\n", "\n", "For comprehensive customization options, see the [customization guides](https://panel-material-ui.holoviz.org/customization/index.html).\n", "\n", "##### Core\n", "\n", "* **`alpha`** (boolean): Whether to display input controls for a color's alpha (transparency) channel.\n", "* **`disabled`** (boolean): Whether the widget is interactive or read-only.\n", "* **`format`** (str): The format of the returned color value. Options include:\n", " - `hex`: Hexadecimal color value (e.g., '#ff0000')\n", " - `rgb`: RGB color value (e.g., 'rgb(255, 0, 0)')\n", " - `rgba`: RGBA color value with alpha channel (e.g., 'rgba(255, 0, 0, 0.5)')\n", " - `hsl`: HSL color value (e.g., 'hsl(0, 100%, 50%)')\n", " - `hsv`: HSV color value (e.g., 'hsv(0, 100%, 100%)')\n", "* **`value`** (color): The current color value\n", "\n", "##### Display\n", "\n", "* **`color`** (str): The accent color of the color picker when active or focused.\n", "* **`label`** (str): The descriptive label displayed above the widget\n", "* **`size`** (`Literal[\"small\", \"medium\", \"large\"]`): The visual size of the input field\n", "* **`variant`** (`Literal[\"filled\", \"outlined\", \"standard\"]`): The visual style variant of the input field\n", "\n", "##### Styling\n", "\n", "- **`sx`** (dict): Component-level styling API for fine-grained customization.\n", "- **`theme_config`** (dict): Theming API for consistent design system integration.\n", "\n", "##### Aliases\n", "\n", "For compatibility with existing Panel code, certain parameters have aliases:\n", "\n", "- **`name`**: Alias for `label`\n", "___" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Basic Usage\n", "\n", "The `ColorPicker` displays a color preview square that, when clicked, opens your browser's native color selection interface. This provides a familiar and accessible way for users to choose colors:" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "colorpicker = pmui.ColorPicker(label='Color Picker', value='#99ef78')\n", "\n", "colorpicker" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "The `.value` returns the selected color as a hexadecimal RGB string:" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "colorpicker.value" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Format\n", "\n", "The `ColorPicker` supports multiple color format specifications to match your application's needs. Configure the `format` parameter to control how color values are represented when a user makes a selection:" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "pmui.FlexBox(\n", " pmui.ColorPicker(label='HEX Color Picker', value='#99ef78', format='hex'),\n", " pmui.ColorPicker(label='RGB Color Picker', value='rgb(0, 24, 24)', format='rgb'),\n", " pmui.ColorPicker(label='RGBA Color Picker', value='rgba(90, 255, 120, 0.5)', format='rgba'),\n", " pmui.ColorPicker(label='HSL Color Picker', value='hsl(0, 100%, 50%)', format='hsl'),\n", " pmui.ColorPicker(label='HSV Color Picker', value='hsv(0, 100%, 100%)', format='hsv'),\n", ")" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Alpha Channel\n", "\n", "Enable transparency control by setting the `alpha` parameter to `True`. This adds an alpha channel slider to the color picker, allowing users to adjust the opacity of their selected color:" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "pmui.ColorPicker(label='HEX Color Picker', value='#99ef78ff', alpha=True)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Color Options\n", "\n", "The `color` parameter allows you to visually distinguish the `ColorPicker` component when it's active or focused. This helps create a cohesive visual hierarchy in your application. Available color options include \"default\", \"primary\", \"secondary\", \"error\", \"info\", \"success\", \"warning\", \"light\", \"dark\", and \"danger\":" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "scrolled": true }, "outputs": [], "source": [ "pmui.FlexBox(\n", " *[pmui.ColorPicker(label=color, color=color, value='#f3f3f3') for color in pmui.ColorPicker.param.color.objects]\n", ")" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Variant Styles\n", "\n", "The `variant` parameter controls the visual appearance of the input field, allowing you to match your application's design aesthetic. Choose from \"filled\", \"outlined\" (default), or \"standard\":" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "pmui.FlexBox(\n", " pmui.ColorPicker(label='Filled', variant=\"filled\"),\n", " pmui.ColorPicker(label='Outlined', variant=\"outlined\"),\n", " pmui.ColorPicker(label='Standard', variant=\"standard\"),\n", ")" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Size\n", "\n", "The `size` parameter controls the size of the input. Choose from \"small\", \"medium\" (default), or \"large\":" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "pmui.FlexBox(\n", " pmui.ColorPicker(label='Small', size=\"small\"),\n", " pmui.ColorPicker(label='Medium', size=\"medium\"),\n", " pmui.ColorPicker(label='Large', size=\"large\"),\n", ")" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Disabled and Loading\n", "\n", "Like other widgets, the `ColorPicker` can be disabled and/or show a loading indicator:" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "pmui.ColorPicker(label='Color Picker', value='#99ef78', disabled=True, loading=True)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Example: Color Designer\n", "\n", "This example demonstrates how to use the `ColorPicker` widget to select a color and interactively display the selected color." ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "import panel as pn\n", "import panel_material_ui as pmui\n", "\n", "pn.extension()\n", "\n", "text_color = pmui.ColorPicker(label=\"Text Color\", value=\"#e91e63\")\n", "\n", "def get_result(color):\n", " return f\"{color}\"\n", "\n", "result = pn.bind(get_result, text_color)\n", "\n", "pmui.Column(\"# 🎨 Color Designer\", result, text_color,)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### API Reference\n", "\n", "#### Parameters" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "colorpicker.api(jslink=True)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### References\n", "\n", "**Panel Documentation:**\n", "\n", "- [How-to guides on interactivity](https://panel.holoviz.org/how_to/interactivity/index.html) - Learn how to add interactivity to your applications using widgets\n", "- [Setting up callbacks and links](https://panel.holoviz.org/how_to/links/index.html) - Connect parameters between components and create reactive interfaces\n", "- [Declarative UIs with Param](https://panel.holoviz.org/how_to/param/index.html) - Build parameter-driven applications\n", "\n", "**Material UI DatePicker:**\n", "\n", "- [Material UI ColorPicker Reference](https://viclafouch.github.io/mui-color-input/) - Complete documentation for the underlying Material UI component\n", "- [Material UI ColorPicker API](https://viclafouch.github.io/mui-color-input/docs/api-reference/) - 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.9" } }, "nbformat": 4, "nbformat_minor": 4 }