{
"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=\"FastTextAreaInput.ipynb\")"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# FastTextAreaInput - Reference Guide\n",
"\n",
"The `FastTextArea` widget is based on the [fast-text-area](https://explore.fast.design/components/fast-text-area) web component and extends the built in Panel [TextAreaInput](https://panel.holoviz.org/reference/widgets/TextAreaInput.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 TextArea.\n",
"* **``disabled``** (boolean): Whether or not the TextArea is disabled. Default is False.\n",
"* **``placeholder``** (string): A text to show the value is the empty string.\n",
"* **``max_length``** (integer): The maximum number of characters. Default is 5000.\n",
"\n",
"###### Fast\n",
"\n",
"* **``apperance``** (string): Determines the appearance of the TextArea. One of `outline` or `filled`. Defaults to `outline`.\n",
"* **``readonly``** (boolean): Whether or not the TextArea is read only. Defaults to `False`.\n",
"\n",
"The `FastTextArea` 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, FastTextAreaInput\n",
"\n",
"pn.extension()\n",
"pn.config.sizing_mode = \"stretch_width\""
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Parameters\n",
"\n",
"Let's explore the parameters of the `FastTextArea`."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"scrolled": false
},
"outputs": [],
"source": [
"text_area_input = FastTextAreaInput(name=\"The label\", appearance=\"outline\", placeholder=\"write something\")\n",
"\n",
"text_area_parameters = [\"name\", \"value\", \"disabled\", \"placeholder\", \"appearance\", \"readonly\", \"max_length\", \"height\", \"width\", \"sizing_mode\"]\n",
"\n",
"app=pn.Row(\n",
" text_area_input\n",
")\n",
"template=FastTemplate(main=[app])\n",
"template"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"settings_pane = pn.WidgetBox(pn.Param(text_area_input, parameters=text_area_parameters, show_name=False))\n",
"settings_pane"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## pn.Param\n",
"\n",
"Let's verify that that `FastTextArea` can be used as a widget by `pn.Param`."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"WIDGETS = {\n",
" \"some_text\": {\n",
" \"type\": FastTextAreaInput, \"placeholder\": \"write something\", \"sizing_mode\": \"fixed\", \"width\": 400\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": "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-area` attributes `height` and also `autofocus`, `rows`, `min_length` and `spellcheck` do not seem to work. If you would like them to work please upvote [Fast Github Issue 3874](https://github.com/microsoft/fast/issues/3874).\n",
"\n",
"They would have been\n",
"\n",
"* **``autofocus``** (boolean): The autofocus attribute. Defaults to `False`.\n",
"* **``rows``** (integer): The number of rows. Default is 2.\n",
"* **``min_length``** (integer): The minimum required length of the text string. Default is 0.\n",
"* **``spellcheck``** (boolean): Whether or not the spell check is enabled. Default is `False`.\n",
"\n",
"\n",
"\n",
" \n",
" | \n",
"
\n",
"
\n"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": []
}
],
"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
}