Basic Widgets

This Package exports two basic widgets: Editable and StringOnEnter

Editable

PlutoExtras.EditableType
Editable(x::Real; [prefix, suffix, format])

Create a Pluto widget similar to Scrubbable from PlutoUI but that can contain an arbitrary (Real) number provided as input.

The displayed HTML will create a span with a blue background which contains the number and is preceded by an optional text prefix and an optional text suffix. If format is specified, it will be used to format the shown number using the d3-format specification.

The widget will trigger a bond update only upon pressing Enter or moving the focus out of the widget itself.

79f77981-2c53-4ff0-bd13-8213519e0bca

Keyword Arguments

  • prefix::AbstractString: A string that will be inserted in the displayed HTML before the number. Clicking on the suffix will select the full text defining the number
  • suffix::AbstractString: A string that will be inserted in the displayed HTML after the number. Clicking on the suffix will select the full text defining the number
  • format::AbstractString: A string specifing the format to use for displaying the number in HTML. Uses the d3-format specification
source
Editable(x::Bool[, true_string="true", false_string="false")

Create a Pluto widget that contain a Boolean value.

The displayed HTML will create a span with a green background that displays the custom string true_string when true and the false_string when false. If not provided, the second argument true_string defaults to "true" and the third one the "false".

The widget will trigger a bond update when clicking on it.

991b712a-d62d-4036-b096-fe0fc52c9b25

source

StringOnEnter

PlutoExtras.StringOnEnterType
StringOnEnter(default::AbstractString)

Creates a Pluto widget that allows to provide a string as output when used with @bind.

Unlike the custom "TextField" from PlutoUI this only triggers a bond update upon pressing Enter or moving the focus out of the widget (similar to Editable)

When rendered in HTML, the widget text will be shown with a dark yellow background.

868c1c6e-8731-4465-959e-58cf551b9f61

source