Merge pull request #7 from trungleduc/add-example

Add a quickstart example

docs/source/examples/quickstart.nblink

@@ -0,0 +1,4 @@
+{
+  "path": "../../../examples/quickstart/quickstart.ipynb",
+  "extra-media": ["../../../examples/quickstart/"]
+}

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('<h1>Widget 1</h1>'),\n",
+    "    'Widget 2' : ipw.HTML('<h1>Widget 2</h1>'),\n",
+    "    'Widget 3' : ipw.HTML('<h1>Widget 3</h1>'),\n",
+    "    'Widget 4' : ipw.HTML('<h1>Widget 4</h1>')\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
+}

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}]}}