1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
package com.example
import pl.treksoft.kvision.core.Background
import pl.treksoft.kvision.core.COLOR
import pl.treksoft.kvision.core.Container
import pl.treksoft.kvision.dropdown.DropDown
import pl.treksoft.kvision.html.TAG
import pl.treksoft.kvision.html.Tag
import pl.treksoft.kvision.panel.DIRECTION
import pl.treksoft.kvision.panel.SimplePanel
import pl.treksoft.kvision.panel.SplitPanel
import pl.treksoft.kvision.panel.StackPanel
import pl.treksoft.kvision.panel.TabPanel
import pl.treksoft.kvision.panel.VPanel
import pl.treksoft.kvision.utils.px
class ContainersTab : SimplePanel() {
init {
this.marginTop = 10.px()
val panel = VPanel(spacing = 5)
addStackPanel(panel)
addTabPanel(panel)
addVerticalSplitPanel(panel)
addHorizontalSplitPanel(panel)
this.add(panel)
}
private fun addStackPanel(panel: Container) {
panel.add(Tag(TAG.H4, "Stack panel"))
val stack = StackPanel()
stack.add(Tag(TAG.DIV, " ", rich = true).apply {
background = Background(COLOR.BLUE)
height = 40.px()
}, "/containers/blue")
stack.add(Tag(TAG.DIV, " ", rich = true).apply {
background = Background(COLOR.GREEN)
height = 40.px()
}, "/containers/green")
panel.add(stack)
val ldd = DropDown(
"Activate panel from the stack", listOf(
"Blue panel" to "#!/containers/blue",
"Green panel" to "#!/containers/green"
)
)
panel.add(ldd)
}
private fun addTabPanel(panel: Container) {
panel.add(Tag(TAG.H4, "Tab panel"))
val tabs = TabPanel()
tabs.addTab("Blue panel", Tag(TAG.DIV, " ", rich = true).apply {
background = Background(COLOR.BLUE)
height = 40.px()
})
tabs.addTab("Green panel", Tag(TAG.DIV, " ", rich = true).apply {
background = Background(COLOR.GREEN)
height = 40.px()
})
panel.add(tabs)
}
private fun addVerticalSplitPanel(panel: Container) {
panel.add(Tag(TAG.H4, "Vertical split panel"))
val split = SplitPanel()
split.add(Tag(TAG.DIV, " ", rich = true).apply {
background = Background(COLOR.BLUE)
height = 200.px()
})
split.add(Tag(TAG.DIV, " ", rich = true).apply {
background = Background(COLOR.GREEN)
height = 200.px()
})
panel.add(split)
}
private fun addHorizontalSplitPanel(panel: Container) {
panel.add(Tag(TAG.H4, "Horizontal split panel"))
val split = SplitPanel(direction = DIRECTION.HORIZONTAL).apply { height = 220.px() }
split.add(Tag(TAG.DIV, " ", rich = true).apply {
background = Background(COLOR.BLUE)
height = 100.px()
})
split.add(Tag(TAG.DIV, " ", rich = true).apply {
background = Background(COLOR.GREEN)
height = 100.px()
})
panel.add(split)
}
}
|
