Tuesday, 16 October 2012

Tab panel

It's easy (if you know) creating a tab panel menu, just using style command.
First of all let's see a tab panel button:

This is the source code, I suggest to start with a toggle, but you can use whatever style you like:
view layout [
style tab-p toggle   effect [round] edge [size: 0x0]
tab-p "Hello world"
]



then we must crate a function to turn off the other tab panel buttons (for example a, b ,c d):
tab-p-f:   func [face] [
    list: reduce [a b c d]
    foreach item list [item/state: false ]
    face/state: true
    show face
    foreach item list [show item]
    ]


Now let's put all together, we create 4 layouts and a box where their will be showed. Moreover we put space 0x0, so buttons are side by side and set the initial pane and button:

tab-p-f:   func [face] [
    list: reduce [a b c d]
    foreach item list [item/state: false ]
    face/state: true
    show face
    foreach item list [show item]
    ]
a-lay: layout/tight [text "test1"]
b-lay: layout/tight [text red "test2"]
c-lay: layout/tight [text red bold "test3"]
d-lay: layout/tight [h1 green bold "test4"]
view layout [
across space 0x0
style tab-p toggle reblue gray effect [round] edge [size: 0x0]
a: tab-p "Hello world" true [tab-p-f face   tb-panel/pane: a-lay show tb-panel]
b: tab-p "Hello world2" [tab-p-f face   tb-panel/pane: b-lay show tb-panel]
c: tab-p "Hello world3" [tab-p-f face   tb-panel/pane: c-lay show tb-panel]
d: tab-p "Hello world4" [tab-p-f face tb-panel/pane: d-lay show tb-panel]
return
tb-panel: box 400x100 edge [size: 5x5] with [pane: a-lay]
]


The finale result is:




No comments:

Post a Comment