sanette/bogue

Unable to style text-input field

IdaraNabuk opened this issue · 4 comments

I have been trying to embed a text input field in a box or create a border around the text input field but it seems impossible. Is there a way to do this?

Here's one of the ways I tried achieving it in this temperature converter PR

yes, widgets are always put in layouts, and you may style the layout, using the ~background option of functions like Layout.resident, Layout.flat_of_w etc.

For instance:

open Bogue;;
let t = Widget.text_input () in
let style = Style.(of_bg (color_bg Draw.(opaque (find_color "beige")))
                   |> with_border
                     (mk_border ~radius:12
                        (mk_line ~width:3 ~color:Draw.(opaque blue) ()))) in
let l = Layout.resident ~w:200 ~background:(Layout.style_bg style) t in
let house = Layout.flat ~margins:50 [l] in
Bogue.(run (of_layout house));; 

text_input1

and if you want more space around the text_input, you may use the sep parameter of flat_of_w:

let t = Widget.text_input () in
let style = Style.(of_bg (color_bg Draw.(opaque (find_color "beige")))
                   |> with_border
                     (mk_border ~radius:12
                        (mk_line ~width:3 ~color:Draw.(opaque blue) ()))) in
let l = Layout.flat_of_w ~sep:20 ~background:(Layout.style_bg style) [t] in
let house = Layout.flat ~margins:50 [l] in
Bogue.(run (of_layout house));;

text_input2

Thank you. This could be added to the example repo. It will be a lot helpful.

good idea, I'll try to do this