expander
Arrow icon and label that remembers if it has been clicked (expanded).
Use to divide lots of content into expandable sections.
Only valid between Window.beginand Window.end.
Parameters
- src:std.builtin.SourceLocation
- std.builtin.SourceLocation
- label_str:[]const u8
- []const u8
- init_opts:ExpanderOptions
- ExpanderOptions
- opts:Options
- Options
Source
Implementation
pub fn expander(src: std.builtin.SourceLocation, label_str: []const u8, init_opts: ExpanderOptions, opts: Options) bool {
const options = expander_defaults.override(.{ .font = opts.themeGet().font_heading }).override(opts);
var b = box(src, .{ .dir = .horizontal }, options);
defer b.deinit();
dvui.tabIndexSet(b.data().id, b.data().options.tab_index, b.data().rectScale().r);
var expanded_storage: bool = dvui.dataGet(null, b.data().id, "__expand", bool) orelse init_opts.default_expanded;
const expanded = init_opts.expanded orelse &expanded_storage;
var hovered: bool = false;
if (dvui.clicked(b.data(), .{ .hovered = &hovered })) {
expanded.* = !expanded.*;
}
if (b.data().accesskit_node()) |ak_node| {
AccessKit.nodeAddAction(ak_node, AccessKit.Action.focus);
AccessKit.nodeAddAction(ak_node, AccessKit.Action.click);
}
b.drawBackground();
if (b.data().visible() and b.data().id == dvui.focusedWidgetId()) {
b.data().focusBorder();
}
if (expanded.*) {
icon(@src(), "down_arrow", entypo.triangle_down, .{}, .{ .gravity_y = 0.5, .role = .none });
} else {
icon(
@src(),
"right_arrow",
entypo.triangle_right,
.{},
.{ .gravity_y = 0.5, .role = .none },
);
}
labelNoFmt(@src(), label_str, .{}, options.strip().override(.{ .label = .{ .for_id = b.data().id } }));
dvui.dataSet(null, b.data().id, "__expand", expanded.*);
// Accessibility TODO: Support expand and collapse actions, but can;t find a way to get it to work.
return expanded.*;
}