ComponentContainer

ComponentContainer is a built-in element that embeds a component chosen at runtime. The component to embed is supplied from Rust code as a ComponentFactory and bound to the container’s component-factory property. This is useful for loading .slint files dynamically through the interpreter, or for plugging in different components based on application state.

Note: ComponentContainer is experimental and subject to change. It is currently only available from Rust. Tracking issue: slint-ui/slint#2390 ↗.

Properties

component-factory

component-factory default: <???>

The factory that produces the embedded component. Assign it from Rust code with a slint::ComponentFactory. Changing this property replaces the embedded component.

has-component

bool default: false

Output property. Set to true while an embedded component is present, and false otherwise. Use it to show a placeholder when no component has been loaded.

The container also has the usual width and height properties. The embedded component is placed at (0, 0) inside the container and its size constraints propagate to the container’s layout info.

Example

A minimal .slint file that exposes the factory as a property of the root component:

export component MainWindow inherits Window {
    in property <component-factory> plugin <=> container.component-factory;

    VerticalLayout {
        Text { text: container.has-component ? "Plugin loaded" : "No plugin"; }
        container := ComponentContainer {
            width: 300px;
            height: 200px;
        }
    }
}

slint

The Rust side creates a ComponentFactory that compiles a .slint source at runtime with the interpreter and sets it on the plugin property:

use slint::ComponentFactory;
use slint_interpreter::Compiler;

slint::include_modules!();

fn main() -> Result<(), slint::PlatformError> {
    let main_window = MainWindow::new()?;

    let factory = ComponentFactory::new(|ctx| {
        let compiler = Compiler::new();
        let result = spin_on::spin_on(compiler.build_from_source(
            r#"
                export component Plugin inherits Rectangle {
                    background: #3070ff;
                    Text { text: "Hello from plugin"; color: white; }
                }
            "#.into(),
            Default::default(),
        ));
        let definition = result.component("Plugin")?;
        definition.create_embedded(ctx).ok()
    });

    main_window.set_plugin(factory);
    main_window.run()
}

rust,no_run

The closure passed to ComponentFactory::new receives a FactoryContext that you forward to create_embedded. The embedded instance is rebuilt whenever the container needs it.

Statically compiled components can also be embedded: call ComponentHandle::new() inside the closure and return the handle instead of going through the interpreter.