diff --git a/src/CSSWidgetWrapper.jl b/src/CSSWidgetWrapper.jl new file mode 100644 index 00000000..f3fabf84 --- /dev/null +++ b/src/CSSWidgetWrapper.jl @@ -0,0 +1,35 @@ +export CSSWidgetWrapper + +""" + CSSWidgetWrapper(widget, style::Dict{String,String}) + +Modify the style properties of the first HTML node for the given widget. + +# Examples +Generate a text field with a red background and white text. +``` +@bind text CSSWidgetWrapper(TextField(),Dict("backgroundColor"=>"red","color"=>"white")) +``` +Generate a text field with 1px wide solid red border. +``` +@bind text CSSWidgetWrapper(TextField(),Dict("border"=>"1px solid red")) +``` +""" +struct CSSWidgetWrapper + widget + style::Dict{String,String} +end + +function show(io::IO, m::MIME"text/html", w::CSSWidgetWrapper) + style = join(["widget.style.$k = '$v';" for (k,v) in w.style],"\n") + script = """ + + """ + show(io,m,w.widget) + print(io,script) +end + +Base.get(w::CSSWidgetWrapper) = get(w.widget) diff --git a/src/PlutoUI.jl b/src/PlutoUI.jl index 135086cb..7bd58c8a 100644 --- a/src/PlutoUI.jl +++ b/src/PlutoUI.jl @@ -12,6 +12,7 @@ include("./Resource.jl") include("./Terminal.jl") include("./RangeSlider.jl") include("./DisplayTricks.jl") +include("./CSSWidgetWrapper.jl") @reexport module MultiCheckBoxNotebook include("./MultiCheckBox.jl")