{ "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\nChips 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\nFor 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* **`disabled`** (boolean): Whether the Chip is disabled, making it opaque and disabling click events.\n* **`label`** (str): The text content 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* **`description`** (str): A description which is shown when the widget is hovered.\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\nCreate a simple `Chip` by providing a label:" }, { "cell_type": "code", "execution_count": null, "id": "3c899dd7", "metadata": {}, "outputs": [], "source": "pmui.Chip(label=\"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(label=\"Click me!\")\n\npmui.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()\nclick_chip = pmui.Chip(label=\"Click me!\", on_click=clicks.append)\n\npmui.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(label=\"Completed\", icon=\"delete_icon\", margin=10),\n pmui.Chip(label=\"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\npmui.Chip(label=\"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(label=\"Small\", size=\"small\", margin=10),\n pmui.Chip(label=\"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(label=\"Filled\", variant=\"filled\", margin=10),\n pmui.Chip(label=\"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(label=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(label=\"Disabled Chip\", loading=True),\n pmui.Chip(label=\"Loading Chip\", loading=True, color=\"primary\"),\n)" }, { "cell_type": "code", "execution_count": null, "id": "52ad3d86", "metadata": {}, "outputs": [], "source": "pmui.Chip(label=\"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.14.4" } }, "nbformat": 4, "nbformat_minor": 5 }