{ "cells": [ { "cell_type": "code", "execution_count": null, "id": "c37cc5f1", "metadata": {}, "outputs": [], "source": [ "import panel as pn\n", "import panel_material_ui as pmui\n", "\n", "pn.extension()" ] }, { "cell_type": "markdown", "id": "f5631418", "metadata": {}, "source": [ "The `Typography` component is used to display text with different styles and weights following Material UI's typography system. It provides consistent text styling across your application with predefined variants for headers, body text, and other text elements.\n", "\n", "Typography is fundamental to good user interface design as it establishes hierarchy, improves readability, and creates visual consistency. The component supports:\n", "\n", "- Semantic HTML heading tags (h1-h6)\n", "- Body text variants with different weights\n", "- Specialized text styles like captions and overlines\n", "- Custom colors and styling options\n", "- Markdown rendering capabilities\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", "* **`object`** (str): The text content to display - supports plain text and markdown\n", "\n", "##### Display\n", "\n", "* **`color`** (str): The color variant of the text, 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", "* **`variant`** (str): Typography variant that defines the text styling (h1, h2, body1, etc.)\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", "___" ] }, { "cell_type": "markdown", "id": "0d78bb6e", "metadata": {}, "source": [ "### Basic Usage" ] }, { "cell_type": "markdown", "id": "c406eeb5", "metadata": {}, "source": [ "Create typography with different text variants:" ] }, { "cell_type": "code", "execution_count": null, "id": "0e67867f", "metadata": {}, "outputs": [], "source": [ "simple_text = pmui.Typography(\"Hello World\", variant=\"h4\")\n", "simple_text" ] }, { "cell_type": "markdown", "id": "037e342d", "metadata": {}, "source": [ "Typography supports markdown rendering:" ] }, { "cell_type": "code", "execution_count": null, "id": "644da1cd", "metadata": {}, "outputs": [], "source": [ "markdown_text = pmui.Typography(\"This is **bold** and *italic* text with [links](https://panel.holoviz.org)\")\n", "markdown_text" ] }, { "cell_type": "markdown", "id": "bebeba9d", "metadata": {}, "source": [ "### Variants\n", "\n", "Typography supports various predefined variants that follow Material UI's type system:" ] }, { "cell_type": "code", "execution_count": null, "id": "d9923448", "metadata": {}, "outputs": [], "source": [ "pmui.Column(\n", " pmui.Typography(\"h1 Heading\", variant=\"h1\"),\n", " pmui.Typography(\"h2 Heading\", variant=\"h2\"),\n", " pmui.Typography(\"h3 Heading\", variant=\"h3\"),\n", " pmui.Typography(\"h4 Heading\", variant=\"h4\"),\n", " pmui.Typography(\"h5 Heading\", variant=\"h5\"),\n", " pmui.Typography(\"h6 Heading\", variant=\"h6\"),\n", ")" ] }, { "cell_type": "markdown", "id": "8d59db18", "metadata": {}, "source": [ "### Body Text Variants\n", "\n", "Different body text styles for various content needs:" ] }, { "cell_type": "code", "execution_count": null, "id": "b040d63f", "metadata": {}, "outputs": [], "source": [ "pmui.Column(\n", " pmui.Typography(\"Body 1 - Regular body text for most content\", variant=\"body1\"),\n", " pmui.Typography(\"Body 2 - Smaller body text for secondary content\", variant=\"body2\"),\n", " pmui.Typography(\"Subtitle 1 - Larger subtitle text\", variant=\"subtitle1\"),\n", " pmui.Typography(\"Subtitle 2 - Smaller subtitle text\", variant=\"subtitle2\"),\n", ")" ] }, { "cell_type": "markdown", "id": "4540415c", "metadata": {}, "source": [ "### Specialized Text Styles\n", "\n", "Typography variants for specific use cases:" ] }, { "cell_type": "code", "execution_count": null, "id": "8eb81c36", "metadata": {}, "outputs": [], "source": [ "pmui.Column(\n", " pmui.Typography(\"Caption text - Small descriptive text\", variant=\"caption\"),\n", " pmui.Typography(\"OVERLINE TEXT - All caps labels\", variant=\"overline\"),\n", " pmui.Typography(\"Button text\", variant=\"button\"),\n", ")" ] }, { "cell_type": "markdown", "id": "76f0afeb", "metadata": {}, "source": [ "### Colors\n", "\n", "Customize text colors using Material UI theme colors or CSS values:" ] }, { "cell_type": "code", "execution_count": null, "id": "4efa68a1", "metadata": {}, "outputs": [], "source": [ "pmui.Column(\n", " pmui.Typography(\"Primary color text\", color=\"primary\", variant=\"h6\"),\n", " pmui.Typography(\"Secondary color text\", color=\"secondary\", variant=\"h6\"),\n", " pmui.Typography(\"Error color text\", color=\"error\", variant=\"h6\"),\n", " pmui.Typography(\"Custom color text\", color=\"#9c27b0\", variant=\"h6\"),\n", ")" ] }, { "cell_type": "markdown", "id": "48b19fa8", "metadata": {}, "source": [ "### Markdown Support\n", "\n", "Typography automatically renders markdown content:" ] }, { "cell_type": "code", "execution_count": null, "id": "fda9a206", "metadata": {}, "outputs": [], "source": [ "markdown_content = \"\"\"\n", "# Markdown Example\n", "\n", "This is **bold text** and *italic text*.\n", "\n", "- List item 1\n", "- List item 2\n", "- List item 3\n", "\n", "> This is a blockquote\n", "\n", "[Link to Panel](https://panel.holoviz.org)\n", "\"\"\"\n", "\n", "pmui.Typography(markdown_content)" ] }, { "cell_type": "markdown", "id": "bfc35a6a-f9a9-490e-ad00-67ba197698e5", "metadata": {}, "source": [ "### Icon Support\n", "\n", "The `Typography` element can display material icons:" ] }, { "cell_type": "code", "execution_count": null, "id": "309bc072-0bc5-4b61-875e-465a250fd96b", "metadata": {}, "outputs": [], "source": [ "pmui.Column(\n", " pmui.Typography('''

Here is an inline lightbulb lightbulb.\n", " And here is a larger, standalone one:

'''),\n", " pmui.Typography('lightbulb'),\n", ")" ] }, { "cell_type": "markdown", "id": "b15a6c9a", "metadata": {}, "source": [ "### Loading\n", "\n", "The `Typography` component can be displayed in a loading state:" ] }, { "cell_type": "code", "execution_count": null, "id": "8b11e30f", "metadata": {}, "outputs": [], "source": [ "pmui.Column(\n", " pmui.Typography(\"Loading text\", loading=True, variant=\"body1\"),\n", ")" ] }, { "cell_type": "markdown", "id": "b35dc21d", "metadata": {}, "source": [ "### Example: Article Layout\n", "\n", "Typography components work well together to create structured content:" ] }, { "cell_type": "code", "execution_count": null, "id": "de697fc4", "metadata": {}, "outputs": [], "source": [ "pmui.Column(\n", " pmui.Typography(\"The Future of Data Visualization\", variant=\"h3\", color=\"primary\"),\n", " pmui.Typography(\"Published on July 8, 2025\", variant=\"caption\", color=\"text.secondary\"),\n", " pmui.Typography(\"\"\"\n", " Data visualization is rapidly evolving with new technologies and methodologies. \n", " **Interactive dashboards** are becoming more sophisticated, allowing users to \n", " explore data in real-time.\n", " \"\"\", variant=\"body1\"),\n", " pmui.Typography(\"Key Technologies\", variant=\"h5\"),\n", " pmui.Typography(\"\"\"\n", " - **[Panel](https://panel.holoviz.org/)**: For creating interactive web applications\n", " - **Bokeh**: For interactive visualizations\n", " - **HoloViz**: For the complete visualization ecosystem\n", " \"\"\", variant=\"body2\"),\n", " width=800\n", ")" ] }, { "cell_type": "markdown", "id": "4e09118d", "metadata": {}, "source": [ "### API Reference\n", "\n", "#### Parameters" ] }, { "cell_type": "code", "execution_count": null, "id": "e7982198", "metadata": {}, "outputs": [], "source": [ "pmui.Typography(\"Interactive Typography API\", variant=\"h5\").api(jslink=True)" ] }, { "cell_type": "markdown", "id": "ca8e9903", "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 Typography:**\n", "\n", "- [Material UI Typography Reference](https://mui.com/material-ui/react-typography/) - Complete documentation for the underlying Material UI component\n", "- [Material UI Typography API](https://mui.com/material-ui/api/typography/) - 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 }