Skip to content

Commit 0674720

Browse files
committed
fixes #717
1 parent 6ba1299 commit 0674720

File tree

2 files changed

+130
-65
lines changed

2 files changed

+130
-65
lines changed

fasthtml/components.py

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
# AUTOGENERATED! DO NOT EDIT! File to edit: ../nbs/api/01_components.ipynb.
44

55
# %% auto 0
6-
__all__ = ['named', 'html_attrs', 'hx_attrs', 'hx_attrs_annotations', 'show', 'attrmap_x', 'ft_html', 'ft_hx', 'File',
6+
__all__ = ['named', 'html_attrs', 'hx_attrs', 'hx_attrs_annotations', 'attrmap_x', 'ft_html', 'ft_hx', 'File', 'show',
77
'fill_form', 'fill_dataclass', 'find_inputs', 'html2ft', 'sse_message', 'A', 'Abbr', 'Address', 'Area',
88
'Article', 'Aside', 'Audio', 'B', 'Base', 'Bdi', 'Bdo', 'Blockquote', 'Body', 'Br', 'Button', 'Canvas',
99
'Caption', 'Cite', 'Code', 'Col', 'Colgroup', 'Data', 'Datalist', 'Dd', 'Del', 'Details', 'Dfn', 'Dialog',
@@ -31,12 +31,6 @@
3131
try: from IPython import display
3232
except ImportError: display=None
3333

34-
# %% ../nbs/api/01_components.ipynb
35-
def show(ft,*rest):
36-
"Renders FT Components into HTML within a Jupyter notebook."
37-
if rest: ft = (ft,)+rest
38-
display.display(display.HTML(to_xml(ft)))
39-
4034
# %% ../nbs/api/01_components.ipynb
4135
@patch
4236
def __str__(self:FT): return self.id if self.id else object.__str__(self)
@@ -122,6 +116,19 @@ def File(fname):
122116
"Use the unescaped text in file `fname` directly"
123117
return NotStr(Path(fname).read_text())
124118

119+
# %% ../nbs/api/01_components.ipynb
120+
def show(ft, *rest, iframe=False, height='auto', style=None):
121+
"Renders FT Components into HTML within a Jupyter notebook."
122+
if rest: ft = (ft,)+rest
123+
res = to_xml(ft)
124+
if iframe:
125+
style = "border: none; " + (style or "")
126+
cfg = dict(frameborder=0, width='100%', height=height, style=style)
127+
res = to_xml(Iframe(srcdoc=res, **cfg))
128+
with warnings.catch_warnings():
129+
warnings.simplefilter("ignore", UserWarning)
130+
display.display(display.HTML(res))
131+
125132
# %% ../nbs/api/01_components.ipynb
126133
def _fill_item(item, obj):
127134
if not isinstance(item,FT): return item

nbs/api/01_components.ipynb

Lines changed: 116 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -59,63 +59,7 @@
5959
"id": "17d5a90b",
6060
"metadata": {},
6161
"source": [
62-
"### Str, show and repr"
63-
]
64-
},
65-
{
66-
"cell_type": "code",
67-
"execution_count": null,
68-
"id": "ad9c6bf2",
69-
"metadata": {},
70-
"outputs": [],
71-
"source": [
72-
"#| export\n",
73-
"def show(ft,*rest):\n",
74-
" \"Renders FT Components into HTML within a Jupyter notebook.\"\n",
75-
" if rest: ft = (ft,)+rest\n",
76-
" display.display(display.HTML(to_xml(ft)))"
77-
]
78-
},
79-
{
80-
"cell_type": "code",
81-
"execution_count": null,
82-
"id": "cc5a1cc7",
83-
"metadata": {},
84-
"outputs": [],
85-
"source": [
86-
"sentence = P(Strong(\"FastHTML is \", I(\"Fast\")), id='sentence_id')"
87-
]
88-
},
89-
{
90-
"cell_type": "markdown",
91-
"id": "45f8a074",
92-
"metadata": {},
93-
"source": [
94-
"When placed within the `show()` function, this will render the HTML in Jupyter notebooks."
95-
]
96-
},
97-
{
98-
"cell_type": "code",
99-
"execution_count": null,
100-
"id": "4d1dcd4a",
101-
"metadata": {},
102-
"outputs": [
103-
{
104-
"data": {
105-
"text/html": [
106-
"<p id=\"sentence_id\">\n",
107-
"<strong>FastHTML is <i>Fast</i></strong></p>\n"
108-
],
109-
"text/plain": [
110-
"<IPython.core.display.HTML object>"
111-
]
112-
},
113-
"metadata": {},
114-
"output_type": "display_data"
115-
}
116-
],
117-
"source": [
118-
"show(sentence)"
62+
"### Str and repr"
11963
]
12064
},
12165
{
@@ -129,7 +73,7 @@
12973
{
13074
"cell_type": "code",
13175
"execution_count": null,
132-
"id": "4d605030",
76+
"id": "f99aa358",
13377
"metadata": {},
13478
"outputs": [
13579
{
@@ -151,6 +95,7 @@
15195
}
15296
],
15397
"source": [
98+
"sentence = P(Strong(\"FastHTML is \", I(\"Fast\")), id='sentence_id')\n",
15499
"sentence"
155100
]
156101
},
@@ -681,6 +626,119 @@
681626
"a"
682627
]
683628
},
629+
{
630+
"cell_type": "markdown",
631+
"id": "1579f7f1",
632+
"metadata": {},
633+
"source": [
634+
"### show"
635+
]
636+
},
637+
{
638+
"cell_type": "code",
639+
"execution_count": null,
640+
"id": "7861dfe6",
641+
"metadata": {},
642+
"outputs": [],
643+
"source": [
644+
"#| export\n",
645+
"def show(ft, *rest, iframe=False, height='auto', style=None):\n",
646+
" \"Renders FT Components into HTML within a Jupyter notebook.\"\n",
647+
" if rest: ft = (ft,)+rest\n",
648+
" res = to_xml(ft)\n",
649+
" if iframe:\n",
650+
" style = \"border: none; \" + (style or \"\")\n",
651+
" cfg = dict(frameborder=0, width='100%', height=height, style=style)\n",
652+
" res = to_xml(Iframe(srcdoc=res, **cfg))\n",
653+
" with warnings.catch_warnings():\n",
654+
" warnings.simplefilter(\"ignore\", UserWarning)\n",
655+
" display.display(display.HTML(res))"
656+
]
657+
},
658+
{
659+
"cell_type": "markdown",
660+
"id": "a723b84b",
661+
"metadata": {},
662+
"source": [
663+
"When placed within the `show()` function, this will render the HTML in Jupyter notebooks."
664+
]
665+
},
666+
{
667+
"cell_type": "code",
668+
"execution_count": null,
669+
"id": "8d0c2583",
670+
"metadata": {},
671+
"outputs": [
672+
{
673+
"data": {
674+
"text/html": [
675+
"<p id=\"sentence_id\">\n",
676+
"<strong>FastHTML is <i>Fast</i></strong></p>\n"
677+
],
678+
"text/plain": [
679+
"<IPython.core.display.HTML object>"
680+
]
681+
},
682+
"metadata": {},
683+
"output_type": "display_data"
684+
}
685+
],
686+
"source": [
687+
"show(sentence)"
688+
]
689+
},
690+
{
691+
"cell_type": "markdown",
692+
"id": "a01d3046",
693+
"metadata": {},
694+
"source": [
695+
"You can also display full embedded pages in an iframe:"
696+
]
697+
},
698+
{
699+
"cell_type": "code",
700+
"execution_count": null,
701+
"id": "30d3422d",
702+
"metadata": {},
703+
"outputs": [
704+
{
705+
"data": {
706+
"text/html": [
707+
"<iframe srcdoc='&lt;!doctype html&gt;\n",
708+
"&lt;html&gt;\n",
709+
" &lt;head&gt;\n",
710+
" &lt;link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@picocss/pico@latest/css/pico.min.css\"&gt;\n",
711+
" &lt;/head&gt;\n",
712+
" &lt;body&gt;\n",
713+
" &lt;h2&gt;Heading 2&lt;/h2&gt;\n",
714+
" &lt;p&gt;Paragraph&lt;/p&gt;\n",
715+
" &lt;/body&gt;\n",
716+
"&lt;/html&gt;\n",
717+
"' width=\"100%\" height=\"100\" style=\"border: none; \"></iframe>"
718+
],
719+
"text/plain": [
720+
"<IPython.core.display.HTML object>"
721+
]
722+
},
723+
"metadata": {},
724+
"output_type": "display_data"
725+
}
726+
],
727+
"source": [
728+
"picocss = \"https://cdn.jsdelivr.net/npm/@picocss/pico@latest/css/pico.min.css\"\n",
729+
"picolink = (Link(rel=\"stylesheet\", href=picocss))\n",
730+
"\n",
731+
"fullpage = Html(\n",
732+
" Head(picolink),\n",
733+
" Body(\n",
734+
" H2(\"Heading 2\"),\n",
735+
" P(\"Paragraph\")\n",
736+
" )\n",
737+
")\n",
738+
"\n",
739+
"show(fullpage, height=100, iframe=True)"
740+
]
741+
},
684742
{
685743
"cell_type": "markdown",
686744
"id": "41a00fe7",

0 commit comments

Comments
 (0)