No library can cover all the specialized widgets a user may want… but a good one makes it easy for the user to create their own specialized widget that can be used alongside the library!
Panel is one of those cool libraries–you can create interactive web apps and data dashboards straight from Python code, but if you need more than what’s built-in, you can also create your own custom widgets using Panel’s ReactiveHTML class!
In this blog post, we will demo how to use ReactiveHTML for creating:
- collapsible sections
- toggle icons
And demonstrate how we can integrate these components into built-in Panel components.
Let’s get to it!
Bootstrapping with ChatGPT
To get started using ReactiveHTML, you need an HTML template. If you’re unfamiliar with HTML, don’t fret; there are tons of examples so ChatGPT can synthesize an example easily!
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Details Tag Example</title>
<summary>Click to expand</summary>
<p>This is some hidden content that can be expanded and collapsed.</p>
<p>Other content on the page...</p>
If we save this code to
index.html and open it, we get the following:
Since we just want the collapsible section, let’s only extract the details tag and start building our custom ReactiveHTML widget.
import panel as pn