#!/usr/bin/env python
# coding: utf-8
# In[7]:
from awesome_panel_extensions.awesome_panel.notebook import Header
Header(folder="examples/reference/frameworks/fast", notebook="FastLiteralAreaInput.ipynb")
# # Fast LiteralAreaInput - Reference Guide
#
# The `FastLiteralAreaInput` widget is based on the [fast-text-field](https://explore.fast.design/components/fast-text-field) web component and extends the built in [Panel LiteralAreaInput](https://panel.holoviz.org/reference/widgets/LiteralAreaInput.html) widget.
#
#
#
#  |
#
#
#
#
# #### Parameters:
#
# ##### Core
#
# * **``value``** (str): Parsed value of the indicated type
# * **``type``** (type or tuple(type)): A Python literalarea type (e.g. list, dict, set, int, float, bool, str)
# * **``serializer (str['ast', 'json])``**: The serialization (and deserialization) method to use. 'ast' uses ast.literalarea_eval and 'json' uses json.loads and json.dumps.
#
# ###### Display
#
#
# * **``name``** (str): The label of the LiteralAreaInput.
# * **``placeholder``** (string): A placeholder string displayed when no value is entered.
# * **``apperance``** (string): Determines the appearance of the LiteralAreaInput. One of `outline` or `filled`. Defaults to `outline`.
# * **``max_length``** (integer): The maximum number of characters. Default is 5000.
# * **``disabled``** (boolean): Whether or not the LiteralAreaInput is disabled. Defaults to False.
# * **``readonly``** (bool): Whether or not the LiteralAreaInput is read only. Defaults to `False`.
#
#
#
# The `FastLiteralAreaInput` has the same layout and styling parameters as most other widgets. For example `width` and `sizing_mode`.
#
# Please note that you can only use the Fast components inside a custom Panel template that
#
# - Loads the [Fast `javascript` library](https://www.fast.design/docs/components/getting-started#from-cdn).
# - Wraps the content of the `` html tag inside the [fast-design-system-provider](https://www.fast.design/docs/components/getting-started#add-components) tag.
#
# We provide the `FastTemplate` for easy usage.
#
# 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.
#
# Please note that Fast components will not work in older, legacy browser like Internet Explorer.
#
# ___
#
# Let's start by importing the dependencies
# In[8]:
import param
import panel as pn
from awesome_panel_extensions.frameworks.fast import FastTemplate, FastLiteralAreaInput
pn.config.sizing_mode = "stretch_width"
pn.extension()
# ## Parameters
#
# Let's explore the parameters of the `FastLiteralAreaInput`.
# In[9]:
LiteralAreaInput = FastLiteralAreaInput(name="List Input", sizing_mode="fixed", width=300, appearance="outline", placeholder="Input a list. For example ['a', 'b']", type=list)
app=pn.Row(
LiteralAreaInput
)
template=FastTemplate(main=[app])
template
# In[10]:
LiteralAreaInput_parameters = ["name", "value", "disabled", "placeholder", "appearance", "autofocus", "readonly", "height", "width", "sizing_mode"]
settings_pane = pn.WidgetBox(pn.Param(LiteralAreaInput, parameters=LiteralAreaInput_parameters, show_name=False))
settings_pane
# ## pn.Param
#
# Let's verify that that `FastLiteralAreaInput` can be used as a widget by `pn.Param`.
# In[11]:
import param
import panel as pn
WIDGETS = {
"a_literalarea": {
"type": FastLiteralAreaInput, "sizing_mode": "fixed", "width": 400, "placeholder": "Input a dictionary!"
}
}
class ParameterizedApp(param.Parameterized):
a_literalarea = param.Dict(default=None, label="A Dictionary")
view = param.Parameter()
def __init__(self, **params):
super().__init__(**params)
self.view = pn.Param(self, parameters=["a_literalarea"], widgets=WIDGETS)
parameterized_app = ParameterizedApp()
paremeterized_template = FastTemplate(main=[parameterized_app.view])
paremeterized_template
# In[12]:
pn.Param(parameterized_app.param.a_literalarea)
# ## Resources
#
# - [fast.design](https://fast.design/)
# - [fast-text-field](https://explore.fast.design/components/fast-text-field)
#
# ## Known Issues
#
# - 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).
# - It's not possible to specify the `type` of literalarea in a `pn.Parameterized` class. See [Panel Github 1574](https://github.com/holoviz/panel/issues/1574).
#
#
#
#  |
#
#
#