DVUI

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.*;
}