Formatting Pluto widgets

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

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.

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

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.

Thanks a lot!

Take a look at:

https://plutocon2021-demos.netlify.app/fonsp%20β€”%20javascript%20inside%20pluto

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

3 Likes

I wrote a small wrapper which enables passing style properties via a Dict.

Example:

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