Tables

[Martinix75]

Excuse me, but today I don't have much work ...
I was also watching the layout "tables" seem very powerful, but very difficut, in any case where are they defined?
for example..

gridCols 1'fr 1'fr 1'fr
gridRows 1'fr 1'fr 1'fr

and for example..

justifyItems CXStrech # <-- cxstreac?????

So I can understand what is implemented (and that names have) the things of "css grid" (which I am reading the documentation, and is really complex at least to the first attempt).
Thanks again and sorry from Martin A.

I am trying to understand the philosophy of use !!
P.S. I believe that many examples on the GIT page are to be reviewed because it seems to me do not work correctly !!)

[Martinix75]

220 / 5.000
All right! Last question ... then I'm going home !!
Do you think you can create a widget with a table, where inside that for example a rectangle, with a table (autonomous)?
I tried like this, but obviously it doesn't work:

import figuro
import figuro/widgets/button
import cssgrid/prettyprints

let typeface = defaultTypeface()
let font = Uifont(typefaceId: typeface, size:18)
type
  Main* = ref object of Figuro
proc initialize*(self: Main) {.slot.} =
  self.setTitle("Test 123 init ")
  
proc draw*(self: Main) {.slot.} =
  #self.setTitle("Test 123 draw")
  withWidget(self):
    this.setName "pippo"
    Rectangle.new "main":
      offset 0'ux, 0'ux
      size 100'pp, 100'pp
      gridCols 1'fr 1'fr
      gridRows 1'fr 1'fr
      clipContent true
      justifyItems CxCenter
      alignItems CxCenter
      fill css"#656C6C"
      Button.new "b1":
        with this:
          size 40'pp, 30'pp
          gridCol 1
          gridrow 1
          border 2'ui, css"#BDB7B7"
          fill css"#1C1F1F"
        Text.new "tx1":
          size 100'pp, 100'pp
          justify Center
          align Middle
          foreground css"#E8F5F5" #blackColor
          text({font: "Test"})
      this.setName "fin"
      Rectangle.new "r1":
       # with this.setName "fin":
          gridCol 1
          gridrow 2
          size 40'pp, 40'pp
          fill css"#FF00AA"
          gridCols 1'fr 1'fr 1'fr #--> 2 table
          gridRows 1'fr 1'fr 1'fr 
          clipContent false
          justifyItems CxCenter
          alignItems CxCenter
          Text.new "tg1":
            gridCol 2
            gridrow 2
            size 100'pp, 100'pp
            justify Center
            align Middle
            foreground css"#E8F5F5" #blackColor
            text({font: "X"})
      Rectangle.new "led1":
       # with this:
          gridCol 2
          gridrow 2
          size 50'ux, 50'ux
          cornerRadius 50'ui
          fill css"#AA0000"
          border 3'ui, css"#BDB7B7"
          justifyItems CxCenter #CXStretch
          

var main = Main.new()
var frame = newAppFrame(main, size=(700'ui, 240'ui))
startFiguro(frame)

Yes a little "qt" style but I'm used to that idea and maybe I'm wrong.
In your opinion, how can you do it, if you can do!
Now I run home seriously.
bye by Martin A.