mirror of
https://github.com/IHaskell/IHaskell.git
synced 2025-04-16 11:26:08 +00:00
419 lines
10 KiB
Plaintext
419 lines
10 KiB
Plaintext
{
|
|
"cells": [
|
|
{
|
|
"cell_type": "markdown",
|
|
"id": "089cfc9a-ee04-4a75-b519-e1b1ef4c5ed5",
|
|
"metadata": {},
|
|
"source": [
|
|
"# The Layout and Style Widgets\n",
|
|
"\n",
|
|
"## The Layout widget\n",
|
|
"The layout widget is a widget that adheres to any other widget. It holds some CSS layout properties for its father widget. E.g: width and height, alignment, border..."
|
|
]
|
|
},
|
|
{
|
|
"cell_type": "code",
|
|
"execution_count": 1,
|
|
"id": "3643e44d-0220-46be-867e-8e7781fb7bbe",
|
|
"metadata": {},
|
|
"outputs": [],
|
|
"source": [
|
|
"{-# LANGUAGE OverloadedStrings #-}\n",
|
|
"import IHaskell.Display.Widgets\n",
|
|
"import qualified IHaskell.Display.Widgets.Layout as L\n",
|
|
"import Data.Text as T"
|
|
]
|
|
},
|
|
{
|
|
"cell_type": "markdown",
|
|
"id": "billion-cookbook",
|
|
"metadata": {},
|
|
"source": [
|
|
"First, we need a sample widget to modify its layout"
|
|
]
|
|
},
|
|
{
|
|
"cell_type": "code",
|
|
"execution_count": 2,
|
|
"id": "d8430ed3-0e24-4057-8230-73c47fa75793",
|
|
"metadata": {},
|
|
"outputs": [
|
|
{
|
|
"data": {
|
|
"application/vnd.jupyter.widget-view+json": {
|
|
"model_id": "1ede881c-d143-41db-a247-281e2cc0146a",
|
|
"version_major": 2,
|
|
"version_minor": 0
|
|
}
|
|
},
|
|
"metadata": {},
|
|
"output_type": "display_data"
|
|
}
|
|
],
|
|
"source": [
|
|
"button <- mkButton\n",
|
|
"setField @Description button \"Click me!\"\n",
|
|
"button"
|
|
]
|
|
},
|
|
{
|
|
"cell_type": "markdown",
|
|
"id": "supreme-ribbon",
|
|
"metadata": {},
|
|
"source": [
|
|
"Then, we get the associated Layout widget with `getField`"
|
|
]
|
|
},
|
|
{
|
|
"cell_type": "code",
|
|
"execution_count": 3,
|
|
"id": "08d9c91c-8065-4a66-b564-b225e316f379",
|
|
"metadata": {},
|
|
"outputs": [],
|
|
"source": [
|
|
"layout <- getField @Layout button"
|
|
]
|
|
},
|
|
{
|
|
"cell_type": "markdown",
|
|
"id": "immediate-hospital",
|
|
"metadata": {},
|
|
"source": [
|
|
"We can display all the things we can modify using the `properties` function."
|
|
]
|
|
},
|
|
{
|
|
"cell_type": "code",
|
|
"execution_count": 4,
|
|
"id": "6357dffb-f70e-475e-a007-41211d495042",
|
|
"metadata": {},
|
|
"outputs": [
|
|
{
|
|
"data": {
|
|
"text/plain": [
|
|
"ModelModule ::: Text\n",
|
|
"ModelModuleVersion ::: Text\n",
|
|
"ModelName ::: Text\n",
|
|
"ViewModule ::: Text\n",
|
|
"ViewModuleVersion ::: Text\n",
|
|
"ViewName ::: Text\n",
|
|
"LAlignContent ::: Maybe [Char]\n",
|
|
"LAlignItems ::: Maybe [Char]\n",
|
|
"LAlignSelf ::: Maybe [Char]\n",
|
|
"LBorderBottom ::: Maybe [Char]\n",
|
|
"LBorderLeft ::: Maybe [Char]\n",
|
|
"LBorderRight ::: Maybe [Char]\n",
|
|
"LBorderTop ::: Maybe [Char]\n",
|
|
"LBottom ::: Maybe [Char]\n",
|
|
"LDisplay ::: Maybe [Char]\n",
|
|
"LFlex ::: Maybe [Char]\n",
|
|
"LFlexFlow ::: Maybe [Char]\n",
|
|
"LGridArea ::: Maybe [Char]\n",
|
|
"LGridAutoColumns ::: Maybe [Char]\n",
|
|
"LGridAutoFlow ::: Maybe [Char]\n",
|
|
"LGridAutoRows ::: Maybe [Char]\n",
|
|
"LGridColumn ::: Maybe [Char]\n",
|
|
"LGridGap ::: Maybe [Char]\n",
|
|
"LGridRow ::: Maybe [Char]\n",
|
|
"LGridTemplateAreas ::: Maybe [Char]\n",
|
|
"LGridTemplateColumns ::: Maybe [Char]\n",
|
|
"LGridTemplateRows ::: Maybe [Char]\n",
|
|
"LHeight ::: Maybe [Char]\n",
|
|
"LJustifyContent ::: Maybe [Char]\n",
|
|
"LJustifyItems ::: Maybe [Char]\n",
|
|
"LLeft ::: Maybe [Char]\n",
|
|
"LMargin ::: Maybe [Char]\n",
|
|
"LMaxHeight ::: Maybe [Char]\n",
|
|
"LMaxWidth ::: Maybe [Char]\n",
|
|
"LMinHeight ::: Maybe [Char]\n",
|
|
"LMinWidth ::: Maybe [Char]\n",
|
|
"LObjectFit ::: Maybe [Char]\n",
|
|
"LObjectPosition ::: Maybe [Char]\n",
|
|
"LOrder ::: Maybe [Char]\n",
|
|
"LOverflow ::: Maybe [Char]\n",
|
|
"LPadding ::: Maybe [Char]\n",
|
|
"LRight ::: Maybe [Char]\n",
|
|
"LTop ::: Maybe [Char]\n",
|
|
"LVisibility ::: Maybe [Char]\n",
|
|
"LWidth ::: Maybe [Char]"
|
|
]
|
|
},
|
|
"metadata": {},
|
|
"output_type": "display_data"
|
|
}
|
|
],
|
|
"source": [
|
|
"properties layout"
|
|
]
|
|
},
|
|
{
|
|
"cell_type": "code",
|
|
"execution_count": 5,
|
|
"id": "ef00e9aa-3f48-42ff-bb45-9f59b09e78e4",
|
|
"metadata": {},
|
|
"outputs": [],
|
|
"source": [
|
|
"setField @L.Height layout $ Just \"50px\"\n",
|
|
"setField @L.MinWidth layout $ Just \"70%\"\n",
|
|
"setField @L.Padding layout $ Just \"10px\""
|
|
]
|
|
},
|
|
{
|
|
"cell_type": "markdown",
|
|
"id": "furnished-quantity",
|
|
"metadata": {},
|
|
"source": [
|
|
"The layout widget is most useful with the `Box` widgets, if you know how to use CSS layouts.\n",
|
|
"\n",
|
|
"## The Style Widgets\n",
|
|
"\n",
|
|
"Some widgets have some predefined styles that you can set, like buttons or sliders. But if you want more customization you have to use a Style widget. There are five kinds of style widgets:\n",
|
|
"\n",
|
|
"- `ButtonStyle`\n",
|
|
"- `DescriptionStyle`\n",
|
|
"- `ProgressStyle`\n",
|
|
"- `SliderStyle`\n",
|
|
"- `ToggleButtonsStyle`\n",
|
|
"\n",
|
|
"We are going to do an example with a slider. First, we have to create both widgets:"
|
|
]
|
|
},
|
|
{
|
|
"cell_type": "code",
|
|
"execution_count": 6,
|
|
"id": "widespread-precipitation",
|
|
"metadata": {},
|
|
"outputs": [
|
|
{
|
|
"data": {
|
|
"application/vnd.jupyter.widget-view+json": {
|
|
"model_id": "def956c6-a71a-4aa1-b78a-e65b3cb068d8",
|
|
"version_major": 2,
|
|
"version_minor": 0
|
|
}
|
|
},
|
|
"metadata": {},
|
|
"output_type": "display_data"
|
|
}
|
|
],
|
|
"source": [
|
|
"-- Creating the slider\n",
|
|
"slider <- mkIntSlider\n",
|
|
"\n",
|
|
"-- Creating the style widget\n",
|
|
"style <- mkSliderStyle\n",
|
|
"\n",
|
|
"-- Displaying the slider\n",
|
|
"slider"
|
|
]
|
|
},
|
|
{
|
|
"cell_type": "markdown",
|
|
"id": "internal-movement",
|
|
"metadata": {},
|
|
"source": [
|
|
"Then, we set the Slider's style, setting the field `Style`. We have to use the `StyleWidget` constructor."
|
|
]
|
|
},
|
|
{
|
|
"cell_type": "code",
|
|
"execution_count": 7,
|
|
"id": "physical-anthony",
|
|
"metadata": {},
|
|
"outputs": [
|
|
{
|
|
"data": {
|
|
"text/html": [
|
|
"<style>/* Styles used for the Hoogle display in the pager */\n",
|
|
".hoogle-doc {\n",
|
|
"display: block;\n",
|
|
"padding-bottom: 1.3em;\n",
|
|
"padding-left: 0.4em;\n",
|
|
"}\n",
|
|
".hoogle-code {\n",
|
|
"display: block;\n",
|
|
"font-family: monospace;\n",
|
|
"white-space: pre;\n",
|
|
"}\n",
|
|
".hoogle-text {\n",
|
|
"display: block;\n",
|
|
"}\n",
|
|
".hoogle-name {\n",
|
|
"color: green;\n",
|
|
"font-weight: bold;\n",
|
|
"}\n",
|
|
".hoogle-head {\n",
|
|
"font-weight: bold;\n",
|
|
"}\n",
|
|
".hoogle-sub {\n",
|
|
"display: block;\n",
|
|
"margin-left: 0.4em;\n",
|
|
"}\n",
|
|
".hoogle-package {\n",
|
|
"font-weight: bold;\n",
|
|
"font-style: italic;\n",
|
|
"}\n",
|
|
".hoogle-module {\n",
|
|
"font-weight: bold;\n",
|
|
"}\n",
|
|
".hoogle-class {\n",
|
|
"font-weight: bold;\n",
|
|
"}\n",
|
|
"\n",
|
|
".get-type {\n",
|
|
"color: green;\n",
|
|
"font-weight: bold;\n",
|
|
"font-family: monospace;\n",
|
|
"display: block;\n",
|
|
"white-space: pre-wrap;\n",
|
|
"}\n",
|
|
".show-type {\n",
|
|
"color: green;\n",
|
|
"font-weight: bold;\n",
|
|
"font-family: monospace;\n",
|
|
"margin-left: 1em;\n",
|
|
"}\n",
|
|
".mono {\n",
|
|
"font-family: monospace;\n",
|
|
"display: block;\n",
|
|
"}\n",
|
|
".err-msg {\n",
|
|
"color: red;\n",
|
|
"font-style: italic;\n",
|
|
"font-family: monospace;\n",
|
|
"white-space: pre;\n",
|
|
"display: block;\n",
|
|
"}\n",
|
|
"#unshowable {\n",
|
|
"color: red;\n",
|
|
"font-weight: bold;\n",
|
|
"}\n",
|
|
".err-msg.in.collapse {\n",
|
|
"padding-top: 0.7em;\n",
|
|
"}\n",
|
|
"\n",
|
|
".highlight-code {\n",
|
|
"white-space: pre;\n",
|
|
"font-family: monospace;\n",
|
|
"}\n",
|
|
"\n",
|
|
".suggestion-warning { \n",
|
|
"font-weight: bold;\n",
|
|
"color: rgb(200, 130, 0);\n",
|
|
"}\n",
|
|
".suggestion-error { \n",
|
|
"font-weight: bold;\n",
|
|
"color: red;\n",
|
|
"}\n",
|
|
".suggestion-name {\n",
|
|
"font-weight: bold;\n",
|
|
"}\n",
|
|
"\n",
|
|
"</style><span class='get-type'>StyleWidget :: forall w. RecAll Attr (WidgetFields w) ToPairs => IPythonWidget w -> StyleWidget</span>"
|
|
],
|
|
"text/plain": [
|
|
"StyleWidget :: forall w. RecAll Attr (WidgetFields w) ToPairs => IPythonWidget w -> StyleWidget"
|
|
]
|
|
},
|
|
"metadata": {},
|
|
"output_type": "display_data"
|
|
}
|
|
],
|
|
"source": [
|
|
":t StyleWidget\n",
|
|
"setField @Style slider $ StyleWidget style"
|
|
]
|
|
},
|
|
{
|
|
"cell_type": "markdown",
|
|
"id": "turned-implement",
|
|
"metadata": {},
|
|
"source": [
|
|
"What happens if we set a long description?"
|
|
]
|
|
},
|
|
{
|
|
"cell_type": "code",
|
|
"execution_count": 8,
|
|
"id": "chemical-applicant",
|
|
"metadata": {},
|
|
"outputs": [],
|
|
"source": [
|
|
"setField @Description slider \"This is a long description\""
|
|
]
|
|
},
|
|
{
|
|
"cell_type": "markdown",
|
|
"id": "differential-trademark",
|
|
"metadata": {},
|
|
"source": [
|
|
"The description is so long, the fronted has to cut it by default. But we have our style widget to save us. "
|
|
]
|
|
},
|
|
{
|
|
"cell_type": "code",
|
|
"execution_count": 9,
|
|
"id": "relevant-intensity",
|
|
"metadata": {},
|
|
"outputs": [],
|
|
"source": [
|
|
"setField @DescriptionWidth style \"14em\""
|
|
]
|
|
},
|
|
{
|
|
"cell_type": "markdown",
|
|
"id": "defensive-minutes",
|
|
"metadata": {},
|
|
"source": [
|
|
"Now the widget is very small... Let's make it a bit bigger using our layout tricks..."
|
|
]
|
|
},
|
|
{
|
|
"cell_type": "code",
|
|
"execution_count": 10,
|
|
"id": "collective-failing",
|
|
"metadata": {},
|
|
"outputs": [],
|
|
"source": [
|
|
"layout <- getField @Layout slider\n",
|
|
"setField @L.Width layout $ Just \"30em\""
|
|
]
|
|
},
|
|
{
|
|
"cell_type": "markdown",
|
|
"id": "ignored-nomination",
|
|
"metadata": {},
|
|
"source": [
|
|
"We can also set the color of the handle to anything we want"
|
|
]
|
|
},
|
|
{
|
|
"cell_type": "code",
|
|
"execution_count": 11,
|
|
"id": "perfect-antarctica",
|
|
"metadata": {},
|
|
"outputs": [],
|
|
"source": [
|
|
"setField @HandleColor style $ Just \"pink\""
|
|
]
|
|
}
|
|
],
|
|
"metadata": {
|
|
"kernelspec": {
|
|
"display_name": "Haskell",
|
|
"language": "haskell",
|
|
"name": "haskell"
|
|
},
|
|
"language_info": {
|
|
"codemirror_mode": "ihaskell",
|
|
"file_extension": ".hs",
|
|
"mimetype": "text/x-haskell",
|
|
"name": "haskell",
|
|
"pygments_lexer": "Haskell",
|
|
"version": "9.8.2"
|
|
}
|
|
},
|
|
"nbformat": 4,
|
|
"nbformat_minor": 5
|
|
}
|