Skip to main content

Component

Trait Component 

Source
pub trait Component {
    // Provided methods
    fn id() -> ComponentId { ... }
    fn scope() -> ComponentScope { ... }
    fn status() -> ComponentStatus { ... }
    fn name() -> &'static str { ... }
    fn sort_name() -> &'static str { ... }
    fn description() -> Option<&'static str> { ... }
    fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> { ... }
}
Expand description

Implement this trait to define a UI component. This will allow you to derive RegisterComponent on it, in turn allowing you to preview the contents of the preview fn in workspace: open component preview.

This can be useful for visual debugging and testing, documenting UI patterns, or simply showing all the variants of a component.

Generally you will want to implement at least scope and preview from this trait, so you can preview the component, and it will show up in a section that makes sense.

Provided Methods§

Source

fn id() -> ComponentId

The component’s unique identifier.

Used to access previews, or state for more complex, stateful components.

Source

fn scope() -> ComponentScope

Returns the scope of the component.

This scope is used to determine how components and their previews are displayed and organized.

Source

fn status() -> ComponentStatus

The ready status of this component.

Use this to mark when components are:

  • WorkInProgress: Still being designed or are partially implemented.
  • EngineeringReady: Ready to be implemented.
  • Deprecated: No longer recommended for use.

Defaults to Live.

Source

fn name() -> &'static str

The name of the component.

This name is used to identify the component and is usually derived from the component’s type.

Source

fn sort_name() -> &'static str

Returns a name that the component should be sorted by.

Implement this if the component should be sorted in an alternate order than its name.

Example:

For example, to group related components together when sorted:

  • Button -> ButtonA
  • IconButton -> ButtonBIcon
  • ToggleButton -> ButtonCToggle

This naming scheme keeps these components together and allows them to /// be sorted in a logical order.

Source

fn description() -> Option<&'static str>

An optional description of the component.

This will be displayed in the component’s preview. To show a component’s doc comment as it’s description, derive Documented.

Example:

use documented::Documented;

/// This is a doc comment.
#[derive(Documented)]
struct MyComponent;

impl MyComponent {
    fn description() -> Option<&'static str> {
        Some(Self::DOCS)
    }
}

This will result in “This is a doc comment.” being passed to the component’s description.

Source

fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement>

The component’s preview.

An element returned here will be shown in the component’s preview.

Useful component helpers:

  • [component::single_example]
  • [component::component_group]
  • [component::component_group_with_title]

Note: Any arbitrary element can be returned here.

This is useful for displaying related UI to the component you are trying to preview, such as a button that opens a modal or shows a tooltip on hover, or a grid of icons showcasing all the icons available.

Dyn Compatibility§

This trait is not dyn compatible.

In older versions of Rust, dyn compatibility was called "object safety".

Implementors§