Trait ui2::StyledExt

pub trait StyledExt: Styled + Sized {
    // Provided methods
    fn h_flex(self) -> Self { ... }
    fn v_flex(self) -> Self { ... }
    fn text_ui_size(self, size: UITextSize) -> Self { ... }
    fn text_ui(self) -> Self { ... }
    fn text_ui_sm(self) -> Self { ... }
    fn elevation_1(self, cx: &mut WindowContext<'_>) -> Self { ... }
    fn elevation_2(self, cx: &mut WindowContext<'_>) -> Self { ... }
    fn elevation_3(self, cx: &mut WindowContext<'_>) -> Self { ... }
}

Extends Styled with Zed specific styling methods.

Provided Methods

fn h_flex(self) -> Self

Horizontally stacks elements.

Sets flex(), flex_row(), items_center()

fn v_flex(self) -> Self

Vertically stacks elements.

Sets flex(), flex_col()

fn text_ui_size(self, size: UITextSize) -> Self

fn text_ui(self) -> Self

The default size for UI text.

0.825rem or 14px at the default scale of 1rem = 16px.

Note: The absolute size of this text will change based on a user’s ui_scale setting.

Use [text_ui_sm] for regular-sized text.

fn text_ui_sm(self) -> Self

The small size for UI text.

0.75rem or 12px at the default scale of 1rem = 16px.

Note: The absolute size of this text will change based on a user’s ui_scale setting.

Use [text_ui] for regular-sized text.

fn elevation_1(self, cx: &mut WindowContext<'_>) -> Self

The Surface elevation level, located above the app background, is the standard level for all elements

Sets bg(), rounded_lg(), border(), border_color(), shadow()

Example Elements: Title Bar, Panel, Tab Bar, Editor

fn elevation_2(self, cx: &mut WindowContext<'_>) -> Self

Non-Modal Elevated Surfaces appear above the Surface layer and is used for things that should appear above most UI elements like an editor or panel, but not elements like popovers, context menus, modals, etc.

Sets bg(), rounded_lg(), border(), border_color(), shadow()

Examples: Notifications, Palettes, Detached/Floating Windows, Detached/Floating Panels

fn elevation_3(self, cx: &mut WindowContext<'_>) -> Self

Modal Surfaces are used for elements that should appear above all other UI elements and are located above the wash layer. This is the maximum elevation at which UI elements can be rendered in their default state.

Elements rendered at this layer should have an enforced behavior: Any interaction outside of the modal will either dismiss the modal or prompt an action (Save your progress, etc) then dismiss the modal.

If the element does not have this behavior, it should be rendered at the Elevated Surface layer.

Sets bg(), rounded_lg(), border(), border_color(), shadow()

Examples: Settings Modal, Channel Management, Wizards/Setup UI, Dialogs

Implementors

impl<E: Styled> StyledExt for E