|
59 | 59 | "id": "17d5a90b", |
60 | 60 | "metadata": {}, |
61 | 61 | "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" |
119 | 63 | ] |
120 | 64 | }, |
121 | 65 | { |
|
129 | 73 | { |
130 | 74 | "cell_type": "code", |
131 | 75 | "execution_count": null, |
132 | | - "id": "4d605030", |
| 76 | + "id": "f99aa358", |
133 | 77 | "metadata": {}, |
134 | 78 | "outputs": [ |
135 | 79 | { |
|
151 | 95 | } |
152 | 96 | ], |
153 | 97 | "source": [ |
| 98 | + "sentence = P(Strong(\"FastHTML is \", I(\"Fast\")), id='sentence_id')\n", |
154 | 99 | "sentence" |
155 | 100 | ] |
156 | 101 | }, |
|
681 | 626 | "a" |
682 | 627 | ] |
683 | 628 | }, |
| 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='<!doctype html>\n", |
| 708 | + "<html>\n", |
| 709 | + " <head>\n", |
| 710 | + " <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@picocss/pico@latest/css/pico.min.css\">\n", |
| 711 | + " </head>\n", |
| 712 | + " <body>\n", |
| 713 | + " <h2>Heading 2</h2>\n", |
| 714 | + " <p>Paragraph</p>\n", |
| 715 | + " </body>\n", |
| 716 | + "</html>\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 | + }, |
684 | 742 | { |
685 | 743 | "cell_type": "markdown", |
686 | 744 | "id": "41a00fe7", |
|
0 commit comments