Formatting Pluto widgets

Tooling Pluto
1

Hello

I like Pluto.
Would there be a way to customize the formatting of Pluto widgets.
Today I have these hopes:

  • For a NumberField: controling its width, the border color, the alignment to the right
  • For several NumberField used in a Markdown table: align the widgets and make them same size

Thanks for your suggestions

Michel

2

The input fields are quite easy to implement.
If you look at the source code of the numberfield you will see that a styled number field would not need much extra work. Assuming you know some html/css.

I just don’t know if the input element has to be the root element. Here I would suggest looking a bit into how the @bind macro works.

https://github.com/fonsp/PlutoUI.jl/blob/a21df4166deca1535080cebb8bb65a9d989215d5/src/Builtins.jl#L51

3

Thanks a lot !
To lead lead me from mystery to science !
Michel

4

I had some time to play with it a little.

Here is a gist of a Pluto notebook showing how to implement a custom widget.

@fonsp Did I miss something important? The reason of defining get is not completely clear to me.

5

Thanks a lot!

6

Take a look at:

and the Interactivity sample notebook available from the Pluto main menu ( http://localhost:1234/sample )

3 Likes
7

I wrote a small wrapper which enables passing style properties via a Dict.
https://github.com/fonsp/PlutoUI.jl/pull/98

Example:

@bind text CSSWidgetWrapper(TextField(default="hi"),
	Dict(
"backgroundColor"=>"green",
"color"=>"white",
"float"=>"right",
"border"=>"4px solid red",
"width"=>"30%")
)
4 Likes