diff --git a/docs/source/examples/quickstart.nblink b/docs/source/examples/quickstart.nblink new file mode 100644 index 0000000..a229b3f --- /dev/null +++ b/docs/source/examples/quickstart.nblink @@ -0,0 +1,4 @@ +{ + "path": "../../../examples/quickstart/quickstart.ipynb", + "extra-media": ["../../../examples/quickstart/"] +} diff --git a/examples/quickstart/quickstart.ipynb b/examples/quickstart/quickstart.ipynb new file mode 100644 index 0000000..268ac79 --- /dev/null +++ b/examples/quickstart/quickstart.ipynb @@ -0,0 +1,111 @@ +{ + "cells": [ + { + "cell_type": "markdown", + "id": "50bf2ecd", + "metadata": {}, + "source": [ + "## A quick start example" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "abb6ce5e-4199-4989-9ea2-60dbf49a28ee", + "metadata": {}, + "outputs": [], + "source": [ + "from ipyflex import FlexLayout\n", + "import ipywidgets as ipw" + ] + }, + { + "cell_type": "markdown", + "id": "5d41f688-c3fc-4cd9-92ae-c23cdb177a82", + "metadata": {}, + "source": [ + "### Create the widget dictionary for FlexLayout" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "0ab108e9-15e9-4416-ba14-d13187d2f3e3", + "metadata": {}, + "outputs": [], + "source": [ + "widgets = {\n", + " 'Widget 1' : ipw.HTML('

Widget 1

'),\n", + " 'Widget 2' : ipw.HTML('

Widget 2

'),\n", + " 'Widget 3' : ipw.HTML('

Widget 3

'),\n", + " 'Widget 4' : ipw.HTML('

Widget 4

')\n", + "}" + ] + }, + { + "cell_type": "markdown", + "id": "c7873e0b-f17c-4d79-8d3b-653ea9b5cf04", + "metadata": {}, + "source": [ + "### Initialize an empty dashboard" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "3d447fb5-cd59-4676-9503-e7ca96248d15", + "metadata": {}, + "outputs": [], + "source": [ + "FlexLayout(widgets, style={'height':'400px'})" + ] + }, + { + "cell_type": "markdown", + "id": "0974fac0-3992-47e0-ac51-7eef07dcabf0", + "metadata": {}, + "source": [ + "### Load saved template with a non-editable dashboard" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "10f6ef62-22ed-4a54-88a3-2c2507dca861", + "metadata": {}, + "outputs": [], + "source": [ + "FlexLayout(widgets, style={'height':'400px'}, template='quickstart.json', editable=False)" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "c00447f7-018d-46fd-a030-fc05c8c4337d", + "metadata": {}, + "outputs": [], + "source": [] + } + ], + "metadata": { + "kernelspec": { + "display_name": "Python 3 (ipykernel)", + "language": "python", + "name": "python3" + }, + "language_info": { + "codemirror_mode": { + "name": "ipython", + "version": 3 + }, + "file_extension": ".py", + "mimetype": "text/x-python", + "name": "python", + "nbconvert_exporter": "python", + "pygments_lexer": "ipython3", + "version": "3.9.7" + } + }, + "nbformat": 4, + "nbformat_minor": 5 +} diff --git a/examples/quickstart/quickstart.json b/examples/quickstart/quickstart.json new file mode 100644 index 0000000..34af810 --- /dev/null +++ b/examples/quickstart/quickstart.json @@ -0,0 +1 @@ +{"global": {"tabSetEnableClose": true, "tabSetTabLocation": "bottom"}, "borders": [], "layout": {"type": "row", "id": "#1", "children": [{"type": "tabset", "id": "#2", "selected": 1, "children": [{"type": "tab", "id": "#3", "name": "Section one", "component": "sub", "config": {"model": {"global": {"tabSetEnableClose": true}, "borders": [], "layout": {"type": "row", "id": "#1", "children": [{"type": "row", "id": "#b09b5ffa-7a8d-44b2-847f-280728d3e7ea", "weight": 50, "children": [{"type": "tabset", "id": "#8764e7b4-7f0d-4651-9b24-066b9bdec96f", "weight": 50, "children": [{"type": "tab", "id": "#ab1535be-7b38-40a6-9a5c-a1ff6cbe8523", "name": "Widget 1", "component": "Widget", "config": {"layoutID": "#3"}}]}, {"type": "tabset", "id": "#a6754c6f-5d37-4fa6-8ffe-e3fb612bf4ae", "weight": 50, "children": [{"type": "tab", "id": "#6ab7fd03-c6c7-462c-8b22-5f14513aba79", "name": "Widget 2", "component": "Widget", "config": {"layoutID": "#3"}}], "active": true}]}, {"type": "row", "id": "#412020ec-fba2-4fe0-85ec-1e04810b9f83", "weight": 50, "children": [{"type": "tabset", "id": "#5d02d2a1-6339-4f97-a774-af1fa8b43d46", "weight": 50, "children": [{"type": "tab", "id": "#3ad2b737-bd89-4623-9212-e3c2426b197d", "name": "Widget 3", "component": "Widget", "config": {"layoutID": "#3"}}]}, {"type": "tabset", "id": "#dc7ea543-d515-4420-906d-fae94d725105", "weight": 50, "children": [{"type": "tab", "id": "#31099ffe-2610-4eb9-8775-e3f6b1280bdc", "name": "Widget 4", "component": "Widget", "config": {"layoutID": "#3"}}]}]}]}}}}, {"type": "tab", "id": "#8256b666-655b-4402-8fb6-af32037c637c", "name": "Section two", "component": "sub", "config": {"model": {"global": {"tabSetEnableClose": true}, "borders": [], "layout": {"type": "row", "id": "#1", "children": [{"type": "row", "id": "#d900474d-4128-4bc7-85f6-24f23a77bac2", "weight": 50, "children": [{"type": "row", "id": "#67d2704a-02dc-4306-8619-1d6d45065afb", "weight": 50, "children": [{"type": "tabset", "id": "#b4229989-dc93-4472-ad4b-ea97799d5f91", "weight": 50, "children": [{"type": "tab", "id": "#a38f65f8-bd56-42f1-9a28-8835e32e32c4", "name": "Widget 1", "component": "Widget", "config": {"layoutID": "#8256b666-655b-4402-8fb6-af32037c637c"}}]}, {"type": "tabset", "id": "#9c4935d2-f4d6-4ff0-a4cf-f442a142101e", "weight": 50, "children": [{"type": "tab", "id": "#9346b8f4-28c9-4593-8bb6-0b4acbb4ad2c", "name": "Widget 2", "component": "Widget", "config": {"layoutID": "#8256b666-655b-4402-8fb6-af32037c637c"}}]}]}, {"type": "tabset", "id": "#ce4fa9aa-256a-46cb-a028-f13e49b19365", "weight": 50, "children": [{"type": "tab", "id": "#615bd439-b54e-423e-9c6b-fa53a86ad2d6", "name": "Widget 3", "component": "Widget", "config": {"layoutID": "#8256b666-655b-4402-8fb6-af32037c637c"}}]}]}, {"type": "tabset", "id": "#a9c63684-0bbb-42d5-858b-ab4ef4a30906", "weight": 50, "children": [{"type": "tab", "id": "#e19b55c7-d7c7-487d-a856-9ff30d89222b", "name": "Widget 4", "component": "Widget", "config": {"layoutID": "#8256b666-655b-4402-8fb6-af32037c637c"}}, {"type": "tab", "id": "#05b24129-ec40-4b6f-ba82-ac4ad7492405", "name": "Placeholder widget", "component": "Widget", "config": {"layoutID": "#8256b666-655b-4402-8fb6-af32037c637c"}}], "active": true}]}}}}], "active": true}]}} \ No newline at end of file