Component reference

SlintForge has 79 public components, all imported from @slintforge. Examples below are generated from examples/api-components in the repository; see the repository API docs for every property and callback.

NOTE Generated by npm run gen:api. Do not edit by hand.

Basic

ForgeIconButton

Source：ui/basic/icon-button.slint

import { ForgeIconButton } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeIconButton API Example";
    width: 800px;
    height: 600px;

    ForgeIconButton {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeCard

Source：ui/basic/card.slint

import { ForgeCard } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeCard API Example";
    width: 800px;
    height: 600px;

    ForgeCard {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeInfoBar

Source：ui/basic/info-bar.slint

import { ForgeInfoBar } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeInfoBar API Example";
    width: 800px;
    height: 600px;

    ForgeInfoBar {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

Navigation

ForgeNavigationView

Source：ui/navigation/navigation-view.slint

import { ForgeNavigationView } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeNavigationView API Example";
    width: 800px;
    height: 600px;

    ForgeNavigationView {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeBreadcrumb

Source：ui/navigation/breadcrumb.slint

import { ForgeBreadcrumb } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeBreadcrumb API Example";
    width: 800px;
    height: 600px;

    ForgeBreadcrumb {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeTabBar

Source：ui/navigation/tab-bar.slint

import { ForgeTabBar } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeTabBar API Example";
    width: 800px;
    height: 600px;

    ForgeTabBar {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgePageHeader

Source：ui/navigation/page-header.slint

import { ForgePageHeader } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgePageHeader API Example";
    width: 800px;
    height: 600px;

    ForgePageHeader {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeSegmentedControl

Source：ui/navigation/segmented-control.slint

import { ForgeSegmentedControl } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeSegmentedControl API Example";
    width: 800px;
    height: 600px;

    ForgeSegmentedControl {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgePagination

Source：ui/navigation/pagination.slint

import { ForgePagination } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgePagination API Example";
    width: 800px;
    height: 600px;

    ForgePagination {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

Layouts

ForgeSplitLayout

Source：ui/layouts/split-layout.slint

import { ForgeSplitLayout } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeSplitLayout API Example";
    width: 800px;
    height: 600px;

    ForgeSplitLayout {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeStaggeredGridView

Source：ui/layouts/staggered-grid-view.slint

import { ForgeStaggeredGridView } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeStaggeredGridView API Example";
    width: 800px;
    height: 600px;

    ForgeStaggeredGridView {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeFlowLayout

Source：ui/layouts/flow-layout.slint

import { ForgeFlowLayout } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeFlowLayout API Example";
    width: 800px;
    height: 600px;

    ForgeFlowLayout {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeAdaptiveGrid

Source：ui/layouts/adaptive-grid.slint

import { ForgeAdaptiveGrid } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeAdaptiveGrid API Example";
    width: 800px;
    height: 600px;

    ForgeAdaptiveGrid {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgePageStack

Source：ui/layouts/page-stack.slint

import { ForgePageStack } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgePageStack API Example";
    width: 800px;
    height: 600px;

    ForgePageStack {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeStackPage

Source：ui/layouts/page-stack.slint

import { ForgeStackPage } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeStackPage API Example";
    width: 800px;
    height: 600px;

    ForgeStackPage {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeFormRow

Source：ui/layouts/form-row.slint

import { ForgeFormRow } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeFormRow API Example";
    width: 800px;
    height: 600px;

    ForgeFormRow {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeDockLayout

Source：ui/layouts/dock-layout.slint

import { ForgeDockLayout } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeDockLayout API Example";
    width: 800px;
    height: 600px;

    ForgeDockLayout {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

Surfaces

ForgePage

Source：ui/surfaces/page.slint; Requires services：ForgeCaptureService

import { ForgePage } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgePage API Example";
    width: 800px;
    height: 600px;

    ForgePage {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeRoundImageView

Source：ui/surfaces/round-image-view.slint

import { ForgeRoundImageView } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeRoundImageView API Example";
    width: 800px;
    height: 600px;

    ForgeRoundImageView {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeIconLabel

Source：ui/surfaces/icon-label.slint

import { ForgeIconLabel } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeIconLabel API Example";
    width: 800px;
    height: 600px;

    ForgeIconLabel {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeExpander

Source：ui/surfaces/expander.slint

import { ForgeExpander } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeExpander API Example";
    width: 800px;
    height: 600px;

    ForgeExpander {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeWatermark

Source：ui/surfaces/watermark.slint

import { ForgeWatermark } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeWatermark API Example";
    width: 800px;
    height: 600px;

    ForgeWatermark {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeMarquee

Source：ui/surfaces/marquee.slint

import { ForgeMarquee } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeMarquee API Example";
    width: 800px;
    height: 600px;

    ForgeMarquee {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

Inputs

ForgePillButton

Source：ui/inputs/action-buttons.slint

import { ForgePillButton } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgePillButton API Example";
    width: 800px;
    height: 600px;

    ForgePillButton {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeDelayButton

Source：ui/inputs/action-buttons.slint

import { ForgeDelayButton } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeDelayButton API Example";
    width: 800px;
    height: 600px;

    ForgeDelayButton {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeDropDownButton

Source：ui/inputs/action-buttons.slint

import { ForgeDropDownButton } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeDropDownButton API Example";
    width: 800px;
    height: 600px;

    ForgeDropDownButton {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeProgressButton

Source：ui/inputs/action-buttons.slint

import { ForgeProgressButton } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeProgressButton API Example";
    width: 800px;
    height: 600px;

    ForgeProgressButton {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeInputValidation

Source：ui/inputs/validation.slint

import { ForgeInputValidation } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeInputValidation API Example";
    width: 800px;
    height: 600px;

    ForgeInputValidation {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeChip

Source：ui/inputs/tags.slint

import { ForgeChip } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeChip API Example";
    width: 800px;
    height: 600px;

    ForgeChip {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeTagInputBox

Source：ui/inputs/tags.slint

import { ForgeTagInputBox } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeTagInputBox API Example";
    width: 800px;
    height: 600px;

    ForgeTagInputBox {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

Forms

ForgeNumberBox

Source：ui/form/number-box.slint

import { ForgeNumberBox } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeNumberBox API Example";
    width: 800px;
    height: 600px;

    ForgeNumberBox {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeAutoSuggestBox

Source：ui/form/auto-suggest.slint; Requires services：ForgeWidgetServices

import { ForgeAutoSuggestBox } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeAutoSuggestBox API Example";
    width: 800px;
    height: 600px;

    ForgeAutoSuggestBox {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeColorPicker

Source：ui/form/color-picker.slint; Requires services：ForgeWidgetServices

import { ForgeColorPicker } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeColorPicker API Example";
    width: 800px;
    height: 600px;

    ForgeColorPicker {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeDatePicker

Source：ui/form/date-picker.slint

import { ForgeDatePicker } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeDatePicker API Example";
    width: 800px;
    height: 600px;

    ForgeDatePicker {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeCalendarPicker

Source：ui/form/date-picker.slint

import { ForgeCalendarPicker } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeCalendarPicker API Example";
    width: 800px;
    height: 600px;

    ForgeCalendarPicker {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeDatePickerPopup

Source：ui/form/date-picker.slint

import { ForgeDatePickerPopup } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeDatePickerPopup API Example";
    width: 800px;
    height: 600px;

    ForgeDatePickerPopup {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeTimePicker

Source：ui/form/time-picker.slint

import { ForgeTimePicker } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeTimePicker API Example";
    width: 800px;
    height: 600px;

    ForgeTimePicker {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeTimePickerPopup

Source：ui/form/time-picker.slint

import { ForgeTimePickerPopup } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeTimePickerPopup API Example";
    width: 800px;
    height: 600px;

    ForgeTimePickerPopup {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeShortcutPicker

Source：ui/form/shortcut-picker.slint

import { ForgeShortcutPicker } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeShortcutPicker API Example";
    width: 800px;
    height: 600px;

    ForgeShortcutPicker {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeMultiSelectComboBox

Source：ui/form/multi-select.slint

import { ForgeMultiSelectComboBox } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeMultiSelectComboBox API Example";
    width: 800px;
    height: 600px;

    ForgeMultiSelectComboBox {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeMultiTreeSelectComboBox

Source：ui/form/multi-select.slint

import { ForgeMultiTreeSelectComboBox } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeMultiTreeSelectComboBox API Example";
    width: 800px;
    height: 600px;

    ForgeMultiTreeSelectComboBox {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

Data

ForgeFileTree

Source：ui/data/file-tree.slint

import { ForgeFileTree } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeFileTree API Example";
    width: 800px;
    height: 600px;

    ForgeFileTree {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeDataGrid

Source：ui/data/data-grid.slint; Requires services：ForgeGridServices

import { ForgeDataGrid } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeDataGrid API Example";
    width: 800px;
    height: 600px;

    ForgeDataGrid {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeTreeDataGrid

Source：ui/data/data-grid.slint; Requires services：ForgeGridServices

import { ForgeTreeDataGrid } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeTreeDataGrid API Example";
    width: 800px;
    height: 600px;

    ForgeTreeDataGrid {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeTimeline

Source：ui/data/timeline.slint

import { ForgeTimeline } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeTimeline API Example";
    width: 800px;
    height: 600px;

    ForgeTimeline {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeStatistic

Source：ui/data/statistic.slint

import { ForgeStatistic } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeStatistic API Example";
    width: 800px;
    height: 600px;

    ForgeStatistic {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeQRCode

Source：ui/data/qrcode.slint; Requires services：ForgeWidgetServices

import { ForgeQRCode } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeQRCode API Example";
    width: 800px;
    height: 600px;

    ForgeQRCode {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

Feedback

ForgeInfoBadge

Source：ui/feedback/info-badge.slint

import { ForgeInfoBadge } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeInfoBadge API Example";
    width: 800px;
    height: 600px;

    ForgeInfoBadge {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeResult

Source：ui/feedback/result.slint

import { ForgeResult } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeResult API Example";
    width: 800px;
    height: 600px;

    ForgeResult {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeRatingControl

Source：ui/feedback/rating.slint

import { ForgeRatingControl } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeRatingControl API Example";
    width: 800px;
    height: 600px;

    ForgeRatingControl {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeShimmer

Source：ui/feedback/shimmer.slint

import { ForgeShimmer } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeShimmer API Example";
    width: 800px;
    height: 600px;

    ForgeShimmer {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeSkeletonView

Source：ui/feedback/shimmer.slint

import { ForgeSkeletonView } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeSkeletonView API Example";
    width: 800px;
    height: 600px;

    ForgeSkeletonView {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

Popups

ForgeContentDialog

Source：ui/popups/content-dialog.slint

import { ForgeContentDialog } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeContentDialog API Example";
    width: 800px;
    height: 600px;

    ForgeContentDialog {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeDrawer

Source：ui/popups/drawer.slint

import { ForgeDrawer } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeDrawer API Example";
    width: 800px;
    height: 600px;

    ForgeDrawer {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

Theme

ForgeAcrylic

Source：ui/theme/backdrop.slint; Requires services：ForgeWidgetServices

import { ForgeAcrylic } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeAcrylic API Example";
    width: 800px;
    height: 600px;

    ForgeAcrylic {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeLiquidGlass

Source：ui/theme/backdrop.slint; Requires services：ForgeWidgetServices

import { ForgeLiquidGlass } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeLiquidGlass API Example";
    width: 800px;
    height: 600px;

    ForgeLiquidGlass {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

Other

ForgeSyntaxView

Source：ui/other/syntax-view.slint; Requires services：ForgeWidgetServices

import { ForgeSyntaxView } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeSyntaxView API Example";
    width: 800px;
    height: 600px;

    ForgeSyntaxView {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeTour

Source：ui/other/tour.slint

import { ForgeTour } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeTour API Example";
    width: 800px;
    height: 600px;

    ForgeTour {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeDial

Source：ui/other/dial.slint

import { ForgeDial } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeDial API Example";
    width: 800px;
    height: 600px;

    ForgeDial {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

Icons

ForgeIcon

Source：ui/icons/icon.slint

import { ForgeIcon } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeIcon API Example";
    width: 800px;
    height: 600px;

    ForgeIcon {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

Window

ForgeWindow

Source：ui/window/forge-window.slint; Requires services：ForgeCaptureService

import { ForgeWindow } from "@slintforge";

export component ApiExample inherits ForgeWindow {
    title: "ForgeWindow API Example";
    width: 800px;
    height: 600px;
}

ForgePlot charts

ForgePlot

Source：ui/charts/plot.slint; Requires services：ForgePlotServices

import { ForgePlot } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgePlot API Example";
    width: 800px;
    height: 600px;

    ForgePlot {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeFlow node editor

ForgeFlow

Source：ui/flow/flow.slint; Requires services：ForgeFlowServices

import { ForgeFlow } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeFlow API Example";
    width: 800px;
    height: 600px;

    ForgeFlow {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeFlowToolButton

Source：ui/flow/theme.slint

import { ForgeFlowToolButton } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeFlowToolButton API Example";
    width: 800px;
    height: 600px;

    ForgeFlowToolButton {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeFlowBackground

Source：ui/flow/background.slint

import { ForgeFlowBackground } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeFlowBackground API Example";
    width: 800px;
    height: 600px;

    ForgeFlowBackground {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeFlowEdge

Source：ui/flow/edge.slint

import { ForgeFlowEdge } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeFlowEdge API Example";
    width: 800px;
    height: 600px;

    ForgeFlowEdge {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeFlowEdgeEditor

Source：ui/flow/edge-editor.slint

import { ForgeFlowEdgeEditor } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeFlowEdgeEditor API Example";
    width: 800px;
    height: 600px;

    ForgeFlowEdgeEditor {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeFlowNodeToolbar

Source：ui/flow/controls.slint

import { ForgeFlowNodeToolbar } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeFlowNodeToolbar API Example";
    width: 800px;
    height: 600px;

    ForgeFlowNodeToolbar {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeFlowCanvas

Source：ui/flow/canvas.slint; Requires services：ForgeFlowServices

import { ForgeFlowCanvas } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeFlowCanvas API Example";
    width: 800px;
    height: 600px;

    ForgeFlowCanvas {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeFlowNode

Source：ui/flow/node.slint

import { ForgeFlowNode } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeFlowNode API Example";
    width: 800px;
    height: 600px;

    ForgeFlowNode {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeFlowPort

Source：ui/flow/node.slint

import { ForgeFlowPort } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeFlowPort API Example";
    width: 800px;
    height: 600px;

    ForgeFlowPort {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeFlowControls

Source：ui/flow/controls.slint

import { ForgeFlowControls } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeFlowControls API Example";
    width: 800px;
    height: 600px;

    ForgeFlowControls {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeFlowMiniMap

Source：ui/flow/controls.slint

import { ForgeFlowMiniMap } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeFlowMiniMap API Example";
    width: 800px;
    height: 600px;

    ForgeFlowMiniMap {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeFlowLayoutControls

Source：ui/flow/layout-controls.slint

import { ForgeFlowLayoutControls } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeFlowLayoutControls API Example";
    width: 800px;
    height: 600px;

    ForgeFlowLayoutControls {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeFlowAlignmentControls

Source：ui/flow/alignment-controls.slint

import { ForgeFlowAlignmentControls } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeFlowAlignmentControls API Example";
    width: 800px;
    height: 600px;

    ForgeFlowAlignmentControls {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeFlowNodePalette

Source：ui/flow/node-palette.slint

import { ForgeFlowNodePalette } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeFlowNodePalette API Example";
    width: 800px;
    height: 600px;

    ForgeFlowNodePalette {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeFlowContextMenu

Source：ui/flow/context-menu.slint

import { ForgeFlowContextMenu } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeFlowContextMenu API Example";
    width: 800px;
    height: 600px;

    ForgeFlowContextMenu {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeFlowNodeProperties

Source：ui/flow/node-properties.slint

import { ForgeFlowNodeProperties } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeFlowNodeProperties API Example";
    width: 800px;
    height: 600px;

    ForgeFlowNodeProperties {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}

ForgeFlowPanel

Source：ui/flow/panel.slint

import { ForgeFlowPanel } from "@slintforge";

export component ApiExample inherits Window {
    title: "ForgeFlowPanel API Example";
    width: 800px;
    height: 600px;

    ForgeFlowPanel {
        x: 32px;
        y: 32px;
        width: parent.width - 64px;
        height: parent.height - 64px;
    }
}