{ "cells": [ { "cell_type": "code", "execution_count": null, "id": "f8603430", "metadata": {}, "outputs": [], "source": [ "import panel as pn\n", "import panel_material_ui as pmui\n", "\n", "pn.extension()" ] }, { "cell_type": "markdown", "id": "b5336985", "metadata": {}, "source": [ "The `Chip` component represents compact elements that display an input, attribute, or action. Chips allow users to enter information, make selections, filter content, or trigger actions. They support text, icons, and click events.\n", "\n", "Chips are versatile components commonly used in:\n", "\n", "- Tag systems and filters\n", "- User input for categories\n", "- Action buttons in compact spaces\n", "- Selection indicators\n", "- Multi-select interfaces\n", "\n", "#### Parameters:\n", "\n", "For details on other options for customizing the component see the [customization guides](https://panel-material-ui.holoviz.org/customization/index.html).\n", "\n", "##### Core\n", "\n", "* **`clicks`** (int): The number of times the chip has been clicked (read-only). Default is 0.\n", "* **`object`** (str): The text content/label to display in the chip\n", "\n", "##### Display\n", "\n", "* **`color`** (str): The color variant of the chip, which must be one of `'default'` (white), `'primary'` (blue), `'success'` (green), `'info'` (yellow), `'light'` (light), or `'danger'` (red) or a valid CSS color value.\n", "* **`icon`** (str): Name of the icon to display in the chip (appears before the label)\n", "* **`size`** (str): Size of the chip - options include 'small' and 'medium' (default)\n", "* **`variant`** (str): Visual style variant - either 'filled' (default) or 'outlined'\n", "\n", "##### Styling\n", "\n", "- **`sx`** (dict): Component level styling API for advanced customization\n", "- **`theme_config`** (dict): Theming API for consistent design system integration\n", "\n", "#### Constructor Arguments\n", "\n", "* **`on_click`** (callable): A Python callback to be triggered when the chip is clicked\n", "* **`js_on_click`** (str): JavaScript code to be triggered when the chip is clicked\n", "\n", "#### Methods\n", "\n", "* **`on_click`** (callable): Registers a Python callback to be executed when the chip is clicked\n", "* **`js_on_click`** (callable): Allows defining JavaScript callbacks with `args` and `code` to be triggered when the chip is clicked\n", "\n", "___" ] }, { "cell_type": "markdown", "id": "a357073f", "metadata": {}, "source": [ "### Basic Usage\n", "\n", "Create a simple `Chip` by providing some text:" ] }, { "cell_type": "code", "execution_count": null, "id": "3c899dd7", "metadata": {}, "outputs": [], "source": [ "chip = pmui.Chip(\"Hello\")\n", "\n", "chip" ] }, { "cell_type": "markdown", "id": "7796e0bc-4acd-4fae-b37a-ec9061e8f71c", "metadata": {}, "source": [ "You can update the contents by setting the `object`:" ] }, { "cell_type": "code", "execution_count": null, "id": "bd924d6d", "metadata": {}, "outputs": [], "source": [ "chip.object = \"Hello World!\"" ] }, { "cell_type": "markdown", "id": "b19e7f08-cbcb-4bbe-b035-2be6320155ea", "metadata": {}, "source": [ "Let's change it back" ] }, { "cell_type": "code", "execution_count": null, "id": "fb801bb1-7a02-4a53-8e9e-dbda46cb3d57", "metadata": {}, "outputs": [], "source": [ "chip.object = \"Hello\"" ] }, { "cell_type": "markdown", "id": "480a142c-ec6b-4b2f-b912-9af0fe6ae7f4", "metadata": {}, "source": [ "The `Chip` also registers `clicks`:" ] }, { "cell_type": "code", "execution_count": null, "id": "80e851b6-32d0-4f3f-9e86-612f8db81e5b", "metadata": {}, "outputs": [], "source": [ "chip = pmui.Chip(\"Click me!\")\n", "\n", "pmui.Row(chip, pn.pane.Str(chip.param.clicks))" ] }, { "cell_type": "markdown", "id": "bf0b8818-0b2e-4125-8da2-c3b54e67be30", "metadata": {}, "source": [ "Click events can also be watched with `on_click`:" ] }, { "cell_type": "code", "execution_count": null, "id": "6fe7a271-a040-4636-9b2c-f08564014af2", "metadata": {}, "outputs": [], "source": [ "clicks = pmui.Column()\n", "click_chip = pmui.Chip(\"Click me!\", on_click=clicks.append)\n", "\n", "pmui.Row(click_chip, pn.pane.Str(click_chip.param.clicks))" ] }, { "cell_type": "markdown", "id": "7ddd407d-00fd-44ba-9202-65ed55685dd6", "metadata": {}, "source": [ "### Icons\n", "\n", "You may provide an `icon` either as a named icon from [Material Icon](https://fonts.google.com/icons?icon.set=Material+Icons):" ] }, { "cell_type": "code", "execution_count": null, "id": "62645f59-367a-4eab-ab45-29a931f46918", "metadata": {}, "outputs": [], "source": [ "pmui.Row(\n", " pmui.Chip(\"Completed\", icon=\"delete_icon\", margin=10),\n", " pmui.Chip(\"Featured\", icon=\"star_icon\", margin=10),\n", ")" ] }, { "cell_type": "markdown", "id": "25501ebe-565b-4e4c-8872-e36e20f9384e", "metadata": {}, "source": [ "or as an explicit SVG:" ] }, { "cell_type": "code", "execution_count": null, "id": "a0c4ae76-715c-4d9a-8d43-7ae35a98f73a", "metadata": {}, "outputs": [], "source": [ "search_icon = \"\"\"\n", "\n", "\"\"\"\n", "\n", "pmui.Chip('Search', icon=search_icon, variant=\"outlined\")" ] }, { "cell_type": "markdown", "id": "d50c2929", "metadata": {}, "source": [ "### Sizes\n", "\n", "The `Chip` component supports different sizes to fit various layout requirements:" ] }, { "cell_type": "code", "execution_count": null, "id": "699cfa21", "metadata": {}, "outputs": [], "source": [ "pmui.Row(\n", " pmui.Chip(\"Small\", size=\"small\", margin=10),\n", " pmui.Chip(\"Medium\", size=\"medium\", margin=10),\n", ")" ] }, { "cell_type": "markdown", "id": "97f0b54b", "metadata": {}, "source": [ "### Variants\n", "\n", "The `Chip` component offers different shape variants:\n", "\n", "- **Filled**: Default style with color \n", "- **Outlined**: Sharp corners for a more geometric look" ] }, { "cell_type": "code", "execution_count": null, "id": "6e38dac3", "metadata": {}, "outputs": [], "source": [ "pmui.Row(\n", " pmui.Chip(\"Filled\", variant=\"filled\", margin=10),\n", " pmui.Chip(\"Outlined\", variant=\"outlined\", margin=10),\n", ")" ] }, { "cell_type": "markdown", "id": "72a0facc", "metadata": {}, "source": [ "### Colors\n", "\n", "Customize the chip background colors for text and icon avatars to match your design system or indicate different user types:" ] }, { "cell_type": "code", "execution_count": null, "id": "e01545c6", "metadata": {}, "outputs": [], "source": [ "pmui.FlexBox(*(\n", " pmui.Chip(color, color=color, margin=10) for color in pmui.Chip.param.color.objects\n", "))" ] }, { "cell_type": "markdown", "id": "6f168c1e", "metadata": {}, "source": [ "### Loading\n", "\n", "The `Chip` component can be displayed in loading states:" ] }, { "cell_type": "code", "execution_count": null, "id": "48697e4a", "metadata": {}, "outputs": [], "source": [ "pmui.Row(\n", " pmui.Chip(\"Disabled Chip\", loading=True),\n", " pmui.Chip(\"Loading Chip\", loading=True, color=\"primary\"),\n", ")" ] }, { "cell_type": "code", "execution_count": null, "id": "52ad3d86", "metadata": {}, "outputs": [], "source": [ "pmui.Chip(\"Interactive Chip\", icon=\"star\", color=\"primary\").api(jslink=True)" ] }, { "cell_type": "markdown", "id": "a210ed3a", "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 components\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 Chip:**\n", "\n", "- [Material UI Chip Reference](https://mui.com/material-ui/react-chip/) - Complete documentation for the underlying Material UI component\n", "- [Material UI Chip API](https://mui.com/material-ui/api/chip/) - 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": 5 }