GPUI Box GitHub

Components / display

Avatar builder

A circular mark for a person or a workspace.

A builder is RenderOnce. Construct and mount it in one expression.

use gpui_kit::display::avatar::Avatar;

Reviewed in avatar.

Construct
new(name: impl Into<SharedString>) -> Self
Options

Chain onto the value.

presence(presence: AvatarPresence) -> Self
id(ident: impl Into<Ident>) -> Self
image(image: impl Into<SharedString>) -> Self
image_source(image: gpui::ImageSource) -> Self
size(size: f32) -> Self
tint(tint: Hsla) -> Self
Example · avatar
fn avatar(_window: &mut Window, cx: &mut App) -> AnyElement {
    let theme = cx.theme().clone();
    stack(&theme)
        .child(caption(&theme, "Derived from the name it was given"))
        .child(
            row(&theme)
                .child(Avatar::new("Ada Lovelace").id("scene.avatar.ada"))
                .child(Avatar::new("Grace Hopper").id("scene.avatar.grace"))
                .child(Avatar::new("Katherine Johnson").id("scene.avatar.katherine")),
        )
        .child(caption(
            &theme,
            "An identity tint the caller owns, and no name at all — which is drawn \
             as its own state rather than as a picture that failed to arrive",
        ))
        .child(
            row(&theme)
                .child(
                    Avatar::new("Grace Hopper")
                        .tint(identity_tint(&theme, "agent.shell"))
                        .id("scene.avatar.tinted"),
                )
                .child(Avatar::new("").id("scene.avatar.anonymous")),
        )
        .child(caption(
            &theme,
            "Presence, which the host knows and the mark does not derive. No dot at \
             all is not the same claim as offline",
        ))
        .child(
            row(&theme)
                .gap(px(theme.space(Space::Md)))
                .child(
                    Avatar::new("Ada Lovelace")
                        .presence(AvatarPresence::Online)
                        .id("scene.avatar.online"),
                )
                .child(
                    Avatar::new("Grace Hopper")
                        .presence(AvatarPresence::Away)
                        .id("scene.avatar.away"),
                )
                .child(
                    Avatar::new("Katherine Johnson")
                        .presence(AvatarPresence::Busy)
                        .id("scene.avatar.busy"),
                )
                .child(
                    Avatar::new("Ada Lovelace")
                        .presence(AvatarPresence::Offline)
                        .id("scene.avatar.offline"),
                ),
        )
        .child(caption(
            &theme,
            "A stack, where each mark is cut out of the one behind it and the \
             remainder is a count the host supplied",
        ))
        .child(
            row(&theme).child(
                AvatarGroup::new()
                    .id("scene.avatar.group")
                    .size(32.0)
                    .members([
                        Avatar::new("Ada Lovelace").presence(AvatarPresence::Online),
                        Avatar::new("Grace Hopper").presence(AvatarPresence::Away),
                        Avatar::new("Katherine Johnson"),
                    ])
                    .overflow("+4"),
            ),
        )
        .child(caption(&theme, "Sizes"))
        .child(
            row(&theme)
                .items_center()
                .gap(px(theme.space(Space::Md)))
                .child(
                    Avatar::new("Ada Lovelace")
                        .size(20.0)
                        .id("scene.avatar.small"),
                )
                .child(Avatar::new("Ada Lovelace").id("scene.avatar.default"))
                .child(
                    Avatar::new("Ada Lovelace")
                        .size(40.0)
                        .id("scene.avatar.medium"),
                )
                .child(
                    Avatar::new("Ada Lovelace")
                        .size(56.0)
                        .id("scene.avatar.large"),
                ),
        )
        .into_any_element()
}

Source: crates/gpui-kit/src/display/avatar.rs