Skip to content

Instantly share code, notes, and snippets.

@runfish5

runfish5/ipywidgets-html_colab_examples.ipynb

Last active November 24, 2022 08:13
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save runfish5/7e0d239a06ca8caf32ec71dbd162d31c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save runfish5/7e0d239a06ca8caf32ec71dbd162d31c to your computer and use it in GitHub Desktop.
Download ZIP
ipywidgets-html_colab_examples.ipynb
Display the source blob
Display the rendered blob
Raw
ipywidgets-html_colab_examples.ipynb
{
"nbformat": 4,
"nbformat_minor": 0,
"metadata": {
"colab": {
"provenance": [],
"authorship_tag": "ABX9TyOsLr6xg2c2La0AqMr/IvM1",
"include_colab_link": true
},
"kernelspec": {
"name": "python3",
"display_name": "Python 3"
},
"language_info": {
"name": "python"
},
"widgets": {
"application/vnd.jupyter.widget-state+json": {
"8d8827b13d664893b42d94790613b6e8": {
"model_module": "@jupyter-widgets/controls",
"model_name": "HTMLModel",
"model_module_version": "1.5.0",
"state": {
"_dom_classes": [],
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "HTMLModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/controls",
"_view_module_version": "1.5.0",
"_view_name": "HTMLView",
"description": "",
"description_tooltip": null,
"layout": "IPY_MODEL_ed48d0949cff450d9885b6a3a1525f83",
"placeholder": "​",
"style": "IPY_MODEL_d7aae9220f144386b77986a7070b3a6f",
"value": "<style>.font_blue {color: blue;}</style>"
}
},
"ed48d0949cff450d9885b6a3a1525f83": {
"model_module": "@jupyter-widgets/base",
"model_name": "LayoutModel",
"model_module_version": "1.2.0",
"state": {
"_model_module": "@jupyter-widgets/base",
"_model_module_version": "1.2.0",
"_model_name": "LayoutModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "LayoutView",
"align_content": null,
"align_items": null,
"align_self": null,
"border": null,
"bottom": null,
"display": null,
"flex": null,
"flex_flow": null,
"grid_area": null,
"grid_auto_columns": null,
"grid_auto_flow": null,
"grid_auto_rows": null,
"grid_column": null,
"grid_gap": null,
"grid_row": null,
"grid_template_areas": null,
"grid_template_columns": null,
"grid_template_rows": null,
"height": null,
"justify_content": null,
"justify_items": null,
"left": null,
"margin": null,
"max_height": null,
"max_width": null,
"min_height": null,
"min_width": null,
"object_fit": null,
"object_position": null,
"order": null,
"overflow": null,
"overflow_x": null,
"overflow_y": null,
"padding": null,
"right": null,
"top": null,
"visibility": null,
"width": null
}
},
"d7aae9220f144386b77986a7070b3a6f": {
"model_module": "@jupyter-widgets/controls",
"model_name": "DescriptionStyleModel",
"model_module_version": "1.5.0",
"state": {
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "DescriptionStyleModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "StyleView",
"description_width": ""
}
},
"00c75ccf4fbe4eb6a84fad5d60c074d2": {
"model_module": "@jupyter-widgets/controls",
"model_name": "ButtonModel",
"model_module_version": "1.5.0",
"state": {
"_dom_classes": [
"font_blue"
],
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "ButtonModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/controls",
"_view_module_version": "1.5.0",
"_view_name": "ButtonView",
"button_style": "",
"description": "This is a 𝗯𝗹𝘂𝗲 𝗰𝗼𝗹𝗼𝗿𝗲𝗱 𝗲𝗮𝗿𝘁𝗵",
"disabled": false,
"icon": "",
"layout": "IPY_MODEL_94fbb1b3d52a42398312bfd6ab3d94be",
"style": "IPY_MODEL_29cb5e2092bd4696bd3e4b018052457e",
"tooltip": ""
}
},
"94fbb1b3d52a42398312bfd6ab3d94be": {
"model_module": "@jupyter-widgets/base",
"model_name": "LayoutModel",
"model_module_version": "1.2.0",
"state": {
"_model_module": "@jupyter-widgets/base",
"_model_module_version": "1.2.0",
"_model_name": "LayoutModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "LayoutView",
"align_content": null,
"align_items": null,
"align_self": null,
"border": null,
"bottom": null,
"display": null,
"flex": null,
"flex_flow": null,
"grid_area": null,
"grid_auto_columns": null,
"grid_auto_flow": null,
"grid_auto_rows": null,
"grid_column": null,
"grid_gap": null,
"grid_row": null,
"grid_template_areas": null,
"grid_template_columns": null,
"grid_template_rows": null,
"height": "40px",
"justify_content": null,
"justify_items": null,
"left": null,
"margin": null,
"max_height": null,
"max_width": null,
"min_height": null,
"min_width": null,
"object_fit": null,
"object_position": null,
"order": null,
"overflow": null,
"overflow_x": null,
"overflow_y": null,
"padding": null,
"right": null,
"top": null,
"visibility": null,
"width": "70%"
}
},
"29cb5e2092bd4696bd3e4b018052457e": {
"model_module": "@jupyter-widgets/controls",
"model_name": "ButtonStyleModel",
"model_module_version": "1.5.0",
"state": {
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "ButtonStyleModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "StyleView",
"button_color": null,
"font_weight": ""
}
},
"599b94c06b8a485e9bdf85e62d9568c4": {
"model_module": "@jupyter-widgets/controls",
"model_name": "HTMLModel",
"model_module_version": "1.5.0",
"state": {
"_dom_classes": [],
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "HTMLModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/controls",
"_view_module_version": "1.5.0",
"_view_name": "HTMLView",
"description": "",
"description_tooltip": null,
"layout": "IPY_MODEL_fe59a57819704a9b961afafe4d3ba993",
"placeholder": "​",
"style": "IPY_MODEL_6bf5845a2b0b46cd9627cc4a282d163c",
"value": "<style>.font_big {font-size:100px;}</style>"
}
},
"fe59a57819704a9b961afafe4d3ba993": {
"model_module": "@jupyter-widgets/base",
"model_name": "LayoutModel",
"model_module_version": "1.2.0",
"state": {
"_model_module": "@jupyter-widgets/base",
"_model_module_version": "1.2.0",
"_model_name": "LayoutModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "LayoutView",
"align_content": null,
"align_items": null,
"align_self": null,
"border": null,
"bottom": null,
"display": null,
"flex": null,
"flex_flow": null,
"grid_area": null,
"grid_auto_columns": null,
"grid_auto_flow": null,
"grid_auto_rows": null,
"grid_column": null,
"grid_gap": null,
"grid_row": null,
"grid_template_areas": null,
"grid_template_columns": null,
"grid_template_rows": null,
"height": null,
"justify_content": null,
"justify_items": null,
"left": null,
"margin": null,
"max_height": null,
"max_width": null,
"min_height": null,
"min_width": null,
"object_fit": null,
"object_position": null,
"order": null,
"overflow": null,
"overflow_x": null,
"overflow_y": null,
"padding": null,
"right": null,
"top": null,
"visibility": null,
"width": null
}
},
"6bf5845a2b0b46cd9627cc4a282d163c": {
"model_module": "@jupyter-widgets/controls",
"model_name": "DescriptionStyleModel",
"model_module_version": "1.5.0",
"state": {
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "DescriptionStyleModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "StyleView",
"description_width": ""
}
},
"48a423bd72c543a095b0670d7ee87f34": {
"model_module": "@jupyter-widgets/controls",
"model_name": "ButtonModel",
"model_module_version": "1.5.0",
"state": {
"_dom_classes": [
"font_big"
],
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "ButtonModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/controls",
"_view_module_version": "1.5.0",
"_view_name": "ButtonView",
"button_style": "",
"description": "aaaa",
"disabled": false,
"icon": "",
"layout": "IPY_MODEL_91da4eb0b8484de98c9dd7c436f5b860",
"style": "IPY_MODEL_fd9123b9d47a4903b5f9accd7f2b32f6",
"tooltip": ""
}
},
"91da4eb0b8484de98c9dd7c436f5b860": {
"model_module": "@jupyter-widgets/base",
"model_name": "LayoutModel",
"model_module_version": "1.2.0",
"state": {
"_model_module": "@jupyter-widgets/base",
"_model_module_version": "1.2.0",
"_model_name": "LayoutModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "LayoutView",
"align_content": null,
"align_items": null,
"align_self": null,
"border": null,
"bottom": null,
"display": null,
"flex": null,
"flex_flow": null,
"grid_area": null,
"grid_auto_columns": null,
"grid_auto_flow": null,
"grid_auto_rows": null,
"grid_column": null,
"grid_gap": null,
"grid_row": null,
"grid_template_areas": null,
"grid_template_columns": null,
"grid_template_rows": null,
"height": null,
"justify_content": null,
"justify_items": null,
"left": null,
"margin": null,
"max_height": null,
"max_width": null,
"min_height": null,
"min_width": null,
"object_fit": null,
"object_position": null,
"order": null,
"overflow": null,
"overflow_x": null,
"overflow_y": null,
"padding": null,
"right": null,
"top": null,
"visibility": null,
"width": null
}
},
"fd9123b9d47a4903b5f9accd7f2b32f6": {
"model_module": "@jupyter-widgets/controls",
"model_name": "ButtonStyleModel",
"model_module_version": "1.5.0",
"state": {
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "ButtonStyleModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "StyleView",
"button_color": null,
"font_weight": ""
}
},
"f01461bcb33e48e3a8b5016f357fed42": {
"model_module": "@jupyter-widgets/controls",
"model_name": "HTMLModel",
"model_module_version": "1.5.0",
"state": {
"_dom_classes": [],
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "HTMLModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/controls",
"_view_module_version": "1.5.0",
"_view_name": "HTMLView",
"description": "",
"description_tooltip": null,
"layout": "IPY_MODEL_0a4c4c37489b4999969c7f779a16b1fa",
"placeholder": "​",
"style": "IPY_MODEL_df78d41fdeaf4a909f92381fdf97f9f5",
"value": "<style>.myclass {color:red ; font-size:200%;}</style>"
}
},
"0a4c4c37489b4999969c7f779a16b1fa": {
"model_module": "@jupyter-widgets/base",
"model_name": "LayoutModel",
"model_module_version": "1.2.0",
"state": {
"_model_module": "@jupyter-widgets/base",
"_model_module_version": "1.2.0",
"_model_name": "LayoutModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "LayoutView",
"align_content": null,
"align_items": null,
"align_self": null,
"border": null,
"bottom": null,
"display": null,
"flex": null,
"flex_flow": null,
"grid_area": null,
"grid_auto_columns": null,
"grid_auto_flow": null,
"grid_auto_rows": null,
"grid_column": null,
"grid_gap": null,
"grid_row": null,
"grid_template_areas": null,
"grid_template_columns": null,
"grid_template_rows": null,
"height": null,
"justify_content": null,
"justify_items": null,
"left": null,
"margin": null,
"max_height": null,
"max_width": null,
"min_height": null,
"min_width": null,
"object_fit": null,
"object_position": null,
"order": null,
"overflow": null,
"overflow_x": null,
"overflow_y": null,
"padding": null,
"right": null,
"top": null,
"visibility": null,
"width": null
}
},
"df78d41fdeaf4a909f92381fdf97f9f5": {
"model_module": "@jupyter-widgets/controls",
"model_name": "DescriptionStyleModel",
"model_module_version": "1.5.0",
"state": {
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "DescriptionStyleModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "StyleView",
"description_width": ""
}
},
"19a6ce1516fd4231a1aa049c81dd1f14": {
"model_module": "@jupyter-widgets/controls",
"model_name": "ButtonModel",
"model_module_version": "1.5.0",
"state": {
"_dom_classes": [
"myclass"
],
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "ButtonModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/controls",
"_view_module_version": "1.5.0",
"_view_name": "ButtonView",
"button_style": "",
"description": "x",
"disabled": false,
"icon": "",
"layout": "IPY_MODEL_bd2e3f18807846e9b8bb6b6a7354e946",
"style": "IPY_MODEL_fd8bb96a3a2840a28ffd99582a0ccb88",
"tooltip": ""
}
},
"bd2e3f18807846e9b8bb6b6a7354e946": {
"model_module": "@jupyter-widgets/base",
"model_name": "LayoutModel",
"model_module_version": "1.2.0",
"state": {
"_model_module": "@jupyter-widgets/base",
"_model_module_version": "1.2.0",
"_model_name": "LayoutModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "LayoutView",
"align_content": null,
"align_items": null,
"align_self": null,
"border": null,
"bottom": null,
"display": null,
"flex": null,
"flex_flow": null,
"grid_area": null,
"grid_auto_columns": null,
"grid_auto_flow": null,
"grid_auto_rows": null,
"grid_column": null,
"grid_gap": null,
"grid_row": null,
"grid_template_areas": null,
"grid_template_columns": null,
"grid_template_rows": null,
"height": null,
"justify_content": null,
"justify_items": null,
"left": null,
"margin": null,
"max_height": null,
"max_width": null,
"min_height": null,
"min_width": null,
"object_fit": null,
"object_position": null,
"order": null,
"overflow": null,
"overflow_x": null,
"overflow_y": null,
"padding": null,
"right": null,
"top": null,
"visibility": null,
"width": "30px"
}
},
"fd8bb96a3a2840a28ffd99582a0ccb88": {
"model_module": "@jupyter-widgets/controls",
"model_name": "ButtonStyleModel",
"model_module_version": "1.5.0",
"state": {
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "ButtonStyleModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "StyleView",
"button_color": null,
"font_weight": ""
}
},
"c52e39f078f34e07b87d1debefbfac89": {
"model_module": "@jupyter-widgets/controls",
"model_name": "HTMLModel",
"model_module_version": "1.5.0",
"state": {
"_dom_classes": [],
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "HTMLModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/controls",
"_view_module_version": "1.5.0",
"_view_name": "HTMLView",
"description": "",
"description_tooltip": null,
"layout": "IPY_MODEL_1dc1a620f4cd46c9a23724f56b42d22b",
"placeholder": "​",
"style": "IPY_MODEL_b995ecfb0aa3453392d3ea3d7fc43429",
"value": "<style>.box_style{width:40%; border : 2px solid white; height: auto; background-color:brown;}</style>"
}
},
"1dc1a620f4cd46c9a23724f56b42d22b": {
"model_module": "@jupyter-widgets/base",
"model_name": "LayoutModel",
"model_module_version": "1.2.0",
"state": {
"_model_module": "@jupyter-widgets/base",
"_model_module_version": "1.2.0",
"_model_name": "LayoutModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "LayoutView",
"align_content": null,
"align_items": null,
"align_self": null,
"border": null,
"bottom": null,
"display": null,
"flex": null,
"flex_flow": null,
"grid_area": null,
"grid_auto_columns": null,
"grid_auto_flow": null,
"grid_auto_rows": null,
"grid_column": null,
"grid_gap": null,
"grid_row": null,
"grid_template_areas": null,
"grid_template_columns": null,
"grid_template_rows": null,
"height": null,
"justify_content": null,
"justify_items": null,
"left": null,
"margin": null,
"max_height": null,
"max_width": null,
"min_height": null,
"min_width": null,
"object_fit": null,
"object_position": null,
"order": null,
"overflow": null,
"overflow_x": null,
"overflow_y": null,
"padding": null,
"right": null,
"top": null,
"visibility": null,
"width": null
}
},
"b995ecfb0aa3453392d3ea3d7fc43429": {
"model_module": "@jupyter-widgets/controls",
"model_name": "DescriptionStyleModel",
"model_module_version": "1.5.0",
"state": {
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "DescriptionStyleModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "StyleView",
"description_width": ""
}
},
"f5fa7a068cec4be9b4cd3dcdf9f5b7c2": {
"model_module": "@jupyter-widgets/controls",
"model_name": "GridBoxModel",
"model_module_version": "1.5.0",
"state": {
"_dom_classes": [
"box_style"
],
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "GridBoxModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/controls",
"_view_module_version": "1.5.0",
"_view_name": "GridBoxView",
"box_style": "",
"children": [
"IPY_MODEL_3b2bb6661d104311b7fac6b7f0378f41",
"IPY_MODEL_3b2bb6661d104311b7fac6b7f0378f41"
],
"layout": "IPY_MODEL_721a122ddc8045148ffaaf7b61e91d32"
}
},
"3b2bb6661d104311b7fac6b7f0378f41": {
"model_module": "@jupyter-widgets/controls",
"model_name": "ButtonModel",
"model_module_version": "1.5.0",
"state": {
"_dom_classes": [],
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "ButtonModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/controls",
"_view_module_version": "1.5.0",
"_view_name": "ButtonView",
"button_style": "",
"description": "Hello",
"disabled": false,
"icon": "",
"layout": "IPY_MODEL_987098a7ed674b7586e7de9765ad7a7d",
"style": "IPY_MODEL_0da4ef8516d546d281539175cd4612ef",
"tooltip": ""
}
},
"721a122ddc8045148ffaaf7b61e91d32": {
"model_module": "@jupyter-widgets/base",
"model_name": "LayoutModel",
"model_module_version": "1.2.0",
"state": {
"_model_module": "@jupyter-widgets/base",
"_model_module_version": "1.2.0",
"_model_name": "LayoutModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "LayoutView",
"align_content": null,
"align_items": null,
"align_self": null,
"border": null,
"bottom": null,
"display": null,
"flex": null,
"flex_flow": null,
"grid_area": null,
"grid_auto_columns": null,
"grid_auto_flow": null,
"grid_auto_rows": null,
"grid_column": null,
"grid_gap": null,
"grid_row": null,
"grid_template_areas": null,
"grid_template_columns": null,
"grid_template_rows": null,
"height": null,
"justify_content": null,
"justify_items": null,
"left": null,
"margin": null,
"max_height": null,
"max_width": null,
"min_height": null,
"min_width": null,
"object_fit": null,
"object_position": null,
"order": null,
"overflow": null,
"overflow_x": null,
"overflow_y": null,
"padding": null,
"right": null,
"top": null,
"visibility": null,
"width": null
}
},
"987098a7ed674b7586e7de9765ad7a7d": {
"model_module": "@jupyter-widgets/base",
"model_name": "LayoutModel",
"model_module_version": "1.2.0",
"state": {
"_model_module": "@jupyter-widgets/base",
"_model_module_version": "1.2.0",
"_model_name": "LayoutModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "LayoutView",
"align_content": null,
"align_items": null,
"align_self": null,
"border": null,
"bottom": null,
"display": null,
"flex": null,
"flex_flow": null,
"grid_area": null,
"grid_auto_columns": null,
"grid_auto_flow": null,
"grid_auto_rows": null,
"grid_column": null,
"grid_gap": null,
"grid_row": null,
"grid_template_areas": null,
"grid_template_columns": null,
"grid_template_rows": null,
"height": null,
"justify_content": null,
"justify_items": null,
"left": null,
"margin": null,
"max_height": null,
"max_width": null,
"min_height": null,
"min_width": null,
"object_fit": null,
"object_position": null,
"order": null,
"overflow": null,
"overflow_x": null,
"overflow_y": null,
"padding": null,
"right": null,
"top": null,
"visibility": null,
"width": null
}
},
"0da4ef8516d546d281539175cd4612ef": {
"model_module": "@jupyter-widgets/controls",
"model_name": "ButtonStyleModel",
"model_module_version": "1.5.0",
"state": {
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "ButtonStyleModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "StyleView",
"button_color": null,
"font_weight": ""
}
},
"6d751aa4e7d141fa9d25a31a93610246": {
"model_module": "@jupyter-widgets/controls",
"model_name": "HTMLModel",
"model_module_version": "1.5.0",
"state": {
"_dom_classes": [],
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "HTMLModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/controls",
"_view_module_version": "1.5.0",
"_view_name": "HTMLView",
"description": "",
"description_tooltip": null,
"layout": "IPY_MODEL_33448a6cb1d841bf8a54316791527f91",
"placeholder": "​",
"style": "IPY_MODEL_c35c306911df41318bdfe3b6f780bcf2",
"value": "<style>.mytext > select,.mytext > textarea {font-style: italic;color: blue;font-size: 50px;}</style>"
}
},
"33448a6cb1d841bf8a54316791527f91": {
"model_module": "@jupyter-widgets/base",
"model_name": "LayoutModel",
"model_module_version": "1.2.0",
"state": {
"_model_module": "@jupyter-widgets/base",
"_model_module_version": "1.2.0",
"_model_name": "LayoutModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "LayoutView",
"align_content": null,
"align_items": null,
"align_self": null,
"border": null,
"bottom": null,
"display": null,
"flex": null,
"flex_flow": null,
"grid_area": null,
"grid_auto_columns": null,
"grid_auto_flow": null,
"grid_auto_rows": null,
"grid_column": null,
"grid_gap": null,
"grid_row": null,
"grid_template_areas": null,
"grid_template_columns": null,
"grid_template_rows": null,
"height": null,
"justify_content": null,
"justify_items": null,
"left": null,
"margin": null,
"max_height": null,
"max_width": null,
"min_height": null,
"min_width": null,
"object_fit": null,
"object_position": null,
"order": null,
"overflow": null,
"overflow_x": null,
"overflow_y": null,
"padding": null,
"right": null,
"top": null,
"visibility": null,
"width": null
}
},
"c35c306911df41318bdfe3b6f780bcf2": {
"model_module": "@jupyter-widgets/controls",
"model_name": "DescriptionStyleModel",
"model_module_version": "1.5.0",
"state": {
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "DescriptionStyleModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "StyleView",
"description_width": ""
}
},
"f0c3844372e844ecb16e009c9cd42469": {
"model_module": "@jupyter-widgets/controls",
"model_name": "HTMLModel",
"model_module_version": "1.5.0",
"state": {
"_dom_classes": [],
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "HTMLModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/controls",
"_view_module_version": "1.5.0",
"_view_name": "HTMLView",
"description": "",
"description_tooltip": null,
"layout": "IPY_MODEL_3b1ddfd11f68467fa07a9cd187c94356",
"placeholder": "​",
"style": "IPY_MODEL_59d8acdd897c47fa897d1eeb78561079",
"value": "<style>.font_small > select {font-size: 5px; padding: 0px 0px; background-color: #4CAF50;color: blue;}</style>"
}
},
"3b1ddfd11f68467fa07a9cd187c94356": {
"model_module": "@jupyter-widgets/base",
"model_name": "LayoutModel",
"model_module_version": "1.2.0",
"state": {
"_model_module": "@jupyter-widgets/base",
"_model_module_version": "1.2.0",
"_model_name": "LayoutModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "LayoutView",
"align_content": null,
"align_items": null,
"align_self": null,
"border": null,
"bottom": null,
"display": null,
"flex": null,
"flex_flow": null,
"grid_area": null,
"grid_auto_columns": null,
"grid_auto_flow": null,
"grid_auto_rows": null,
"grid_column": null,
"grid_gap": null,
"grid_row": null,
"grid_template_areas": null,
"grid_template_columns": null,
"grid_template_rows": null,
"height": null,
"justify_content": null,
"justify_items": null,
"left": null,
"margin": null,
"max_height": null,
"max_width": null,
"min_height": null,
"min_width": null,
"object_fit": null,
"object_position": null,
"order": null,
"overflow": null,
"overflow_x": null,
"overflow_y": null,
"padding": null,
"right": null,
"top": null,
"visibility": null,
"width": null
}
},
"59d8acdd897c47fa897d1eeb78561079": {
"model_module": "@jupyter-widgets/controls",
"model_name": "DescriptionStyleModel",
"model_module_version": "1.5.0",
"state": {
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "DescriptionStyleModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "StyleView",
"description_width": ""
}
},
"7d52de5b0a844249859ca569a09c366c": {
"model_module": "@jupyter-widgets/controls",
"model_name": "HBoxModel",
"model_module_version": "1.5.0",
"state": {
"_dom_classes": [],
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "HBoxModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/controls",
"_view_module_version": "1.5.0",
"_view_name": "HBoxView",
"box_style": "",
"children": [
"IPY_MODEL_b82de30590f448c2a29100563450d877",
"IPY_MODEL_a715968984d14f498cbbb3b27d43f272"
],
"layout": "IPY_MODEL_d24039d9ddc14802aec7fd36cea73cb0"
}
},
"b82de30590f448c2a29100563450d877": {
"model_module": "@jupyter-widgets/controls",
"model_name": "SelectMultipleModel",
"model_module_version": "1.5.0",
"state": {
"_dom_classes": [
"font_small"
],
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "SelectMultipleModel",
"_options_labels": [
"s",
"e",
"s",
"s"
],
"_view_count": null,
"_view_module": "@jupyter-widgets/controls",
"_view_module_version": "1.5.0",
"_view_name": "SelectMultipleView",
"description": "",
"description_tooltip": null,
"disabled": false,
"index": [],
"layout": "IPY_MODEL_4cf9a5c9ad29427b872c285ed904989f",
"rows": 5,
"style": "IPY_MODEL_2098276d26ac4054979dbd5bc7af4098"
}
},
"a715968984d14f498cbbb3b27d43f272": {
"model_module": "@jupyter-widgets/controls",
"model_name": "TextareaModel",
"model_module_version": "1.5.0",
"state": {
"_dom_classes": [
"mytext"
],
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "TextareaModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/controls",
"_view_module_version": "1.5.0",
"_view_name": "TextareaView",
"continuous_update": true,
"description": "",
"description_tooltip": null,
"disabled": false,
"layout": "IPY_MODEL_13cdf60a3a8147279eaac67aff890411",
"placeholder": "​",
"rows": null,
"style": "IPY_MODEL_6193adee9e60428b86d0246682aef464",
"value": "Here it is"
}
},
"d24039d9ddc14802aec7fd36cea73cb0": {
"model_module": "@jupyter-widgets/base",
"model_name": "LayoutModel",
"model_module_version": "1.2.0",
"state": {
"_model_module": "@jupyter-widgets/base",
"_model_module_version": "1.2.0",
"_model_name": "LayoutModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "LayoutView",
"align_content": null,
"align_items": null,
"align_self": null,
"border": null,
"bottom": null,
"display": null,
"flex": null,
"flex_flow": null,
"grid_area": null,
"grid_auto_columns": null,
"grid_auto_flow": null,
"grid_auto_rows": null,
"grid_column": null,
"grid_gap": null,
"grid_row": null,
"grid_template_areas": null,
"grid_template_columns": null,
"grid_template_rows": null,
"height": null,
"justify_content": null,
"justify_items": null,
"left": null,
"margin": null,
"max_height": null,
"max_width": null,
"min_height": null,
"min_width": null,
"object_fit": null,
"object_position": null,
"order": null,
"overflow": null,
"overflow_x": null,
"overflow_y": null,
"padding": null,
"right": null,
"top": null,
"visibility": null,
"width": null
}
},
"4cf9a5c9ad29427b872c285ed904989f": {
"model_module": "@jupyter-widgets/base",
"model_name": "LayoutModel",
"model_module_version": "1.2.0",
"state": {
"_model_module": "@jupyter-widgets/base",
"_model_module_version": "1.2.0",
"_model_name": "LayoutModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "LayoutView",
"align_content": null,
"align_items": null,
"align_self": null,
"border": null,
"bottom": null,
"display": null,
"flex": null,
"flex_flow": null,
"grid_area": null,
"grid_auto_columns": null,
"grid_auto_flow": null,
"grid_auto_rows": null,
"grid_column": null,
"grid_gap": null,
"grid_row": null,
"grid_template_areas": null,
"grid_template_columns": null,
"grid_template_rows": null,
"height": null,
"justify_content": null,
"justify_items": null,
"left": null,
"margin": null,
"max_height": null,
"max_width": null,
"min_height": null,
"min_width": null,
"object_fit": null,
"object_position": null,
"order": null,
"overflow": null,
"overflow_x": null,
"overflow_y": null,
"padding": null,
"right": null,
"top": null,
"visibility": null,
"width": null
}
},
"2098276d26ac4054979dbd5bc7af4098": {
"model_module": "@jupyter-widgets/controls",
"model_name": "DescriptionStyleModel",
"model_module_version": "1.5.0",
"state": {
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "DescriptionStyleModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "StyleView",
"description_width": ""
}
},
"13cdf60a3a8147279eaac67aff890411": {
"model_module": "@jupyter-widgets/base",
"model_name": "LayoutModel",
"model_module_version": "1.2.0",
"state": {
"_model_module": "@jupyter-widgets/base",
"_model_module_version": "1.2.0",
"_model_name": "LayoutModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "LayoutView",
"align_content": null,
"align_items": null,
"align_self": null,
"border": null,
"bottom": null,
"display": null,
"flex": null,
"flex_flow": null,
"grid_area": null,
"grid_auto_columns": null,
"grid_auto_flow": null,
"grid_auto_rows": null,
"grid_column": null,
"grid_gap": null,
"grid_row": null,
"grid_template_areas": null,
"grid_template_columns": null,
"grid_template_rows": null,
"height": null,
"justify_content": null,
"justify_items": null,
"left": null,
"margin": null,
"max_height": null,
"max_width": null,
"min_height": null,
"min_width": null,
"object_fit": null,
"object_position": null,
"order": null,
"overflow": null,
"overflow_x": null,
"overflow_y": null,
"padding": null,
"right": null,
"top": null,
"visibility": null,
"width": null
}
},
"6193adee9e60428b86d0246682aef464": {
"model_module": "@jupyter-widgets/controls",
"model_name": "DescriptionStyleModel",
"model_module_version": "1.5.0",
"state": {
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "DescriptionStyleModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "StyleView",
"description_width": ""
}
},
"ff9c1ce0a60940cc873a41365f16db40": {
"model_module": "@jupyter-widgets/controls",
"model_name": "BoxModel",
"model_module_version": "1.5.0",
"state": {
"_dom_classes": [
"example-container",
"example-container.sm",
"example-box",
"example-box.med",
"example-box.lrg"
],
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "BoxModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/controls",
"_view_module_version": "1.5.0",
"_view_name": "BoxView",
"box_style": "",
"children": [
"IPY_MODEL_a66d219272934e3c9c5bb42237ef88bc",
"IPY_MODEL_2f25b549087741af8e35e35b41bd7758"
],
"layout": "IPY_MODEL_4d280809e9d64520a958c0488fd467f7"
}
},
"a66d219272934e3c9c5bb42237ef88bc": {
"model_module": "@jupyter-widgets/controls",
"model_name": "FloatSliderModel",
"model_module_version": "1.5.0",
"state": {
"_dom_classes": [],
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "FloatSliderModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/controls",
"_view_module_version": "1.5.0",
"_view_name": "FloatSliderView",
"continuous_update": true,
"description": "",
"description_tooltip": null,
"disabled": false,
"layout": "IPY_MODEL_c1c12690b6a34175bbdbb22fe187a1ca",
"max": 100,
"min": 0,
"orientation": "horizontal",
"readout": true,
"readout_format": ".2f",
"step": 0.1,
"style": "IPY_MODEL_b7061c41bb0e4d639888e0278a597efa",
"value": 0
}
},
"2f25b549087741af8e35e35b41bd7758": {
"model_module": "@jupyter-widgets/controls",
"model_name": "TextModel",
"model_module_version": "1.5.0",
"state": {
"_dom_classes": [],
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "TextModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/controls",
"_view_module_version": "1.5.0",
"_view_name": "TextView",
"continuous_update": true,
"description": "",
"description_tooltip": null,
"disabled": false,
"layout": "IPY_MODEL_459eeb5196e849f095c795bf4376271e",
"placeholder": "​",
"style": "IPY_MODEL_8c5a66ef8bb24ffd8df22e3403d231c7",
"value": "hi"
}
},
"4d280809e9d64520a958c0488fd467f7": {
"model_module": "@jupyter-widgets/base",
"model_name": "LayoutModel",
"model_module_version": "1.2.0",
"state": {
"_model_module": "@jupyter-widgets/base",
"_model_module_version": "1.2.0",
"_model_name": "LayoutModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "LayoutView",
"align_content": null,
"align_items": null,
"align_self": null,
"border": null,
"bottom": null,
"display": null,
"flex": null,
"flex_flow": null,
"grid_area": null,
"grid_auto_columns": null,
"grid_auto_flow": null,
"grid_auto_rows": null,
"grid_column": null,
"grid_gap": null,
"grid_row": null,
"grid_template_areas": null,
"grid_template_columns": null,
"grid_template_rows": null,
"height": null,
"justify_content": null,
"justify_items": null,
"left": null,
"margin": null,
"max_height": null,
"max_width": null,
"min_height": null,
"min_width": null,
"object_fit": null,
"object_position": null,
"order": null,
"overflow": null,
"overflow_x": null,
"overflow_y": null,
"padding": null,
"right": null,
"top": null,
"visibility": null,
"width": null
}
},
"c1c12690b6a34175bbdbb22fe187a1ca": {
"model_module": "@jupyter-widgets/base",
"model_name": "LayoutModel",
"model_module_version": "1.2.0",
"state": {
"_model_module": "@jupyter-widgets/base",
"_model_module_version": "1.2.0",
"_model_name": "LayoutModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "LayoutView",
"align_content": null,
"align_items": null,
"align_self": null,
"border": null,
"bottom": null,
"display": null,
"flex": null,
"flex_flow": null,
"grid_area": null,
"grid_auto_columns": null,
"grid_auto_flow": null,
"grid_auto_rows": null,
"grid_column": null,
"grid_gap": null,
"grid_row": null,
"grid_template_areas": null,
"grid_template_columns": null,
"grid_template_rows": null,
"height": null,
"justify_content": null,
"justify_items": null,
"left": null,
"margin": null,
"max_height": null,
"max_width": null,
"min_height": null,
"min_width": null,
"object_fit": null,
"object_position": null,
"order": null,
"overflow": null,
"overflow_x": null,
"overflow_y": null,
"padding": null,
"right": null,
"top": null,
"visibility": null,
"width": null
}
},
"b7061c41bb0e4d639888e0278a597efa": {
"model_module": "@jupyter-widgets/controls",
"model_name": "SliderStyleModel",
"model_module_version": "1.5.0",
"state": {
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "SliderStyleModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "StyleView",
"description_width": "",
"handle_color": null
}
},
"459eeb5196e849f095c795bf4376271e": {
"model_module": "@jupyter-widgets/base",
"model_name": "LayoutModel",
"model_module_version": "1.2.0",
"state": {
"_model_module": "@jupyter-widgets/base",
"_model_module_version": "1.2.0",
"_model_name": "LayoutModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "LayoutView",
"align_content": null,
"align_items": null,
"align_self": null,
"border": null,
"bottom": null,
"display": null,
"flex": null,
"flex_flow": null,
"grid_area": null,
"grid_auto_columns": null,
"grid_auto_flow": null,
"grid_auto_rows": null,
"grid_column": null,
"grid_gap": null,
"grid_row": null,
"grid_template_areas": null,
"grid_template_columns": null,
"grid_template_rows": null,
"height": null,
"justify_content": null,
"justify_items": null,
"left": null,
"margin": null,
"max_height": null,
"max_width": null,
"min_height": null,
"min_width": null,
"object_fit": null,
"object_position": null,
"order": null,
"overflow": null,
"overflow_x": null,
"overflow_y": null,
"padding": null,
"right": null,
"top": null,
"visibility": null,
"width": null
}
},
"8c5a66ef8bb24ffd8df22e3403d231c7": {
"model_module": "@jupyter-widgets/controls",
"model_name": "DescriptionStyleModel",
"model_module_version": "1.5.0",
"state": {
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "DescriptionStyleModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "StyleView",
"description_width": ""
}
},
"2fd0d1faa6b24101873a898cf818f54c": {
"model_module": "@jupyter-widgets/controls",
"model_name": "HTMLModel",
"model_module_version": "1.5.0",
"state": {
"_dom_classes": [],
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "HTMLModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/controls",
"_view_module_version": "1.5.0",
"_view_name": "HTMLView",
"description": "",
"description_tooltip": null,
"layout": "IPY_MODEL_e28a4f26cbe74e978522d7d32e78c974",
"placeholder": "​",
"style": "IPY_MODEL_9c00e0f3e1684bdea3ce50bb05cdbc5f",
"value": "<style>.example-container { background: #999999; padding: 2px; min-height: 80px; }.example-container.sm { min-height: 50px; }.example-box { background: #9999FF; width: 500px; height: 50px; text-align: center; vertical-align: middle; color: white; font-weight: bold; margin: 2px;} .example-box.med { width: 65px; height: 65px; } .example-box.lrg { width: 80px; height: 80px; } </style>"
}
},
"e28a4f26cbe74e978522d7d32e78c974": {
"model_module": "@jupyter-widgets/base",
"model_name": "LayoutModel",
"model_module_version": "1.2.0",
"state": {
"_model_module": "@jupyter-widgets/base",
"_model_module_version": "1.2.0",
"_model_name": "LayoutModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "LayoutView",
"align_content": null,
"align_items": null,
"align_self": null,
"border": null,
"bottom": null,
"display": null,
"flex": null,
"flex_flow": null,
"grid_area": null,
"grid_auto_columns": null,
"grid_auto_flow": null,
"grid_auto_rows": null,
"grid_column": null,
"grid_gap": null,
"grid_row": null,
"grid_template_areas": null,
"grid_template_columns": null,
"grid_template_rows": null,
"height": null,
"justify_content": null,
"justify_items": null,
"left": null,
"margin": null,
"max_height": null,
"max_width": null,
"min_height": null,
"min_width": null,
"object_fit": null,
"object_position": null,
"order": null,
"overflow": null,
"overflow_x": null,
"overflow_y": null,
"padding": null,
"right": null,
"top": null,
"visibility": null,
"width": null
}
},
"9c00e0f3e1684bdea3ce50bb05cdbc5f": {
"model_module": "@jupyter-widgets/controls",
"model_name": "DescriptionStyleModel",
"model_module_version": "1.5.0",
"state": {
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "DescriptionStyleModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "StyleView",
"description_width": ""
}
},
"0dfceb2443fe44a38e225ef5fefa2167": {
"model_module": "@jupyter-widgets/controls",
"model_name": "HTMLModel",
"model_module_version": "1.5.0",
"state": {
"_dom_classes": [],
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "HTMLModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/controls",
"_view_module_version": "1.5.0",
"_view_name": "HTMLView",
"description": "",
"description_tooltip": null,
"layout": "IPY_MODEL_b276355f07d1411cb51389ff2d291282",
"placeholder": "​",
"style": "IPY_MODEL_42a6ce8f541241b5b4fe8e64ec9f178d",
"value": "<style>.mytext > select,.mytext > textarea {font-style: italic;color: blue;font-size: 30px;}</style>"
}
},
"b276355f07d1411cb51389ff2d291282": {
"model_module": "@jupyter-widgets/base",
"model_name": "LayoutModel",
"model_module_version": "1.2.0",
"state": {
"_model_module": "@jupyter-widgets/base",
"_model_module_version": "1.2.0",
"_model_name": "LayoutModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "LayoutView",
"align_content": null,
"align_items": null,
"align_self": null,
"border": null,
"bottom": null,
"display": null,
"flex": null,
"flex_flow": null,
"grid_area": null,
"grid_auto_columns": null,
"grid_auto_flow": null,
"grid_auto_rows": null,
"grid_column": null,
"grid_gap": null,
"grid_row": null,
"grid_template_areas": null,
"grid_template_columns": null,
"grid_template_rows": null,
"height": null,
"justify_content": null,
"justify_items": null,
"left": null,
"margin": null,
"max_height": null,
"max_width": null,
"min_height": null,
"min_width": null,
"object_fit": null,
"object_position": null,
"order": null,
"overflow": null,
"overflow_x": null,
"overflow_y": null,
"padding": null,
"right": null,
"top": null,
"visibility": null,
"width": null
}
},
"42a6ce8f541241b5b4fe8e64ec9f178d": {
"model_module": "@jupyter-widgets/controls",
"model_name": "DescriptionStyleModel",
"model_module_version": "1.5.0",
"state": {
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "DescriptionStyleModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "StyleView",
"description_width": ""
}
},
"4e7b07cb7db6412b84cf686efcd514e0": {
"model_module": "@jupyter-widgets/controls",
"model_name": "HTMLModel",
"model_module_version": "1.5.0",
"state": {
"_dom_classes": [],
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "HTMLModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/controls",
"_view_module_version": "1.5.0",
"_view_name": "HTMLView",
"description": "",
"description_tooltip": null,
"layout": "IPY_MODEL_3229fb97ef714779b7848285f7cdce05",
"placeholder": "​",
"style": "IPY_MODEL_4889095f238d4bbf9b35a5feb8f7e392",
"value": "<style>.font_small > select {font-size: 11px; padding: 0px 0px; background-color: #4CAF50;color: blue;}</style>"
}
},
"3229fb97ef714779b7848285f7cdce05": {
"model_module": "@jupyter-widgets/base",
"model_name": "LayoutModel",
"model_module_version": "1.2.0",
"state": {
"_model_module": "@jupyter-widgets/base",
"_model_module_version": "1.2.0",
"_model_name": "LayoutModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "LayoutView",
"align_content": null,
"align_items": null,
"align_self": null,
"border": null,
"bottom": null,
"display": null,
"flex": null,
"flex_flow": null,
"grid_area": null,
"grid_auto_columns": null,
"grid_auto_flow": null,
"grid_auto_rows": null,
"grid_column": null,
"grid_gap": null,
"grid_row": null,
"grid_template_areas": null,
"grid_template_columns": null,
"grid_template_rows": null,
"height": null,
"justify_content": null,
"justify_items": null,
"left": null,
"margin": null,
"max_height": null,
"max_width": null,
"min_height": null,
"min_width": null,
"object_fit": null,
"object_position": null,
"order": null,
"overflow": null,
"overflow_x": null,
"overflow_y": null,
"padding": null,
"right": null,
"top": null,
"visibility": null,
"width": null
}
},
"4889095f238d4bbf9b35a5feb8f7e392": {
"model_module": "@jupyter-widgets/controls",
"model_name": "DescriptionStyleModel",
"model_module_version": "1.5.0",
"state": {
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "DescriptionStyleModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "StyleView",
"description_width": ""
}
},
"dece7727931a454d8ac0879a26f87afc": {
"model_module": "@jupyter-widgets/controls",
"model_name": "HBoxModel",
"model_module_version": "1.5.0",
"state": {
"_dom_classes": [],
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "HBoxModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/controls",
"_view_module_version": "1.5.0",
"_view_name": "HBoxView",
"box_style": "",
"children": [
"IPY_MODEL_5da31a73e81444439a21ca5fada39d54",
"IPY_MODEL_d0e8cd84127d4639b0c402fe91d469a6"
],
"layout": "IPY_MODEL_eb5725960cfc4ecea7103ead8e30844e"
}
},
"5da31a73e81444439a21ca5fada39d54": {
"model_module": "@jupyter-widgets/controls",
"model_name": "SelectMultipleModel",
"model_module_version": "1.5.0",
"state": {
"_dom_classes": [
"font_small"
],
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "SelectMultipleModel",
"_options_labels": [
"s",
"e",
"s",
"s"
],
"_view_count": null,
"_view_module": "@jupyter-widgets/controls",
"_view_module_version": "1.5.0",
"_view_name": "SelectMultipleView",
"description": "",
"description_tooltip": null,
"disabled": false,
"index": [],
"layout": "IPY_MODEL_b4a122e438c147eda2b1679877501665",
"rows": 5,
"style": "IPY_MODEL_6f1846243ccd4e52a48b1bf9b2b6cebd"
}
},
"d0e8cd84127d4639b0c402fe91d469a6": {
"model_module": "@jupyter-widgets/controls",
"model_name": "TextareaModel",
"model_module_version": "1.5.0",
"state": {
"_dom_classes": [
"mytext"
],
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "TextareaModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/controls",
"_view_module_version": "1.5.0",
"_view_name": "TextareaView",
"continuous_update": true,
"description": "",
"description_tooltip": null,
"disabled": false,
"layout": "IPY_MODEL_de6bdffc891d40df94865231b223d749",
"placeholder": "​",
"rows": null,
"style": "IPY_MODEL_742b549fd3444d0a8eb2269568c54b57",
"value": "Here it is"
}
},
"eb5725960cfc4ecea7103ead8e30844e": {
"model_module": "@jupyter-widgets/base",
"model_name": "LayoutModel",
"model_module_version": "1.2.0",
"state": {
"_model_module": "@jupyter-widgets/base",
"_model_module_version": "1.2.0",
"_model_name": "LayoutModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "LayoutView",
"align_content": null,
"align_items": null,
"align_self": null,
"border": null,
"bottom": null,
"display": null,
"flex": null,
"flex_flow": null,
"grid_area": null,
"grid_auto_columns": null,
"grid_auto_flow": null,
"grid_auto_rows": null,
"grid_column": null,
"grid_gap": null,
"grid_row": null,
"grid_template_areas": null,
"grid_template_columns": null,
"grid_template_rows": null,
"height": null,
"justify_content": null,
"justify_items": null,
"left": null,
"margin": null,
"max_height": null,
"max_width": null,
"min_height": null,
"min_width": null,
"object_fit": null,
"object_position": null,
"order": null,
"overflow": null,
"overflow_x": null,
"overflow_y": null,
"padding": null,
"right": null,
"top": null,
"visibility": null,
"width": null
}
},
"b4a122e438c147eda2b1679877501665": {
"model_module": "@jupyter-widgets/base",
"model_name": "LayoutModel",
"model_module_version": "1.2.0",
"state": {
"_model_module": "@jupyter-widgets/base",
"_model_module_version": "1.2.0",
"_model_name": "LayoutModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "LayoutView",
"align_content": null,
"align_items": null,
"align_self": null,
"border": null,
"bottom": null,
"display": null,
"flex": null,
"flex_flow": null,
"grid_area": null,
"grid_auto_columns": null,
"grid_auto_flow": null,
"grid_auto_rows": null,
"grid_column": null,
"grid_gap": null,
"grid_row": null,
"grid_template_areas": null,
"grid_template_columns": null,
"grid_template_rows": null,
"height": null,
"justify_content": null,
"justify_items": null,
"left": null,
"margin": null,
"max_height": null,
"max_width": null,
"min_height": null,
"min_width": null,
"object_fit": null,
"object_position": null,
"order": null,
"overflow": null,
"overflow_x": null,
"overflow_y": null,
"padding": null,
"right": null,
"top": null,
"visibility": null,
"width": null
}
},
"6f1846243ccd4e52a48b1bf9b2b6cebd": {
"model_module": "@jupyter-widgets/controls",
"model_name": "DescriptionStyleModel",
"model_module_version": "1.5.0",
"state": {
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "DescriptionStyleModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "StyleView",
"description_width": ""
}
},
"de6bdffc891d40df94865231b223d749": {
"model_module": "@jupyter-widgets/base",
"model_name": "LayoutModel",
"model_module_version": "1.2.0",
"state": {
"_model_module": "@jupyter-widgets/base",
"_model_module_version": "1.2.0",
"_model_name": "LayoutModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "LayoutView",
"align_content": null,
"align_items": null,
"align_self": null,
"border": null,
"bottom": null,
"display": null,
"flex": null,
"flex_flow": null,
"grid_area": null,
"grid_auto_columns": null,
"grid_auto_flow": null,
"grid_auto_rows": null,
"grid_column": null,
"grid_gap": null,
"grid_row": null,
"grid_template_areas": null,
"grid_template_columns": null,
"grid_template_rows": null,
"height": null,
"justify_content": null,
"justify_items": null,
"left": null,
"margin": null,
"max_height": null,
"max_width": null,
"min_height": null,
"min_width": null,
"object_fit": null,
"object_position": null,
"order": null,
"overflow": null,
"overflow_x": null,
"overflow_y": null,
"padding": null,
"right": null,
"top": null,
"visibility": null,
"width": null
}
},
"742b549fd3444d0a8eb2269568c54b57": {
"model_module": "@jupyter-widgets/controls",
"model_name": "DescriptionStyleModel",
"model_module_version": "1.5.0",
"state": {
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "DescriptionStyleModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "StyleView",
"description_width": ""
}
},
"4d58a3a6aa4a4c99b192f9dcc91cebed": {
"model_module": "@jupyter-widgets/controls",
"model_name": "HTMLModel",
"model_module_version": "1.5.0",
"state": {
"_dom_classes": [],
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "HTMLModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/controls",
"_view_module_version": "1.5.0",
"_view_name": "HTMLView",
"description": "",
"description_tooltip": null,
"layout": "IPY_MODEL_b1fe72cc6f3b4ab5bdc5b71e8b20c289",
"placeholder": "​",
"style": "IPY_MODEL_d3eb299552144b38a9588ba3a43c1efa",
"value": "<style>.font_small {font-size: 9px; padding: 0px 0px; background-color: #4CAF50;color: red;}</style>"
}
},
"b1fe72cc6f3b4ab5bdc5b71e8b20c289": {
"model_module": "@jupyter-widgets/base",
"model_name": "LayoutModel",
"model_module_version": "1.2.0",
"state": {
"_model_module": "@jupyter-widgets/base",
"_model_module_version": "1.2.0",
"_model_name": "LayoutModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "LayoutView",
"align_content": null,
"align_items": null,
"align_self": null,
"border": null,
"bottom": null,
"display": null,
"flex": null,
"flex_flow": null,
"grid_area": null,
"grid_auto_columns": null,
"grid_auto_flow": null,
"grid_auto_rows": null,
"grid_column": null,
"grid_gap": null,
"grid_row": null,
"grid_template_areas": null,
"grid_template_columns": null,
"grid_template_rows": null,
"height": null,
"justify_content": null,
"justify_items": null,
"left": null,
"margin": null,
"max_height": null,
"max_width": null,
"min_height": null,
"min_width": null,
"object_fit": null,
"object_position": null,
"order": null,
"overflow": null,
"overflow_x": null,
"overflow_y": null,
"padding": null,
"right": null,
"top": null,
"visibility": null,
"width": null
}
},
"d3eb299552144b38a9588ba3a43c1efa": {
"model_module": "@jupyter-widgets/controls",
"model_name": "DescriptionStyleModel",
"model_module_version": "1.5.0",
"state": {
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "DescriptionStyleModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "StyleView",
"description_width": ""
}
},
"9e6cf9d7ded24bce8a28b84cb893e4ef": {
"model_module": "@jupyter-widgets/controls",
"model_name": "IntTextModel",
"model_module_version": "1.5.0",
"state": {
"_dom_classes": [
"font_small"
],
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "IntTextModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/controls",
"_view_module_version": "1.5.0",
"_view_name": "IntTextView",
"continuous_update": false,
"description": "Any",
"description_tooltip": null,
"disabled": false,
"layout": "IPY_MODEL_6a0cb57a51654d13be8a950d46e8c6b7",
"step": 1,
"style": "IPY_MODEL_11690d8eba4f448083e36d245185407f",
"value": 44
}
},
"6a0cb57a51654d13be8a950d46e8c6b7": {
"model_module": "@jupyter-widgets/base",
"model_name": "LayoutModel",
"model_module_version": "1.2.0",
"state": {
"_model_module": "@jupyter-widgets/base",
"_model_module_version": "1.2.0",
"_model_name": "LayoutModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "LayoutView",
"align_content": null,
"align_items": null,
"align_self": null,
"border": null,
"bottom": null,
"display": null,
"flex": null,
"flex_flow": null,
"grid_area": null,
"grid_auto_columns": null,
"grid_auto_flow": null,
"grid_auto_rows": null,
"grid_column": null,
"grid_gap": null,
"grid_row": null,
"grid_template_areas": null,
"grid_template_columns": null,
"grid_template_rows": null,
"height": null,
"justify_content": null,
"justify_items": null,
"left": null,
"margin": null,
"max_height": null,
"max_width": null,
"min_height": null,
"min_width": null,
"object_fit": null,
"object_position": null,
"order": null,
"overflow": null,
"overflow_x": null,
"overflow_y": null,
"padding": null,
"right": null,
"top": null,
"visibility": null,
"width": "220px"
}
},
"11690d8eba4f448083e36d245185407f": {
"model_module": "@jupyter-widgets/controls",
"model_name": "DescriptionStyleModel",
"model_module_version": "1.5.0",
"state": {
"_model_module": "@jupyter-widgets/controls",
"_model_module_version": "1.5.0",
"_model_name": "DescriptionStyleModel",
"_view_count": null,
"_view_module": "@jupyter-widgets/base",
"_view_module_version": "1.2.0",
"_view_name": "StyleView",
"description_width": ""
}
}
}
}
},
"cells": [
{
"cell_type": "markdown",
"metadata": {
"id": "view-in-github",
"colab_type": "text"
},
"source": [
"<a href=\"https://colab.research.google.com/gist/raven44099/7e0d239a06ca8caf32ec71dbd162d31c/ipywidgets-html_colab_examples.ipynb\" target=\"_parent\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open In Colab\"/></a>"
]
},
{
"cell_type": "markdown",
"source": [
"**The github preview of the `ipynb` viewer doesn't display it correctly. You must display it in `google-colab`**"
],
"metadata": {
"id": "Ci4Yae_HwKSN"
}
},
{
"cell_type": "code",
"execution_count": 8,
"metadata": {
"colab": {
"base_uri": "https://localhost:8080/",
"height": 108,
"referenced_widgets": [
"0dfceb2443fe44a38e225ef5fefa2167",
"b276355f07d1411cb51389ff2d291282",
"42a6ce8f541241b5b4fe8e64ec9f178d",
"4e7b07cb7db6412b84cf686efcd514e0",
"3229fb97ef714779b7848285f7cdce05",
"4889095f238d4bbf9b35a5feb8f7e392",
"dece7727931a454d8ac0879a26f87afc",
"5da31a73e81444439a21ca5fada39d54",
"d0e8cd84127d4639b0c402fe91d469a6",
"eb5725960cfc4ecea7103ead8e30844e",
"b4a122e438c147eda2b1679877501665",
"6f1846243ccd4e52a48b1bf9b2b6cebd",
"de6bdffc891d40df94865231b223d749",
"742b549fd3444d0a8eb2269568c54b57"
]
},
"id": "ZatBlReAst2R",
"outputId": "f5a22c87-0315-4dc4-93b3-045b2ae8ec4a"
},
"outputs": [
{
"output_type": "display_data",
"data": {
"text/plain": [
"HTML(value='<style>.mytext > select,.mytext > textarea {font-style: italic;color: blue;font-size: 30px;}</st…"
],
"application/vnd.jupyter.widget-view+json": {
"version_major": 2,
"version_minor": 0,
"model_id": "0dfceb2443fe44a38e225ef5fefa2167"
}
},
"metadata": {}
},
{
"output_type": "display_data",
"data": {
"text/plain": [
"HTML(value='<style>.font_small > select {font-size: 11px; padding: 0px 0px; background-color: #4CAF50;color: b…"
],
"application/vnd.jupyter.widget-view+json": {
"version_major": 2,
"version_minor": 0,
"model_id": "4e7b07cb7db6412b84cf686efcd514e0"
}
},
"metadata": {}
},
{
"output_type": "display_data",
"data": {
"text/plain": [
"HBox(children=(SelectMultiple(_dom_classes=('font_small',), options=('s', 'e', 's', 's'), value=()), Textarea(…"
],
"application/vnd.jupyter.widget-view+json": {
"version_major": 2,
"version_minor": 0,
"model_id": "dece7727931a454d8ac0879a26f87afc"
}
},
"metadata": {}
}
],
"source": [
"\n",
"from ipywidgets import HBox, Textarea, SelectMultiple, HTML, VBox\n",
"display(HTML(\"<style>.mytext > select,.mytext > textarea {font-style: italic;color: blue;font-size: 30px;}</style>\"))\n",
"display(HTML(\"<style>.font_small > select {font-size: 11px; padding: 0px 0px; background-color: #4CAF50;color: blue;}</style>\"))\n",
"w2= Textarea(value=\"Here it is\")\n",
"w2.add_class(\"mytext\")\n",
"\n",
"w1= SelectMultiple(options='sess')\n",
"w1.add_class('font_small')\n",
"\n",
"display(HBox([w1, w2]))"
]
},
{
"cell_type": "code",
"source": [
"import ipywidgets as widgets\n",
"from ipywidgets import Text, VBox, IntText\n",
"display(HTML(\"<style>.font_small {font-size: 9px; padding: 0px 0px; background-color: #4CAF50;color: red;}</style>\"))\n",
"\n",
"my_widget = IntText(value=44,\n",
" description='Any',\n",
" layout = {'width':'220px'},\n",
" style={'font_size': '50px'},\n",
")\n",
"my_widget.add_class('font_small')\n",
"\n",
"display(my_widget)"
],
"metadata": {
"colab": {
"base_uri": "https://localhost:8080/",
"height": 52,
"referenced_widgets": [
"4d58a3a6aa4a4c99b192f9dcc91cebed",
"b1fe72cc6f3b4ab5bdc5b71e8b20c289",
"d3eb299552144b38a9588ba3a43c1efa",
"9e6cf9d7ded24bce8a28b84cb893e4ef",
"6a0cb57a51654d13be8a950d46e8c6b7",
"11690d8eba4f448083e36d245185407f"
]
},
"id": "mdr2rDEupejO",
"outputId": "922a252b-8d8d-4a3b-cc48-a53bb6e64692"
},
"execution_count": 27,
"outputs": [
{
"output_type": "display_data",
"data": {
"text/plain": [
"HTML(value='<style>.font_small {font-size: 9px; padding: 0px 0px; background-color: #4CAF50;color: red;}</styl…"
],
"application/vnd.jupyter.widget-view+json": {
"version_major": 2,
"version_minor": 0,
"model_id": "4d58a3a6aa4a4c99b192f9dcc91cebed"
}
},
"metadata": {}
},
{
"output_type": "display_data",
"data": {
"text/plain": [
"IntText(value=44, description='Any', layout=Layout(width='220px'), _dom_classes=('font_small',))"
],
"application/vnd.jupyter.widget-view+json": {
"version_major": 2,
"version_minor": 0,
"model_id": "9e6cf9d7ded24bce8a28b84cb893e4ef"
}
},
"metadata": {}
}
]
},
{
"cell_type": "markdown",
"source": [
"# # Use <font color='red'>html </font> to specyfy personal class"
],
"metadata": {
"id": "55rOva0vgGPt"
}
},
{
"cell_type": "markdown",
"source": [
"## using ipywidgets.HTML"
],
"metadata": {
"id": "dvoj3XYTVqzU"
}
},
{
"cell_type": "code",
"source": [
"import ipywidgets as widgets\n",
"from ipywidgets import Layout, HTML\n",
"\n",
"button = widgets.Button(description=\"This is a 𝗯𝗹𝘂𝗲 𝗰𝗼𝗹𝗼𝗿𝗲𝗱 𝗲𝗮𝗿𝘁𝗵\",layout=Layout(width='70%', height='40px'),\n",
" # style=dict(text_color='#FFFFFF')\n",
" )\n",
"\n",
"display(HTML(\"<style>.font_blue {color: blue;}</style>\"))\n",
"button.add_class('font_blue')\n",
"button"
],
"metadata": {
"colab": {
"base_uri": "https://localhost:8080/",
"height": 65,
"referenced_widgets": [
"8d8827b13d664893b42d94790613b6e8",
"ed48d0949cff450d9885b6a3a1525f83",
"d7aae9220f144386b77986a7070b3a6f",
"00c75ccf4fbe4eb6a84fad5d60c074d2",
"94fbb1b3d52a42398312bfd6ab3d94be",
"29cb5e2092bd4696bd3e4b018052457e"
]
},
"id": "sGMwK15QsXj8",
"outputId": "8df0732a-654c-4af1-d882-615f1e3fc113"
},
"execution_count": null,
"outputs": [
{
"output_type": "display_data",
"data": {
"text/plain": [
"HTML(value='<style>.font_blue {color: blue;}</style>')"
],
"application/vnd.jupyter.widget-view+json": {
"version_major": 2,
"version_minor": 0,
"model_id": "8d8827b13d664893b42d94790613b6e8"
}
},
"metadata": {}
},
{
"output_type": "display_data",
"data": {
"text/plain": [
"Button(description='This is a 𝗯𝗹𝘂𝗲 𝗰𝗼𝗹𝗼𝗿𝗲𝗱 𝗲𝗮𝗿𝘁𝗵', layout=Layout(height='40px', width='70%'), style=ButtonStyl…"
],
"application/vnd.jupyter.widget-view+json": {
"version_major": 2,
"version_minor": 0,
"model_id": "00c75ccf4fbe4eb6a84fad5d60c074d2"
}
},
"metadata": {}
}
]
},
{
"cell_type": "code",
"source": [
"html = \"<h1 style='font-size:100px'> Test font Test again </h1>\"\n",
"display(HTML(\"<style>.font_big {font-size:100px;}</style>\"))\n",
"\n",
"bb = widgets.Button(description ='aaaa')\n",
"bb.add_class('font_big')"
],
"metadata": {
"colab": {
"base_uri": "https://localhost:8080/",
"height": 74,
"referenced_widgets": [
"599b94c06b8a485e9bdf85e62d9568c4",
"fe59a57819704a9b961afafe4d3ba993",
"6bf5845a2b0b46cd9627cc4a282d163c",
"48a423bd72c543a095b0670d7ee87f34",
"91da4eb0b8484de98c9dd7c436f5b860",
"fd9123b9d47a4903b5f9accd7f2b32f6"
]
},
"id": "p3FVjLltGgy-",
"outputId": "52fb4a99-29df-4ae2-d9e7-05319e00c54f"
},
"execution_count": null,
"outputs": [
{
"output_type": "display_data",
"data": {
"text/plain": [
"HTML(value='<style>.font_big {font-size:100px;}</style>')"
],
"application/vnd.jupyter.widget-view+json": {
"version_major": 2,
"version_minor": 0,
"model_id": "599b94c06b8a485e9bdf85e62d9568c4"
}
},
"metadata": {}
},
{
"output_type": "display_data",
"data": {
"text/plain": [
"Button(description='aaaa', style=ButtonStyle(), _dom_classes=('font_big',))"
],
"application/vnd.jupyter.widget-view+json": {
"version_major": 2,
"version_minor": 0,
"model_id": "48a423bd72c543a095b0670d7ee87f34"
}
},
"metadata": {}
}
]
},
{
"cell_type": "code",
"source": [
"\n",
"display(HTML(\"<style>.myclass {color:red ; font-size:200%;}</style>\"))\n",
"from ipywidgets import Button, Layout\n",
"\n",
"\n",
"b = Button(description = 'x', \n",
" # style = {'button_color': 'transparent'}, \n",
" layout = Layout(width = '30px'))\n",
"b.add_class('myclass')\n",
"b"
],
"metadata": {
"colab": {
"base_uri": "https://localhost:8080/",
"height": 53,
"referenced_widgets": [
"f01461bcb33e48e3a8b5016f357fed42",
"0a4c4c37489b4999969c7f779a16b1fa",
"df78d41fdeaf4a909f92381fdf97f9f5",
"19a6ce1516fd4231a1aa049c81dd1f14",
"bd2e3f18807846e9b8bb6b6a7354e946",
"fd8bb96a3a2840a28ffd99582a0ccb88"
]
},
"id": "PTOtKnucFUfP",
"outputId": "f9d81721-26db-4321-8c1a-170acdcd981b"
},
"execution_count": null,
"outputs": [
{
"output_type": "display_data",
"data": {
"text/plain": [
"HTML(value='<style>.myclass {color:red ; font-size:200%;}</style>')"
],
"application/vnd.jupyter.widget-view+json": {
"version_major": 2,
"version_minor": 0,
"model_id": "f01461bcb33e48e3a8b5016f357fed42"
}
},
"metadata": {}
},
{
"output_type": "display_data",
"data": {
"text/plain": [
"Button(description='x', layout=Layout(width='30px'), style=ButtonStyle(), _dom_classes=('myclass',))"
],
"application/vnd.jupyter.widget-view+json": {
"version_major": 2,
"version_minor": 0,
"model_id": "19a6ce1516fd4231a1aa049c81dd1f14"
}
},
"metadata": {}
}
]
},
{
"cell_type": "code",
"source": [
"from ipywidgets import GridBox, HBox\n",
"display(HTML(\"<style>.box_style{width:40%; border : 2px solid white; height: auto; background-color:brown;}</style>\"))\n",
"\n",
"btn_hello = Button(description='Hello')\n",
"gb = GridBox([btn_hello, btn_hello])\n",
"gb.add_class('box_style')\n",
"display(gb)\n"
],
"metadata": {
"id": "o7fUXTMHzVZO",
"colab": {
"base_uri": "https://localhost:8080/",
"height": 89,
"referenced_widgets": [
"c52e39f078f34e07b87d1debefbfac89",
"1dc1a620f4cd46c9a23724f56b42d22b",
"b995ecfb0aa3453392d3ea3d7fc43429",
"f5fa7a068cec4be9b4cd3dcdf9f5b7c2",
"3b2bb6661d104311b7fac6b7f0378f41",
"721a122ddc8045148ffaaf7b61e91d32",
"987098a7ed674b7586e7de9765ad7a7d",
"0da4ef8516d546d281539175cd4612ef"
]
},
"outputId": "9b952555-ac67-463d-bf11-dbaf8bac3783"
},
"execution_count": null,
"outputs": [
{
"output_type": "display_data",
"data": {
"text/plain": [
"HTML(value='<style>.box_style{width:40%; border : 2px solid white; height: auto; background-color:brown;}</sty…"
],
"application/vnd.jupyter.widget-view+json": {
"version_major": 2,
"version_minor": 0,
"model_id": "c52e39f078f34e07b87d1debefbfac89"
}
},
"metadata": {}
},
{
"output_type": "display_data",
"data": {
"text/plain": [
"GridBox(children=(Button(description='Hello', style=ButtonStyle()), Button(description='Hello', style=ButtonSt…"
],
"application/vnd.jupyter.widget-view+json": {
"version_major": 2,
"version_minor": 0,
"model_id": "f5fa7a068cec4be9b4cd3dcdf9f5b7c2"
}
},
"metadata": {}
}
]
},
{
"cell_type": "code",
"source": [
"\n",
"display(HTML(\"<style>.mytext > select,.mytext > textarea {font-style: italic;color: blue;font-size: 50px;}</style>\"))\n",
"display(HTML(\"<style>.font_small > select {font-size: 5px; padding: 0px 0px; background-color: #4CAF50;color: blue;}</style>\"))\n",
"w2=widgets.Textarea(value=\"Here it is\")\n",
"w2.add_class(\"mytext\")\n",
"\n",
"w1=widgets.SelectMultiple(options='sess')\n",
"\n",
"w1.add_class('font_small')\n",
"\n",
"display(HBox([w1, w2]))\n"
],
"metadata": {
"id": "levqzeOmvl56",
"colab": {
"base_uri": "https://localhost:8080/",
"height": 154,
"referenced_widgets": [
"6d751aa4e7d141fa9d25a31a93610246",
"33448a6cb1d841bf8a54316791527f91",
"c35c306911df41318bdfe3b6f780bcf2",
"f0c3844372e844ecb16e009c9cd42469",
"3b1ddfd11f68467fa07a9cd187c94356",
"59d8acdd897c47fa897d1eeb78561079",
"7d52de5b0a844249859ca569a09c366c",
"b82de30590f448c2a29100563450d877",
"a715968984d14f498cbbb3b27d43f272",
"d24039d9ddc14802aec7fd36cea73cb0",
"4cf9a5c9ad29427b872c285ed904989f",
"2098276d26ac4054979dbd5bc7af4098",
"13cdf60a3a8147279eaac67aff890411",
"6193adee9e60428b86d0246682aef464"
]
},
"outputId": "d35a8135-b375-4147-c0a8-f3d73c91913f"
},
"execution_count": null,
"outputs": [
{
"output_type": "display_data",
"data": {
"text/plain": [
"HTML(value='<style>.mytext > select,.mytext > textarea {font-style: italic;color: blue;font-size: 50px;}</st…"
],
"application/vnd.jupyter.widget-view+json": {
"version_major": 2,
"version_minor": 0,
"model_id": "6d751aa4e7d141fa9d25a31a93610246"
}
},
"metadata": {}
},
{
"output_type": "display_data",
"data": {
"text/plain": [
"HTML(value='<style>.font_small > select {font-size: 5px; padding: 0px 0px; background-color: #4CAF50;color: bl…"
],
"application/vnd.jupyter.widget-view+json": {
"version_major": 2,
"version_minor": 0,
"model_id": "f0c3844372e844ecb16e009c9cd42469"
}
},
"metadata": {}
},
{
"output_type": "display_data",
"data": {
"text/plain": [
"HBox(children=(SelectMultiple(_dom_classes=('font_small',), options=('s', 'e', 's', 's'), value=()), Textarea(…"
],
"application/vnd.jupyter.widget-view+json": {
"version_major": 2,
"version_minor": 0,
"model_id": "7d52de5b0a844249859ca569a09c366c"
}
},
"metadata": {}
}
]
},
{
"cell_type": "code",
"source": [
"from IPython.display import display\n",
"\n",
"float_range = widgets.FloatSlider()\n",
"string = widgets.Text(value='hi')\n",
"container = widgets.Box(children=[float_range, string])\n",
"\n",
"container.border_color = 'red'\n",
"container.border_style = 'dotted'\n",
"container.border_width = 3\n",
"display(container) # Displays the `container` and all of it's children.\n",
"\n",
"display(HTML(\"<style>.example-container { background: #999999; padding: 2px; min-height: 80px; }.example-container.sm { min-height: 50px; }.example-box { background: #9999FF; width: 500px; height: 50px; text-align: center; vertical-align: middle; color: white; font-weight: bold; margin: 2px;} .example-box.med { width: 65px; height: 65px; } .example-box.lrg { width: 80px; height: 80px; } </style>\"))\n",
"\n",
"container.add_class('example-container')\n",
"container.add_class('example-container.sm')\n",
"container.add_class('example-box')\n",
"container.add_class(\"example-box.med\")\n",
"container.add_class(\"example-box.lrg\") "
],
"metadata": {
"colab": {
"base_uri": "https://localhost:8080/",
"height": 185,
"referenced_widgets": [
"ff9c1ce0a60940cc873a41365f16db40",
"a66d219272934e3c9c5bb42237ef88bc",
"2f25b549087741af8e35e35b41bd7758",
"4d280809e9d64520a958c0488fd467f7",
"c1c12690b6a34175bbdbb22fe187a1ca",
"b7061c41bb0e4d639888e0278a597efa",
"459eeb5196e849f095c795bf4376271e",
"8c5a66ef8bb24ffd8df22e3403d231c7",
"2fd0d1faa6b24101873a898cf818f54c",
"e28a4f26cbe74e978522d7d32e78c974",
"9c00e0f3e1684bdea3ce50bb05cdbc5f"
]
},
"outputId": "e73288b3-0dd0-47f3-c855-5d4b23486567",
"id": "G8osydKsb48M"
},
"execution_count": null,
"outputs": [
{
"output_type": "display_data",
"data": {
"text/plain": [
"Box(children=(FloatSlider(value=0.0), Text(value='hi')))"
],
"application/vnd.jupyter.widget-view+json": {
"version_major": 2,
"version_minor": 0,
"model_id": "ff9c1ce0a60940cc873a41365f16db40"
}
},
"metadata": {}
},
{
"output_type": "display_data",
"data": {
"text/plain": [
"HTML(value='<style>.example-container { background: #999999; padding: 2px; min-height: 80px; }.example-contain…"
],
"application/vnd.jupyter.widget-view+json": {
"version_major": 2,
"version_minor": 0,
"model_id": "2fd0d1faa6b24101873a898cf818f54c"
}
},
"metadata": {}
},
{
"output_type": "display_data",
"data": {
"text/plain": [
"Box(children=(FloatSlider(value=0.0), Text(value='hi')), _dom_classes=('example-container', 'example-container…"
],
"application/vnd.jupyter.widget-view+json": {
"version_major": 2,
"version_minor": 0,
"model_id": "ff9c1ce0a60940cc873a41365f16db40"
}
},
"metadata": {}
}
]
},
{
"cell_type": "code",
"source": [
"#@title another one:\n",
"\n",
"%%html\n",
"<style>\n",
".button_style {\n",
" --size: 80px;\n",
" --line-color: black;\n",
" --line-color-horizontal: var(--line-color);\n",
" --line-color-vertical: var(--line-color);\n",
" --line-stroke: calc(0.125 * var(--size));\n",
" --line-stroke-horizontal: var(--line-stroke);\n",
" --line-stroke-vertical: var(--line-stroke);\n",
" --line-distance: calc(0.2 * var(--size));\n",
" --line-distance-right: var(--line-distance);\n",
" --line-distance-bottom: var(--line-distance);\n",
" --line-hover: lightblue;\n",
" --background: blue;\n",
" --background-hover: var(--background);\n",
" color: black;\n",
" padding: 0;\n",
" background: var(--background);\n",
" width: var(--size);\n",
" height: var(--size);\n",
" position: relative;\n",
" border: none;\n",
" cursor: pointer;\n",
"}\n",
"\n",
".button_style:hover {\n",
" background: var(--background-hover);\n",
"}\n",
"\n",
".button_style:hover::before, .button_style:hover::after {\n",
" background: var(--line-hover);\n",
"}\n",
"\n",
".button_style::before, .button_style::after {\n",
" position: absolute;\n",
" content: \"\";\n",
" transition: background 250ms;\n",
"}\n",
"\n",
".button_style::before {\n",
" left: 0;\n",
" bottom: var(--line-distance-bottom);\n",
" width: 100%;\n",
" height: var(--line-stroke-horizontal);\n",
" background: var(--line-color-horizontal);\n",
"}\n",
"\n",
".button_style::after {\n",
" right: var(--line-distance-right);\n",
" top: 0;\n",
" height: 100%;\n",
" width: var(--line-stroke-vertical);\n",
" background: var(--line-color-vertical);\n",
"}\n",
"</style>\n",
"Definition\n"
],
"metadata": {
"id": "h4a2Yqs9rKx2",
"colab": {
"base_uri": "https://localhost:8080/",
"height": 34
},
"outputId": "c556483a-7634-4d1b-b8dc-a0abfa520c22"
},
"execution_count": null,
"outputs": [
{
"output_type": "display_data",
"data": {
"text/plain": [
"<IPython.core.display.HTML object>"
],
"text/html": [
"<style>\n",
".button_style {\n",
" --size: 80px;\n",
" --line-color: black;\n",
" --line-color-horizontal: var(--line-color);\n",
" --line-color-vertical: var(--line-color);\n",
" --line-stroke: calc(0.125 * var(--size));\n",
" --line-stroke-horizontal: var(--line-stroke);\n",
" --line-stroke-vertical: var(--line-stroke);\n",
" --line-distance: calc(0.2 * var(--size));\n",
" --line-distance-right: var(--line-distance);\n",
" --line-distance-bottom: var(--line-distance);\n",
" --line-hover: lightblue;\n",
" --background: blue;\n",
" --background-hover: var(--background);\n",
" color: black;\n",
" padding: 0;\n",
" background: var(--background);\n",
" width: var(--size);\n",
" height: var(--size);\n",
" position: relative;\n",
" border: none;\n",
" cursor: pointer;\n",
"}\n",
"\n",
".button_style:hover {\n",
" background: var(--background-hover);\n",
"}\n",
"\n",
".button_style:hover::before, .button_style:hover::after {\n",
" background: var(--line-hover);\n",
"}\n",
"\n",
".button_style::before, .button_style::after {\n",
" position: absolute;\n",
" content: \"\";\n",
" transition: background 250ms;\n",
"}\n",
"\n",
".button_style::before {\n",
" left: 0;\n",
" bottom: var(--line-distance-bottom);\n",
" width: 100%;\n",
" height: var(--line-stroke-horizontal);\n",
" background: var(--line-color-horizontal);\n",
"}\n",
"\n",
".button_style::after {\n",
" right: var(--line-distance-right);\n",
" top: 0;\n",
" height: 100%;\n",
" width: var(--line-stroke-vertical);\n",
" background: var(--line-color-vertical);\n",
"}\n",
"</style>\n",
"Definition\n"
]
},
"metadata": {}
}
]
},
{
"cell_type": "code",
"source": [
"%%html\n",
"<button class=\"button_style\"></button>\n",
"\n",
"<button class=\"button_style\" style=\"--line-distance: 35px; --background: purple; --line-hover: white\"></button>\n",
"\n",
"<button class=\"button_style\" style=\"--line-distance-bottom: 10px; --line-distance-right: 65px; --background: hsl(348, 100%, 61%); --line-color: hsl(48, 100%, 67%); --line-hover: white\"></button>\n",
"\n",
"<button class=\"button_style\" style=\"--line-distance-bottom: 20px; --line-distance-right: 20px; --background: orange; --line-stroke-horizontal: 25px; --line-hover: orange; --background-hover: black\"></button>\n",
"\n",
"<div style=\"margin: 1em 0\">\n",
" <button class=\"button_style\" style=\"--size: 40px\"></button>\n",
"</div>"
],
"metadata": {
"id": "7C2pV6prrjuh",
"colab": {
"base_uri": "https://localhost:8080/",
"height": 80
},
"outputId": "453f3347-5874-49b5-fe0f-b8744faa8431"
},
"execution_count": null,
"outputs": [
{
"output_type": "display_data",
"data": {
"text/plain": [
"<IPython.core.display.HTML object>"
],
"text/html": [
"<button class=\"button_style\"></button>\n",
"\n",
"<button class=\"button_style\" style=\"--line-distance: 35px; --background: purple; --line-hover: white\"></button>\n",
"\n",
"<button class=\"button_style\" style=\"--line-distance-bottom: 10px; --line-distance-right: 65px; --background: hsl(348, 100%, 61%); --line-color: hsl(48, 100%, 67%); --line-hover: white\"></button>\n",
"\n",
"<button class=\"button_style\" style=\"--line-distance-bottom: 20px; --line-distance-right: 20px; --background: orange; --line-stroke-horizontal: 25px; --line-hover: orange; --background-hover: black\"></button>\n",
"\n",
"<div style=\"margin: 1em 0\">\n",
" <button class=\"button_style\" style=\"--size: 40px\"></button>\n",
"</div>\n"
]
},
"metadata": {}
}
]
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment