Group

English

Groupは1つの子コントロールをタイトル付きの枠内に配置します。

表示例

Group on Ubuntu
Ubuntu
Group on Windows
Windows
Group on macOS
macOS

実行例

require "uing"

UIng.init

window = UIng::Window.new("Group Example", 300, 200, margined: true)
window.on_closing do
  UIng.quit
  true
end

group = UIng::Group.new("User Settings", margined: true)

box = UIng::Box.new(:vertical, padded: true)

# Enable notifications checkbox
notifications_checkbox = UIng::Checkbox.new("Enable notifications")
notifications_checkbox.checked = true
box.append(notifications_checkbox)

# Theme selection radio buttons
theme_radio = UIng::RadioButtons.new
theme_radio.append("Light")
theme_radio.append("Dark")
theme_radio.append("Auto")
theme_radio.selected = 0
box.append(theme_radio)

# Save button
save_button = UIng::Button.new("Save Settings")
save_button.on_clicked do
  notifications = notifications_checkbox.checked? ? "enabled" : "disabled"
  theme_options = ["Light", "Dark", "Auto"]
  theme = theme_options[theme_radio.selected || 0]
  window.msg_box("Settings Saved", "Notifications: #{notifications}\nTheme: #{theme}")
end
box.append(save_button)

group.child = box
window.child = group
window.show

UIng.main
UIng.uninit

使い方

Groupが直接持てる子は1つです。複数のコントロールはBox、Form、Gridにまとめてchildに指定します。

Groupの唯一の子としてBoxを配置し、その中にA・Bを並べる。Groupの余白とBoxの間隔は独立する

box = UIng::Box.new(:vertical, padded: true)
box.append(UIng::Checkbox.new("A"))
box.append(UIng::Checkbox.new("B"))
group = UIng::Group.new("Settings", margined: true)
group.child = box

margined: trueは枠と子の間の余白、Boxのpadded: trueは子同士の間隔を設定します。

APIリファレンス · Galleryソース