ReactiveHTML _child_config not working #2681
Labels
type: docs
Related to the Panel documentation and examples
Comments
MarcSkovMadsen
added
TRIAGE
|
Agree that the literal contents should be unescaped before inserting. |
|
Note that this is never valid: _template = """
${icon_open}${icon_closed}
"""ReactiveHTML dynamic features work by finding DOM nodes and then either templating the value or by setting the attribute. In order to set an attribute there must be a fixed DOM node to set the attribute on. So to link the 'literal' children you must provide unique nodes to insert them on: import panel as pn
import param
pn.extension("vega", sizing_mode="stretch_width")
SVG_OPEN = """<svg style="stroke: #e62f63;" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" slot="collapsed-icon">
<path d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M9 5.44446V12.5556" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round"></path></svg>"""
SVG_CLOSED = """<svg style="stroke: #e62f63;" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" slot="expanded-icon">
<path d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round"></path></svg>"""
# Should probably inherit from pn.pane.ListLike also similarly to pn.Column
class FastAccordion(pn.reactive.ReactiveHTML):
icon_open = param.String(SVG_OPEN)
icon_closed = param.String(SVG_CLOSED)
_template = """
<div id="accordion">
<div id="open">${icon_open}</div>
<div id="close">${icon_closed}</div>
</div>
"""
_child_config = {
'icon_open': 'literal',
'icon_closed': 'literal'
} |
|
Looks like there are some issues when we want to use these in a loop. Specifically we can't do something like this: _template = """
<div id="accordion">
{% for obj in objects %}
<div id="open">${icon_open}</div>
<div id="close">${icon_closed}</div>
<div id="content">${obj}</div>
{% endfor %}
</div>
"""That's because it doesn't know to append a loop index to the ids of the open and close div elements. For now I'd suggest just using templating and declaring the |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I'm on Panel 0.12.1.
While trying to create an Accordion Layout from the ReactiveHTML I could not get
_child_configworking.I would expect two SVG icons to display according to ReactiveHTML Guide. But I just see the escaped string
Additional Context - Works with
{{}}The text was updated successfully, but these errors were encountered: