{ "cells": [ { "cell_type": "code", "execution_count": null, "id": "2b945ad1", "metadata": {}, "outputs": [], "source": [ "import panel as pn\n", "import panel_material_ui as pmui\n", "\n", "pn.extension()" ] }, { "cell_type": "markdown", "id": "eb98ac74", "metadata": {}, "source": [ "The `Rating` widget allows users to select a rating value, typically visualized as stars or icons. It is ideal for feedback forms, product reviews, and any scenario where a user needs to rate something on a scale.\n", "\n", "Discover more about interactive widgets in the [Panel interactivity guides](https://panel.holoviz.org/how_to/interactivity/index.html), or learn about [callbacks and links](https://panel.holoviz.org/how_to/links/index.html) and [declarative UIs with Param](https://panel.holoviz.org/how_to/param/index.html)." ] }, { "cell_type": "markdown", "id": "4f7966de", "metadata": {}, "source": [ "#### Parameters\n", "\n", "For customization options, see the [Panel Material UI customization guides](https://panel-material-ui.holoviz.org/customization/index.html).\n", "\n", "##### Core\n", "\n", "* **`disabled`** (`bool`): Whether the rating is disabled. If True, the user cannot change the rating and it is set to lower opacity.\n", "* **`end`** (`int`): The maximum rating value (number of icons).\n", "* **`readonly`** (`bool`): Whether the rating can be edited.\n", "* **`value`** (`float`): The current rating value.\n", "\n", "##### Display\n", "\n", "* **`color`** (`str`): The color variant of the icons, which must be one of `'default'` (white), `'primary'` (blue), `'success'` (green), `'info'` (yellow), `'light'` (light), or `'danger'` (red).\n", "* **`label`** (str): The title of the widget\n", "* **`only_selected`** (`bool`): Whether to highlight only the selected value.\n", "* **`precision`** (`float`): The precision of the rating value. Default is 1.0.\n", "* **`size`** (`str`): Size of the rating icons (`small`, `medium`, `large`).\n", "\n", "##### Styling\n", "\n", "- **`sx`** (dict): Component level styling API.\n", "- **`theme_config`** (dict): Theming API.\n", "\n", "##### Aliases\n", "\n", "For compatibility with Panel certain parameters are allowed as aliases:\n", "\n", "- **`name`**: Alias for `label`\n", "\n", "___" ] }, { "cell_type": "markdown", "id": "aed58f50", "metadata": {}, "source": [ "### Basic Usage\n", "\n", "Create a simple rating widget:" ] }, { "cell_type": "code", "execution_count": null, "id": "022eaacb", "metadata": {}, "outputs": [], "source": [ "rating = pmui.Rating(label='Rate the product', value=3)\n", "rating" ] }, { "cell_type": "markdown", "id": "c80aaeb7", "metadata": {}, "source": [ "You can read and set the value programmatically:" ] }, { "cell_type": "code", "execution_count": null, "id": "908e9758", "metadata": {}, "outputs": [], "source": [ "rating.value" ] }, { "cell_type": "markdown", "id": "fecc9be5", "metadata": {}, "source": [ "### Maximum Value\n", "\n", "Set the maximum rating value using `end`:" ] }, { "cell_type": "code", "execution_count": null, "id": "42a01468", "metadata": {}, "outputs": [], "source": [ "pmui.Rating(label='Max 10', end=10, value=7)" ] }, { "cell_type": "markdown", "id": "1e297c48-208b-433d-9e1a-a9e15c2f0cab", "metadata": {}, "source": [ "### Precision\n", "\n", "Set the precision using `precision`:" ] }, { "cell_type": "code", "execution_count": null, "id": "37143948-84f5-4c1d-80fc-fe0f05ae80c2", "metadata": {}, "outputs": [], "source": [ "pmui.Rating(label='Rate the product', value=3, precision=0.5)" ] }, { "cell_type": "markdown", "id": "d804e20f", "metadata": {}, "source": [ "### Size\n", "\n", "Choose between small, medium, and large icons:" ] }, { "cell_type": "code", "execution_count": null, "id": "3cb305f0", "metadata": {}, "outputs": [], "source": [ "pmui.FlexBox(\n", " pmui.Rating(label='Small', size=\"small\", value=2),\n", " pmui.Rating(label='Medium', size=\"medium\", value=3),\n", " pmui.Rating(label='Large', size=\"large\", value=4),\n", ")" ] }, { "cell_type": "markdown", "id": "414c4086", "metadata": {}, "source": [ "### Only Selected\n", "\n", "Highlight only the selected value:" ] }, { "cell_type": "code", "execution_count": null, "id": "9459df12", "metadata": {}, "outputs": [], "source": [ "pmui.Rating(label='Only Selected', only_selected=True, value=4)" ] }, { "cell_type": "markdown", "id": "30b589a0-ac8f-4bb9-859f-d05d38889021", "metadata": {}, "source": [ "### Disabled\n", "\n", "Disable the Rating:" ] }, { "cell_type": "code", "execution_count": null, "id": "e12ffbd2-7f97-4b6f-a5ee-142422258afc", "metadata": {}, "outputs": [], "source": [ "pmui.Rating(label=\"Disabled\", value=4, disabled=True)" ] }, { "cell_type": "markdown", "id": "ca09e534-90b8-4113-a2a7-644ac8f68890", "metadata": {}, "source": [ "### Readonly\n", "\n", "Make the `Rating` readonly:" ] }, { "cell_type": "code", "execution_count": null, "id": "03935300-7f92-4b7d-87c4-076bbce07c8a", "metadata": {}, "outputs": [], "source": [ "pmui.Rating(label=\"Readonly\", value=3, readonly=True)" ] }, { "cell_type": "markdown", "id": "bfc1a1d0-3c8d-4aad-951e-2fbd04691d22", "metadata": {}, "source": [ "### Loading\n", "\n", "Set the `Rating` to loading:" ] }, { "cell_type": "code", "execution_count": null, "id": "bb6ffeba-946f-4563-b4ef-316701499567", "metadata": {}, "outputs": [], "source": [ "pmui.Rating(label=\"Readonly\", value=3, loading=True)" ] }, { "cell_type": "markdown", "id": "f2faece5-88da-4d4a-bbd9-3bc1579d9fb1", "metadata": {}, "source": [ "### Icons\n", "\n", "Set the `icon` and `empty_icon` to customize the ratings:" ] }, { "cell_type": "code", "execution_count": null, "id": "2d805f39-b104-4919-acee-9faff283e62f", "metadata": {}, "outputs": [], "source": [ "pmui.Rating(\n", " label='Favorite', value=3, icon='favorite', empty_icon='favorite_outlined', color='danger'\n", ")" ] }, { "cell_type": "markdown", "id": "d60f4d00-8b83-4c4e-b6c8-75f0dd517da9", "metadata": {}, "source": [ "### Example: User Experience Rating" ] }, { "cell_type": "code", "execution_count": null, "id": "0e08d572-5781-457e-a3c1-29720c34b6ad", "metadata": {}, "outputs": [], "source": [ "import panel as pn\n", "import panel_material_ui as pmui\n", "\n", "pn.extension()\n", "\n", "rating = pmui.Rating(label='How was your experience?', value=0, end=5, precision=0.5)\n", "\n", "def feedback(val):\n", " if val == 0:\n", " return \"No rating selected yet.\"\n", " return f\"Thank you for rating us **{val}** stars!\"\n", "\n", "pn.Column(\n", " \"## Quick Feedback\",\n", " rating,\n", " pn.bind(feedback, rating)\n", ")" ] }, { "cell_type": "markdown", "id": "ed2a3f12", "metadata": {}, "source": [ "## API Reference\n", "\n", "Show all parameters and their current values:" ] }, { "cell_type": "code", "execution_count": null, "id": "119bfc62", "metadata": {}, "outputs": [], "source": [ "pmui.Rating(label='Rating').api(jslink=True)" ] }, { "cell_type": "markdown", "id": "7b4984bc", "metadata": {}, "source": [ "### References\n", "\n", "**Panel Documentation:**\n", "\n", "- [Panel Interactivity Guides](https://panel.holoviz.org/how_to/interactivity/index.html)\n", "- [Panel Callbacks and Links](https://panel.holoviz.org/how_to/links/index.html)\n", "- [Declarative UIs with Param](https://panel.holoviz.org/how_to/param/index.html)\n", "\n", "**Material UI Rating:**\n", "\n", "- [Material UI Rating Reference](https://mui.com/material-ui/react-rating/)\n", "- [Material UI Radping API](https://mui.com/material-ui/api/rating/) - 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.2" } }, "nbformat": 4, "nbformat_minor": 5 }