{ "cells": [ { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "from awesome_panel_extensions.awesome_panel.notebook import Header\n", "Header(folder=\"examples/reference/frameworks/fast\", notebook=\"FastTextInput.ipynb\")" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "# Fast TextInput - Reference Guide\n", "\n", "The `FastTextInput` widget is based on the [fast-text-field](https://explore.fast.design/components/fast-text-field) web component and extends the built in [Panel TextInput](https://panel.holoviz.org/reference/widgets/TextInput.html).\n", "\n", "\n", " \n", " \n", " \n", "

\n", "\n", "\n", "#### Parameters:\n", "\n", "##### Core\n", "\n", "* **``value``** (str): A string value.\n", "\n", "###### Display\n", "\n", "* **``name``** (str): The label of the TextInput.\n", "* **``disabled``** (boolean): Whether or not the TextInput is disabled. Default is False.\n", "* **``placeholder``** (string): A placeholder string displayed when no value is entered.\n", "\n", "###### Fast\n", "\n", "* **``apperance``** (string): Determines the appearance of the textinput. One of `outline` or `filled`. Defaults to `outline`.\n", "* **``autofocus``** (bool): The autofocus attribute. Defaults to `False`.\n", "* **``type_of_text``** (bool): The type of text input. One of `email`, `password`, `tel`, `text`, `url`. Defaults to `text`.\n", "* **``readonly``** (bool): Whether or not the TextInput is read only. Defaults to `False`.\n", "\n", "\n", "\n", "The `FastTextInput` has the same layout and styling parameters as most other widgets. For example `width` and `sizing_mode`.\n", "\n", "Please note that you can only use the Fast components inside a custom Panel template that\n", "\n", "- Loads the [Fast `javascript` library](https://www.fast.design/docs/components/getting-started#from-cdn).\n", "- Wraps the content of the `` html tag inside the [fast-design-system-provider](https://www.fast.design/docs/components/getting-started#add-components) tag.\n", "\n", "We provide the `FastTemplate` for easy usage. \n", "\n", "You can also develop your own custom [Panel template](https://panel.holoviz.org/user_guide/Templates.html) if you need something special. For example combining it with more [fast.design](https://fast.design/) web components and the [Fluent Design System](https://www.microsoft.com/design/fluent/#/) to create **VS Code** and **Microsoft Office** like experiences.\n", "\n", "Please note that Fast components will not work in older, legacy browser like Internet Explorer.\n", "\n", "___\n", "\n", "Let's start by importing the dependencies" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "import param\n", "import panel as pn\n", "from awesome_panel_extensions.frameworks.fast import FastTemplate, FastTextInput\n", "\n", "pn.config.sizing_mode = \"stretch_width\"\n", "pn.extension()" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Parameters\n", "\n", "Let's explore the parameters of the `FastTextInput`." ] }, { "cell_type": "code", "execution_count": null, "metadata": { "scrolled": false }, "outputs": [], "source": [ "textinput = FastTextInput(name=\"The label\", sizing_mode=\"fixed\", width=300, appearance=\"outline\", placeholder=\"write something\")\n", "\n", "textinput_parameters = [\"name\", \"value\", \"disabled\", \"placeholder\", \"appearance\", \"autofocus\", \"type_of_text\", \"readonly\", \"height\", \"width\", \"sizing_mode\"]\n", "\n", "app=pn.Row(\n", " textinput\n", ")\n", "template=FastTemplate(main=[app])\n", "template" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "settings_pane = pn.WidgetBox(pn.Param(textinput, parameters=textinput_parameters, show_name=False))\n", "settings_pane" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## pn.Param\n", "\n", "Let's verify that that `FastTextInput` can be used as a widget by `pn.Param`." ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "WIDGETS = {\n", " \"some_text\": {\n", " \"type\": FastTextInput, \"sizing_mode\": \"fixed\", \"width\": 400, \"placeholder\": \"write some text!\"\n", " }\n", "}\n", "\n", "class ParameterizedApp(param.Parameterized):\n", " some_text = param.String(default=\"This is some text\", label=\"This is a label\")\n", " view = param.Parameter()\n", " \n", " \n", " def __init__(self, **params):\n", " super().__init__(**params)\n", " \n", " self.view = pn.Param(self, parameters=[\"some_text\"], widgets=WIDGETS)\n", " \n", "parameterized_app = ParameterizedApp()\n", "paremeterized_template = FastTemplate(main=[parameterized_app.view])\n", "paremeterized_template" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "pn.Param(parameterized_app.param.some_text)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Resources\n", "\n", "- [fast.design](https://fast.design/)\n", "- [fast-text-field](https://explore.fast.design/components/fast-text-field)\n", "\n", "## Known Issues\n", "\n", "- The `fast-text-field` web component has additional attributes (`max_length`, `min_length`, `pattern`, `size`, `spellcheck`, `required`) that does not seem to work. If you think they are important please upvote [Fast Github Issue 3852](https://github.com/microsoft/fast/issues/3852).\n", "\n", "\n", " \n", " \n", " \n", "

\n" ] } ], "metadata": { "kernelspec": { "display_name": "Python 3", "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.7.6" } }, "nbformat": 4, "nbformat_minor": 4 }