Skip to content

Widgets

MeowLynxSea edited this page Jun 18, 2026 · 5 revisions

Widgets

A widget is a piece of UI that owns behaviour (virtualisation, focus management, overlay stacking) — not just a styled visual.

  • Component — a stateless XxxProps builder; the caller composes visuals via .apply(div) or .render(cx) for the default look. See Components.
  • Widget — either owns a gpui::Entity<T> (so it has state) or wires multiple components together so the caller writes one expression instead of three.

Shipped

Widget Import
VirtualList / UniformVirtualList yororen_ui::headless::virtual_list::{virtual_list, uniform_virtual_list, VirtualListController, UniformVirtualListController}

Documented on Widget-VirtualList. The gallery renders a 10 000-row virtual list.

Notification host — implement in your app

NotificationCenter and the data types are shipped at yororen_ui::notification::*Notification, NotificationCenter, NotificationId, DismissStrategy, ToastKind. The visual host (the notification stack rendered above all overlays) is not shipped as a public API; implement it in your app.

Working pattern (lifted from gallery_demo/src/notifications_host.rs):

fn render_notification_host(cx: &mut Context<Self>) -> impl IntoElement {
    let items = cx.global::<NotificationCenter>().items();
    let host = div().flex().flex_col().gap(px(8.)).children(items.iter().map(|n| {
        let bg = cx.theme().get_color(&format!("status.{}.bg", n.kind_str())).unwrap_or_default();
        div().bg(bg).p_2().child(n.text.clone())
    }));
    gpui::deferred(host).with_priority(3)
}

Push a notification:

cx.global::<NotificationCenter>().clone().notify(
    Notification::new("Saved")
        .kind(ToastKind::Success)
        .sticky(false)
);

Wrap the host in gpui::deferred(...).with_priority(3) so it paints above modals and popovers.

Notifications with sticky(true) survive window refresh / state restore. Callbacks are not persisted; payload is.

See also

Clone this wiki locally