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§

Source§

impl Component for ActionPanel

Source§

impl Component for AgentSetupButton

Source§

impl Component for AiSettingItem

Source§

impl Component for Alert

Source§

impl Component for AlertDialog

Source§

impl Component for AlertModal

Source§

impl Component for AnnouncementToast

Source§

impl Component for AppShell

Source§

impl Component for AspectRatio

Source§

impl Component for Avatar

Source§

impl Component for Badge

Source§

impl Component for Banner

Source§

impl Component for Breadcrumb

Source§

impl Component for Button

Source§

impl Component for ButtonGroup

Source§

impl Component for ButtonLike

Source§

impl Component for CalendarPreview

Source§

impl Component for Callout

Source§

impl Component for Card

Source§

impl Component for CarouselPreview

Source§

impl Component for Chart

Source§

impl Component for Checkbox

Source§

impl Component for Chip

Source§

impl Component for CircularProgress

Source§

impl Component for CollabNotification

Source§

impl Component for Color

Source§

impl Component for Command

Source§

impl Component for ConfiguredApiCard

Source§

impl Component for Container

Source§

impl Component for CopyButton

Source§

impl Component for CountBadge

Source§

impl Component for DatePickerPreview

Source§

impl Component for DecoratedIcon

Source§

impl Component for DescriptionList

Source§

impl Component for DiffStat

Source§

impl Component for Disclosure

Source§

impl Component for Divider

Source§

impl Component for Drawer

Source§

impl Component for DropdownMenu

Source§

impl Component for EmptyState

Source§

impl Component for Facepile

Source§

impl Component for Feed

Source§

impl Component for FileInput

Source§

impl Component for Form

Source§

impl Component for FormField

Source§

impl Component for Headline

Source§

impl Component for HighlightedLabel

Source§

impl Component for HoverCard

Source§

impl Component for Icon

Source§

impl Component for IconButton

Source§

impl Component for Indicator

Source§

impl Component for InputGroup

Source§

impl Component for InputOtp

Source§

impl Component for Item

Source§

impl Component for Kbd

Source§

impl Component for KeyBinding

Source§

impl Component for KeybindingHint

Source§

impl Component for Label

Source§

impl Component for LabelLike

Source§

impl Component for List

Source§

impl Component for ListBulletItem

Source§

impl Component for ListHeader

Source§

impl Component for ListItem

Source§

impl Component for ListSubHeader

Source§

impl Component for MediaObject

Source§

impl Component for Menubar

Source§

impl Component for Modal

Source§

impl Component for Navbar

Source§

impl Component for NavigationMenuPreview

Source§

impl Component for PageHeading

Source§

impl Component for Pagination

Source§

impl Component for PaneGroupPreview

Source§

impl Component for Popover

Source§

impl Component for ProgressBar

Source§

impl Component for RadioButton

Source§

impl Component for ResizablePreview

Source§

impl Component for SectionHeading

Source§

impl Component for SegmentedControl

Source§

impl Component for Sidebar

Source§

impl Component for Skeleton

Source§

impl Component for Slider

Source§

impl Component for SonnerStackPreview

Source§

impl Component for Spinner

Source§

impl Component for SpinnerLabel

Source§

impl Component for StatsCard

Source§

impl Component for Stepper

Source§

impl Component for Switch

Source§

impl Component for SwitchField

Source§

impl Component for Tab

Source§

impl Component for TabBar

Source§

impl Component for ui::Table

Source§

impl Component for ui::LayoutTable

Source§

impl Component for ThreadItem

Source§

impl Component for TitleBar

Source§

impl Component for ToastStack

Source§

impl Component for ToggleGroup

Source§

impl Component for Tooltip

Source§

impl Component for TreeViewItem

Source§

impl Component for UpdateButton

Source§

impl Component for Vector

Source§

impl Component for VerticalNav

Source§

impl<T: ButtonBuilder, const COLS: usize, const ROWS: usize> Component for ToggleButtonGroup<T, COLS, ROWS>