{TabContainer
{TabPane
{text font-size = 28pt, 1}
},
{TabPane
{text font-size = 28pt, 2}
},
{TabPane
{text font-size = 28pt, 3}
}
}
| 要約： |
|
| 例: 簡単な TabContainer | |
| |
{TabContainer
{TabPane
{text font-size = 28pt, 1}
},
{TabPane
{text font-size = 28pt, 2}
},
{TabPane
{text font-size = 28pt, 3}
}
}
|
| 例: タブ配置 | |
 | |
{TabContainer
tab-placement = "right",
{TabPane
label = "1",
{text font-size = 28pt, 1}
},
{TabPane
label = "2",
{text font-size = 28pt, 2}
},
{TabPane
label = "3",
{text font-size = 28pt, 3}
},
{on CurrentPaneChanged at tc:TabContainer do
{switch tc.tab-placement
case TabPlacement.right do
set tc.tab-placement = "bottom"
case TabPlacement.bottom do
set tc.tab-placement = "left"
case TabPlacement.left do
set tc.tab-placement = "top"
else
set tc.tab-placement = "right"
}
}
}
|
| 例: TabPane オプション | |
 | |
{TabContainer
{TabPane
label = "1",
tab-button-tooltip = "first tab",
{TextFlowBox font-size = 28pt, "1"}
},
{TabPane
label = "2",
tab-button-tooltip = "second tab",
show? = true,
{TextFlowBox font-size = 28pt, "2"}
},
{TabPane
label = "3",
tab-button-tooltip = "third tab",
{TextFlowBox font-size = 28pt, "3"}
}
}
|
| 例: 新規または復帰ユーザー | |
 | |
{let new-user:TabPane =
{TabPane
label = "New User",
{Table
{row-prototype
{cell-prototype
colspan = 2,
{TextFlowBox
font-size = 10pt,
font-weight = "bold",
"Sign up now!!!!!!"
}
}
},
{row-prototype
{TextFlowBox
text-breakable? = false,
paragraph-justify = "right",
"user name: "
},
{TextField }
},
{row-prototype
{TextFlowBox
text-breakable? = false,
"email address: "
},
{TextField}
},
{row-prototype
{TextFlowBox
text-breakable? = false,
"password: "
},
{PasswordField}
},
{row-prototype
{Fill
width = 76pt
},
{Fill
width = 150pt
}
}
}
}
}
{let returning-user:TabPane =
{TabPane
label = "Returning User",
{Table
{row-prototype
{cell-prototype
colspan = 2,
{TextFlowBox
font-size = 10pt,
font-weight = "bold",
"Enter your name and password."
}
}
},
{row-prototype
{TextFlowBox
"user name: "
},
{TextField}
},
{row-prototype
{bind halign to ""},
{TextFlowBox
"password: "
},
{PasswordField}
},
{row-prototype
{Fill
width = 76pt
},
{Fill
width = 150pt
}
}
}
}
}
{let tc:TabContainer =
{TabContainer
tab-placement = "top",
new-user,
returning-user
}
}
{let rf:RadioFrame =
{RadioFrame
{VBox
{RadioButton label = "New User", radio-value = 1},
{RadioButton label = "Returning User", radio-value = 2}
}
}
}
{let v:View = {View tc}}
{VBox
rf,
{CommandButton
label = "Login now.",
{on Action do
{if rf.value == 1 then
set tc.current-pane = new-user
{if v.destroyed? then set v = {View tc}}
{v.show}
elseif rf.value == 2 then
set tc.current-pane = returning-user
{if v.destroyed? then set v = {View tc}}
{v.show}
else
{popup-message
"Tell us about yourself!"
}
}
}
}
}
|
| 例: タブ ペインの追加と削除 | |
 | |
{let tc:TabContainer =
{TabContainer
background ="#ece9d8",
tab-style = "compress",
tab-placement = "bottom",
close-button-proc = remove-it
}
}
{define-proc {remove-it tc:TabContainer}:void
{tc.remove-pane-at-index
tc.current-pane-index
}
}
{for i:int = 1 to 10 do
{tc.add-pane
{TabPane
label = "Pane # " & i,
{Table
{row-prototype
{TextFlowBox
"This is pane # " & i
},
{TextField}
}
}
}
}
}
{value tc}
|
| 例: show-next による現行ペインの変更 | |
 | |
{let tc:TabContainer =
{TabContainer}
}
{for i:int = 1 to 10 do
{tc.add-pane
{TabPane
label = "Pane # " & i,
{Table
{row-prototype
{TextFlowBox
"This is pane # " & i
},
{CommandButton
label = "Next Pane",
{on Action do
{tc.show-next cycle? = true}
}
}
}
}
}
}
}
{value tc}
|
| 例: タブの非表示 | |
 | |
{let rule-1:Rule =
{Rule
color = "transparent"
}
}
{let ratio-button-pane:TabPane =
{TabPane
{VBox
{RadioFrame
{on ValueChanged at rf:RadioFrame do
set rule-1.color = rf.value
},
{VBox
{RadioButton
label = "red",
radio-value = "red"
},
{RadioButton
label = "blue",
radio-value = "blue"
},
{RadioButton
label = "white",
radio-value = "white"
}
}
}
}
}
}
{let color-dropdown-pane:TabPane =
{TabPane
{ColorDropdown
color-array = {StringArray "red", "blue", "white"},
{on ValueFinished at cdd:ColorDropdown do
set rule-1.color = cdd.value
}
}
}
}
{let combo-box-pane:TabPane =
{TabPane
{VBox
"Choose or Enter a Color: ",
{ComboBox
"red",
"blue",
"white",
value = "white",
{on ValueFinished at cb:ComboBox do
set rule-1.color = cb.value
}
}
}
}
}
{let tc:TabContainer =
{TabContainer
tab-style = "hide",
ratio-button-pane,
color-dropdown-pane,
combo-box-pane
}
}
{HBox
valign = "center",
background = "#eeeeee",
{VBox
{CommandButton
label = "Radio Buttons",
width = {add-stretch},
{on Action do
{tc.show-pane ratio-button-pane}
}
},
{CommandButton
label = "Color Dropdown",
width = {add-stretch},
{on Action do
{tc.show-pane color-dropdown-pane}
}
},
{CommandButton
label = "Combo Box",
width = {add-stretch},
{on Action do
{tc.show-pane combo-box-pane}
}
}
},
{VBox
border-width = 1px,
tc,
rule-1
}
}
|
| 例: A simple TabAccordion | |
 | |
{let rule-1:Rule =
{Rule
height = 1cm,
width = {make-elastic},
color = "transparent"
}
}
{let ratio-button-pane:TabPane =
{TabPane
{VBox
{RadioFrame
{on ValueChanged at rf:RadioFrame do
set rule-1.color = rf.value asa String
},
{VBox
{RadioButton
label = "red",
radio-value = "red"
},
{RadioButton
label = "blue",
radio-value = "blue"
},
{RadioButton
label = "white",
radio-value = "white"
}
}
}
}
}
}
{let color-dropdown-pane:TabPane =
{TabPane
{ColorDropdown
color-array = {StringArray "red", "blue", "white"},
{on ValueFinished at cdd:ColorDropdown do
set rule-1.color = cdd.value asa String
}
}
}
}
{let combo-box-pane:TabPane =
{TabPane
{VBox
"Choose or Enter a Color: ",
{ComboBox
"red",
"blue",
"white",
value = "white",
{on ValueFinished at cb:ComboBox do
set rule-1.color = cb.value
}
}
}
}
}
{let ta:TabAccordion =
{TabAccordion
||-- animate? = false,
||-- tab-orientation = "horizontal",
ratio-button-pane,
color-dropdown-pane,
combo-box-pane
}
}
{HBox
valign = "center",
background = "#eeeeee",
{VBox
border-width = 1px,
border-color = "black",
ta,
rule-1
}
}
|
| 例: A simple MultiTabAccordion | |
 | |
{MultiTabAccordion
tab-orientation = "horizontal",
{TabPane
label = "- 1 -",
tab-button-tooltip = "first tab",
{TextFlowBox font-size = 28pt, "1"}
},
{TabPane
label = "- 2 -",
tab-button-tooltip = "second tab",
{TextFlowBox font-size = 28pt, "2"}
},
{TabPane
label = "- 3 -",
tab-button-tooltip = "third tab",
{TextFlowBox font-size = 28pt, "3"}
}
}
|