Slint Material Components

https://material.slint.dev/
Admin
Slint Material Components is a production-grade UI toolkit combining Slint with Material Design 3...
Tokens:23,388
Snippets:300
Trust Score:9.5
Update:9 months ago
Show doc for...
Tokens:
Raw
### ActionChip Component Example

Source: https://material.slint.dev/components/chips/action_chip

This example demonstrates how to use the ActionChip component in Slint. It showcases basic configuration including text, an icon, and dimensions. Ensure the '@material' package is installed and the icon path is correct.

```slint
import { ActionChip } from "@material";
export component Example inherits Window {
    width: 200px;
    height: 100px;
    background: transparent;
    ActionChip {
        text: "Action";
        icon: @image-url("../icons/add.svg");
        width: 100px;
        height: 32px;
    }
}
```

--------------------------------

### Slint OutlineButton Example

Source: https://material.slint.dev/components/buttons/outline_button

A basic example demonstrating the usage of the OutlineButton component in Slint. It shows how to import and instantiate the button with text.

```slint
import { OutlineButton } from "@material";
export component Example inherits Window {
    width: 200px;
    height: 100px;
    background: transparent;
    OutlineButton {
        text: "Click me";
        width: 120px;
        height: 40px;
    }
}
```

--------------------------------

### Slint FilterChip Example

Source: https://material.slint.dev/components/chips/filter_chip

Demonstrates how to use the FilterChip component in Slint. It shows basic setup with text, an icon, and dimensions. The FilterChip is designed for filtering content and can be toggled.

```slint
import { FilterChip } from "@material";
export component Example inherits Window {
    width: 200px;
    height: 100px;
    background: transparent;
    FilterChip {
        text: "Filter";
        icon: @image-url("../icons/filter.svg");
        width: 100px;
        height: 32px;
    }
}

```

--------------------------------

### Slint BottomAppBar Example

Source: https://material.slint.dev/components/appbars/bottom_app_bar

A basic Slint example demonstrating the usage of the BottomAppBar component. It includes configuring icon buttons and a floating action button. This code requires the '@material' package.

```slint
import { BottomAppBar } from "@material";
export component Example inherits Window {
    width: 400px;
    height: 200px;
    background: transparent;
    BottomAppBar {
        width: parent.width;
        height: 80px;
        icon-buttons: [
            { icon: @image-url("../icons/share.svg"), tooltip: "Home", enabled: true },
            { icon: @image-url("../icons/search.svg"), tooltip: "Search", enabled: true }
        ];
        fab-icon: @image-url("../icons/add.svg");
    }
}
```

--------------------------------

### Slint SearchBar Example

Source: https://material.slint.dev/components/appbars/search_bar

This example demonstrates how to use the SearchBar component in a Slint application. It shows the basic import and instantiation of the SearchBar within a window, setting a placeholder text and dimensions.

```slint
import { SearchBar } from "@material";
export component Example inherits Window {
    width: 300px;
    height: 100px;
    background: transparent;
    SearchBar {
        placeholder-text: "Search...";
        width: 280px;
        height: 56px;
    }
}
```

--------------------------------

### Slint ModalNavigationDrawer Example

Source: https://material.slint.dev/components/navigation/modal_navigation_drawer

An example demonstrating the usage of Slint's ModalNavigationDrawer and FilledButton components. It shows how to instantiate the drawer, define its groups and items, and trigger its display using a button.

```javascript
import { ModalNavigationDrawer, FilledButton } from "@material";
export component Example inherits Window {
    width: 400px;
    height: 300px;
    background: transparent;
    show_navigation_drawer := FilledButton {
        text: @tr("Open Navigation Drawer");

        clicked => {
            navigation_drawer.show();
        }
    }
    navigation_drawer := ModalNavigationDrawer {
        width: 280px;
        height: parent.height;
        groups: [
            {
                title: "Main",
                items: [
                    { icon: @image-url("../icons/share.svg"), text: "Home" },
                    { icon: @image-url("../icons/search.svg"), text: "Search" }
                ]
            }
        ];
    }
}
```

--------------------------------

### Slint TextButton Example

Source: https://material.slint.dev/components/buttons/text_button

An example of how to use the TextButton component in a Slint application. This code demonstrates the basic structure for creating a window and embedding a TextButton within it.

```slint
import { TextButton } from "@material";
export component Example inherits Window {
    width: 200px;
    height: 100px;
    background: transparent;
    TextButton {
        text: "Click me";
        width: 120px;
        height: 40px;
    }
}
```

--------------------------------

### Slint TextField Example

Source: https://material.slint.dev/components/text_field

A basic example demonstrating the usage of the TextField component within a Slint application. It showcases how to import and instantiate the TextField with basic properties like label and placeholder text.

```slint
import { TextField, Vertical } from "@material";
export component Example inherits Window {
    width: 200px;
    height: 100px;


    Vertical {
        TextField {
            label: "Name";
            placeholder-text: "Enter your name";
        }
    }
}
```

--------------------------------

### Configure Material Library Paths in JavaScript

Source: https://material.slint.dev/getting-started

This JavaScript example shows how to configure Slint's Material library paths when loading a UI file. It uses `loadFile` and provides a `libraryPaths` object with the 'material' key pointing to the `material.slint` file.

```javascript
let ui = slint.loadFile("ui/main.slint", {
    libraryPaths: {
        "material": path.join(path.dirname(fileURLToPath(import.meta.url)), "..", "material-1.0", "material.slint")
    }
});
```

--------------------------------

### Basic ScrollView Implementation in Slint

Source: https://material.slint.dev/components/scroll_view

Demonstrates how to import and use the ScrollView component within a Slint application. This example shows a basic setup for a ScrollView with default properties.

```slint
import { ScrollView } from "@material";
export component Example inherits Window {
    width: 300px;
    height: 200px;
    background: transparent;
    ScrollView {
        width: 280px;
        height: 180px;
    }
}
```

--------------------------------

### Slint NavigationRail Example

Source: https://material.slint.dev/components/navigation/navigation_rail

A basic example demonstrating how to use the NavigationRail component in Slint. This snippet showcases the import statement and the basic structure for defining a NavigationRail with items.

```slint
import { NavigationRail } from "@material";
export component Example inherits Window {
    width: 400px;
    height: 300px;
    background: transparent;
    NavigationRail {
        width: 80px;
        height: parent.height;
        items: [
            { icon: @image-url("../icons/share.svg"), text: "Home" },
            { icon: @image-url("../icons/search.svg"), text: "Search" }
        ];
    }
}
```

--------------------------------

### RadioButtonTile Example in Slint

Source: https://material.slint.dev/components/radiobutton/radio_button_tile

An example demonstrating the usage of RadioButtonTile component within a Vertical layout in Slint. It shows how to manage the selected state and handle click events.

```slint
import { RadioButtonTile, Vertical } from "@material";
export component Example inherits Window {
    width: 140px;
    height: 300px;
    background: transparent;


    property <int> selected-index: 0;


    Vertical {
        RadioButtonTile {
            text: "Option 1";
            checked: selected-index == 0;


            radio_button_clicked => {
                selected-index = 0;
            }
        }


        RadioButtonTile {
            text: "Option 2";
            checked: selected-index == 1;


            radio-button-clicked => {
                selected-index = 1;
            }
        }
    }
}
```

--------------------------------

### Slint RadioButton Example

Source: https://material.slint.dev/components/radiobutton/radio_button

This example demonstrates how to use the RadioButton component in Slint. It imports the RadioButton from '@material' and defines a simple example component that includes a checked RadioButton. The component inherits from Window and has defined width, height, and background properties.

```typescript
import { RadioButton } from "@material";
export component Example inherits Window {
    width: 200px;
    height: 100px;
    background: transparent;
    RadioButton {
        checked: true;
    }
}
```

--------------------------------

### Slint ElevatedCard Component Example

Source: https://material.slint.dev/components/cards/elevated_card

This example demonstrates how to use the ElevatedCard component in a Slint application. It shows the basic structure for importing and rendering an ElevatedCard with specified dimensions and interactivity.

```slint
import { ElevatedCard } from "@material";
export component Example inherits Window {
    width: 300px;
    height: 200px;
    background: transparent;
    ElevatedCard {
        width: 200px;
        height: 150px;
        clickable: true;
    }
}
```

--------------------------------

### Slint InputChip Example

Source: https://material.slint.dev/components/chips/input_chip

This Slint code demonstrates the basic usage of an InputChip component, showcasing how to set its text, leading icon, and trailing icon within a Slint window.

```slint
import {
    InputChip
} from "@material";

export component Example inherits Window {
    width: 200px;
    height: 100px;
    background: transparent;

    InputChip {
        text: "Input";
        leading-icon: @image-url("../icons/edit.svg");
        trailing-icon: @image-url("../icons/close.svg");
        width: 120px;
        height: 32px;
    }
}
```

--------------------------------

### Slint Component Example: MediumAppBar Usage

Source: https://material.slint.dev/components/appbars/medium_app_bar

This Slint component demonstrates how to use the MediumAppBar. It sets up a window and includes the MediumAppBar with a title. Ensure the '@material' module is correctly imported.

```slint
import { MediumAppBar } from "@material";
export component Example inherits Window {
    width: 400px;
    height: 200px;
    background: transparent;
    MediumAppBar {
        title: "My App";
        width: parent.width;
        height: parent.height;
    }
}
```

--------------------------------

### Example Usage of CheckBoxTile Component

Source: https://material.slint.dev/components/checkboxes/check_box_tile

Demonstrates how to use the CheckBoxTile component in Slint, including its import and basic configuration with text and check state.

```slint
import { CheckBoxTile, CheckState } from "@material";
export component Example inherits Window {
    width: 140px;
    height: 100px;
    background: transparent;
    CheckBoxTile {
        text: "Option 1";
        check-state: CheckState.checked;
    }
}
```

--------------------------------

### Slint AppBar Example

Source: https://material.slint.dev/components/appbars/app_bar

A basic example demonstrating the usage of the Slint AppBar component within a Slint Window. This code defines a window with an AppBar, setting its title and occupying the full width and height of the parent container.

```slint
import { AppBar } from "@material";
export component Example inherits Window {
    width: 400px;
    height: 200px;
    background: transparent;
    AppBar {
        title: "My App";
        width: parent.width;
        height: parent.height;
    }
}
```

--------------------------------

### Slint Badge Component Example

Source: https://material.slint.dev/components/badges/badge

Demonstrates how to import and use the Badge component in Slint. The example shows a Badge with text '3' positioned within a basic window. It requires the '@material' library.

```slint
import { Badge } from "@material";
export component Example inherits Window {
    width: 100px;
    height: 50px;
    background: transparent;
    Badge {
        text: "3";
        x: 10px;
        y: 10px;
    }
}
```

--------------------------------

### Slint SmallAppBar Usage Example

Source: https://material.slint.dev/components/appbars/small_app_bar

This example demonstrates how to import and use the SmallAppBar component in a Slint application. It sets the app title and configures the app bar to occupy the full width and height of its parent.

```slint
import { SmallAppBar } from "@material";
export component Example inherits Window {
    width: 400px;
    height: 200px;
    background: transparent;
    SmallAppBar {
        title: "My App";
        width: parent.width;
        height: parent.height;
    }
}
```

--------------------------------

### Slint PopupMenu Example

Source: https://material.slint.dev/components/popup_menu

A basic Slint component demonstrating the usage of the PopupMenu. It defines a window with a PopupMenu containing a list of items: Copy, Cut, and Paste.

```slint
import { PopupMenu } from "@material";
export component Example inherits Window {
    width: 400px;
    height: 300px;
    background: transparent;
    PopupMenu {
        width: 280px;
        height: parent.height;
        items: [
          { text: "Copy" },
          { text: "Cut" },
          { text: "Paste" },
        ];
    }
}
```

--------------------------------

### Slint DropDownMenu Example

Source: https://material.slint.dev/components/drop_down_menu

This Slint code demonstrates how to implement a DropDownMenu component. It sets the dimensions, background, and populates the menu with items, each having text. The component is defined within an Example component that inherits from Window.

```slint
import {
    DropDownMenu
} from "@material";

export component Example inherits Window {
    width: 400px;
    height: 300px;
    background: transparent;

    DropDownMenu {
        width: 280px;
        height: parent.height;
        items: [
            { text: "Copy" },
            { text: "Cut" },
            { text: "Paste" },
        ];
    }
}
```

--------------------------------

### Basic Switch Component Example in Slint

Source: https://material.slint.dev/components/switch

This code demonstrates how to create and display a basic Switch component within a Slint application. It imports the Switch from '@material' and defines a simple window to contain it.

```slint
import { Switch } from "@material";
export component Example inherits Window {
    width: 200px;
    height: 100px;
    background: transparent;
    Switch {
        x: 10px;
        y: 10px;
    }
}
```

--------------------------------

### Configure Material Library Paths in build.rs (Rust)

Source: https://material.slint.dev/getting-started

This Rust code snippet demonstrates how to configure Slint's Material library paths using `CompilerConfiguration::with_library_paths` in a build.rs file. It sets up a HashMap to map the 'material' library to its source file path.

```rust
// build.rs
fn main() {
    let config = slint_build::CompilerConfiguration::new().with_library_paths(
        std::collections::HashMap::from((
            "material".to_string(),
            std::path::Path::new(&std::env::var_os("CARGO_MANIFEST_DIR").unwrap())
                .join("material-1.0/material.slint"),
        ))),
    );
    slint_build::compile_with_config("ui/main.slint", config).unwrap();
}
```

--------------------------------

### Slint TonalIconButton Example

Source: https://material.slint.dev/components/buttons/tonal_icon_button

This snippet demonstrates how to use the TonalIconButton component in Slint. It imports the component and defines a basic example with an icon and a tooltip. Ensure the `@image-url` path is correct for your project.

```slint
import {
    TonalIconButton
} from "@material";

export component Example inherits Window {
    width: 100px;
    height: 100px;
    background: transparent;

    TonalIconButton {
        icon: @image-url("../icons/music_note.svg");
        tooltip: "Music";
    }
}
```

--------------------------------

### Slint CheckBox State Management Example

Source: https://material.slint.dev/components/checkboxes/check_box

Illustrates how to use the CheckBox component and set its 'check-state' property to 'checked' within a Slint application. This example highlights the direct property assignment for state control.

```slint
CheckBox {
    check-state: CheckState.checked;
}
```

--------------------------------

### Configure Material Library Paths in Python

Source: https://material.slint.dev/getting-started

This Python snippet illustrates how to configure Slint's Material library paths when loading a UI file. It uses `load_file` and the `library_paths` dictionary to specify the location of the `material.slint` file.

```python
ui = slint.load_file(
    Path(__file__).parent / "ui" / "main.slint",
    library_paths={
        "material": Path(__file__).parent / "material-1.0" / "material.slint"
    },
)
```

--------------------------------

### Slint OutlinedCard Example

Source: https://material.slint.dev/components/cards/outlined_card

This snippet demonstrates how to use the OutlinedCard component in Slint. It shows the basic structure for importing and rendering the component within a Slint window, with configurable dimensions and clickability.

```slint
import { OutlinedCard } from "@material";
export component Example inherits Window {
    width: 300px;
    height: 200px;
    background: transparent;
    OutlinedCard {
        width: 200px;
        height: 150px;
        clickable: true;
    }
}
```

--------------------------------

### Slint CircularProgressIndicator Example

Source: https://material.slint.dev/components/progress/circular_progress_indicator

Demonstrates how to use the CircularProgressIndicator component in a Slint application. It requires importing the component from '@material' and can be configured with a 'progress' value.

```slint
import { CircularProgressIndicator } from "@material";
export component Example inherits Window {
    width: 100px;
    height: 100px;
    background: transparent;
    CircularProgressIndicator {
        progress: 0.75;
        width: 80px;
        height: 80px;
    }
}
```

--------------------------------

### Slint Slider Example Component

Source: https://material.slint.dev/components/slider

This Slint code defines an example component that utilizes the Slider widget. It sets basic properties like size and background, and configures the Slider with its position, initial value, and width relative to its parent. This snippet demonstrates the basic integration of a Slider within a Slint application.

```slint
import { Slider } from "@material";
export component Example inherits Window {
    width: 200px;
    height: 100px;
    background: transparent;
    Slider {
        x: 5px;
        value: 50;
        width: parent.width;
    }
}
```

--------------------------------

### Slint ToolTip Implementation

Source: https://material.slint.dev/components/tooltip

This Slint code demonstrates how to implement a ToolTip component. It imports the ToolTip from '@material' and defines a basic example component that displays a tooltip with custom text and positioning.

```slint
import { ToolTip } from "@material";
export component Example inherits Window {
    width: 200px;
    height: 100px;
    background: transparent;
    ToolTip {
        text: "This is a tooltip";
        x: 10px;
        y: 10px;
    }
}
```

--------------------------------

### FloatingActionButton Example - Slint

Source: https://material.slint.dev/components/buttons/floating_action_button

A Slint component demonstrating the usage of the FloatingActionButton with an icon and tooltip. It requires the `@material` library for the FAB component and FABStyle enum.

```slint
import { FloatingActionButton, FABStyle } from "@material";
export component Example inherits Window {
    width: 120px;
    height: 120px;
    background: transparent;
    FloatingActionButton {
        icon: @image-url("../icons/add.svg");
        tooltip: "Add";
        style: FABStyle.standard;
    }
}
```

--------------------------------

### Slint FilledCard Component Example

Source: https://material.slint.dev/components/cards/filled_card

This code demonstrates the usage of the FilledCard component in Slint. It shows how to import and use the component within a Slint application, setting its dimensions and background. The FilledCard itself is configured with specific dimensions and made clickable.

```slint
import { FilledCard } from "@material";
export component Example inherits Window {
    width: 300px;
    height: 200px;
    background: transparent;
    FilledCard {
        width: 200px;
        height: 150px;
        clickable: true;
    }
}
```

--------------------------------

### Example Usage of OutlineIconButton in Slint

Source: https://material.slint.dev/components/buttons/outline_icon_button

Demonstrates how to use the OutlineIconButton component in a Slint application. It imports the component and configures its icon and tooltip properties within a Slint component definition.

```slint
import { OutlineIconButton } from "@material";
export component Example inherits Window {
    width: 100px;
    height: 100px;
    background: transparent;
    OutlineIconButton {
        icon: @image-url("../icons/edit.svg");
        tooltip: "Edit";
    }
}
```

--------------------------------

### Slint Avatar Component Example

Source: https://material.slint.dev/components/avatar

This code snippet demonstrates how to use the Slint Avatar component. It requires the '@material' import and defines a basic window with an Avatar element displaying a profile image.

```slint
import { Avatar } from "@material";
export component Example inherits Window {
    width: 100px;
    height: 100px;
    background: transparent;
    Avatar {
        image: @image-url("profile.jpg");
        x: 10px;
        y: 10px;
    }
}
```

--------------------------------

### Create IconButton Component - Slint

Source: https://material.slint.dev/components/buttons/icon_button

Demonstrates how to create and use an IconButton component in Slint. This example imports the IconButton from '@material' and defines a basic window containing the button with an icon and tooltip.

```slint
import { IconButton } from "@material";
export component Example inherits Window {
    width: 100px;
    height: 100px;
    background: transparent;
    IconButton {
        icon: @image-url("../icons/menu.svg");
        tooltip: "Menu";
    }
}
```

--------------------------------

### Slint Modal Component Example

Source: https://material.slint.dev/components/modal

This snippet demonstrates how to use the Modal component in Slint. It imports the Modal from '@material' and defines a basic window containing the Modal, making it cover the entire parent.

```slint
import { Modal } from "@material";
export component Example inherits Window {
    width: 400px;
    height: 300px;
    background: transparent;
    Modal {
        width: parent.width;
        height: parent.height;
    }
}
```

--------------------------------

### Implement SnackBar with Slint Component

Source: https://material.slint.dev/components/snack_bar

This example demonstrates how to implement a SnackBar component using Slint's UI framework. It utilizes the FilledButton and SnackBar components to display a message with an optional action and close button. The `show()` method is called on the SnackBar instance when the button is clicked.

```slint
import { FilledButton, SnackBar } from "@material";
export component Example inherits Window {
    width: 400px;
    height: 200px;
    background: transparent;


    show-snack-bar := FilledButton {
        text: @tr("Show Snack Bar");
        clicked => {
            sb.show();
        }
    }


    sb := SnackBar {
        text: "Message sent";
        action-text: "Undo";
        has-close-button: true;
    }
}
```

--------------------------------

### Slint LinearProgressIndicator Example

Source: https://material.slint.dev/components/progress/linear_progress_indicator

This code snippet demonstrates how to use the LinearProgressIndicator component in Slint. It imports the component and includes it within a Slint window, setting a specific progress value. The component is used to visually represent task progress.

```slint
import { LinearProgressIndicator } from "@material";
export component Example inherits Window {
    width: 200px;
    height: 40px;
    background: transparent;
    LinearProgressIndicator {
        progress: 0.5;
        width: 180px;
        height: 8px;
    }
}
```

--------------------------------

### Slint Example: LargeAppBar Usage

Source: https://material.slint.dev/components/appbars/large_app_bar

This Slint code demonstrates how to import and use the LargeAppBar component within a simple window. It sets the title and dimensions for the app bar, making it a central part of the UI layout.

```slint
import { LargeAppBar } from "@material";
export component Example inherits Window {
    width: 400px;
    height: 200px;
    background: transparent;
    LargeAppBar {
        title: "My App";
        width: parent.width;
        height: parent.height;
    }
}
```

--------------------------------

### Implement FilledButton in Slint

Source: https://material.slint.dev/components/buttons/filled_button

Demonstrates how to import and use the FilledButton component from the '@material' library within a Slint application. This example shows basic usage with text and size properties.

```slint
import { FilledButton } from "@material";
export component Example inherits Window {
    width: 200px;
    height: 100px;
    background: transparent;
    FilledButton {
        text: "Click me";
        width: 120px;
        height: 40px;
    }
}
```

--------------------------------

### Slint TonalButton Usage Example

Source: https://material.slint.dev/components/buttons/tonal_button

This snippet demonstrates how to use the TonalButton component in a Slint application. It imports the component and includes it within a basic window layout, setting text, icon, and dimensions.

```slint
import { TonalButton } from "@material";
export component Example inherits Window {
    width: 200px;
    height: 100px;
    background: transparent;
    TonalButton {
        text: "Tonal";
        icon: @image-url("../icons/music_note.svg");
        width: 120px;
        height: 40px;
    }
}
```

--------------------------------

### Slint TabBar Implementation Example

Source: https://material.slint.dev/components/appbars/tab_bar

This code snippet demonstrates how to implement a TabBar component in Slint. It imports the TabBar from '@material' and defines a basic TabBar with navigation items, including icons and text. The TabBar is configured to take the full width of its parent container.

```slint
import {
    TabBar
} from "@material";

export component Example inherits Window {
    width: 400px;
    height: 100px;
    background: transparent;

    TabBar {
        width: parent.width;
        items: [
            { icon: @image-url("../icons/share.svg"), text: "Home" },
            { icon: @image-url("../icons/search.svg"), text: "Search" },
            { icon: @image-url("../icons/settings.svg"), text: "Settings" }
        ];
    }
}
```

--------------------------------

### Configure Material Library Paths in CMakeLists.txt (C++)

Source: https://material.slint.dev/getting-started

This snippet shows how to configure the Slint Material library paths within a CMakeLists.txt file for C++ projects. It specifies the location of the material.slint file to be used by the slint_target_sources function.

```cmake
slint_target_sources(my_application
    ui/main.slint
    LIBRARY_PATHS
        material=${CMAKE_CURRENT_SOURCE_DIR}/material-1.0/material.slint
)
```

--------------------------------

### Basic ListTile Implementation in Slint

Source: https://material.slint.dev/components/list_tile

This snippet demonstrates how to implement a basic ListTile component in Slint. It initializes a window and includes a ListTile with primary text and supporting text. The `ListTile` component is imported from the `@material` package.

```slint
import { ListTile } from "@material";
export component Example inherits Window {
    width: 300px;
    height: 100px;
    background: transparent;
    ListTile {
        text: "List Item";
        supporting-text: "Supporting text";
        width: 280px;
        height: 72px;
    }
}
```

--------------------------------

### Global Structs

Source: https://material.slint.dev/reference/global-structs-enums

This section outlines the various structures available in Slint UI for defining UI elements and their properties.

```APIDOC
## Structs

### IconButtonItem

#### Description
This structure represents a `IconButtonItem` with x and y coordinate.

#### Fields
- **`icon`** (_image_): The icon to display in the button.
- **`tooltip`** (_string_): The tooltip to display when hovering over the button.
- **`enabled`** (_bool_): Whether the button is enabled.

### ListItem

#### Description
This structure represents a `ListItem` with a text, supporting text, avatar icon, avatar text, avatar background, avatar foreground, and action icon.

#### Fields
- **`text`** (_string_): The text to display in the item.
- **`supporting_text`** (_string_): The supporting text to display in the item.
- **`avatar-icon`** (_image_): The avatar icon to display in the item.
- **`avatar-text`** (_string_): The avatar text to display in the item.
- **`avatar-background`** (_color_): The avatar background color to display in the item.
- **`avatar-foreground`** (_color_): The avatar foreground color to display in the item.
- **`action-button-icon`** (_image_): The action button icon to display in the item.

### MenuItem

#### Description
This structure represents a `MenuItem` with an icon, text, trailing text, and enabled state.

#### Fields
- **`icon`** (_image_): The icon to display in the item.
- **`text`** (_string_): The text to display in the item.
- **`trailing_text`** (_string_): The trailing text to display in the item.
- **`enabled`** (_bool_): Whether the item is enabled.

### NavigationItem

#### Description
This structure represents a `NavigationItem` with an icon, text, badge, and empty badge.

#### Fields
- **`icon`** (_image_): The icon to display in the item.
- **`selected-icon`** (_image_): The icon to display in the item when selected.
- **`text`** (_string_): The text to display in the item.
- **`show-badge`** (_bool_): Whether the badge is empty.
- **`badge`** (_string_): The badge to display in the item.

### NavigationGroup

#### Description
This structure represents a `NavigationGroup` with a title and items.

#### Fields
- **`title`** (_string_): The title of the group.
- **`items`** (_[NavigationItem]_): The items of the group.

### SegmentedItem

#### Description
This structure represents an item in a segmented button control.

#### Fields
- **`icon`** (_image_): The icon to display for the item.
- **`text`** (_string_): The text label for the item.

### Time

#### Description
This structure represents a time value with hour, minute, and second fields.

#### Fields
- **`hour`** (_int_): The hour component of the time.
- **`minute`** (_int_): The minute component of the time.
- **`second`** (_int_): The second component of the time.
```

--------------------------------

### Setting the Checked State of a Slint Switch

Source: https://material.slint.dev/components/switch

This example shows how to programmatically set the 'checked' property of a Slint Switch component to 'true'. This property controls whether the switch is in the on or off state.

```slint
Switch {
    checked: true;
}
```

--------------------------------

### Set Initial Date for DatePickerPopup

Source: https://material.slint.dev/components/date_picker

Shows how to set the initial displayed date for the DatePickerPopup component. The 'date' property accepts a struct with 'year' and 'month' properties.

```slint
DatePickerPopup {
    date: { year: 2024, month: 11 };
}

```

--------------------------------

### Create and Configure ModalDrawer in Slint

Source: https://material.slint.dev/components/modal_drawer

This snippet demonstrates how to import and use the ModalDrawer component in a Slint application. It shows basic configuration such as setting the title and content of the drawer, and how to integrate it within a window component. The ModalDrawer blocks interaction with the content behind it and provides smooth slide animations.

```slint
import { ModalDrawer } from "@material";
export component Example inherits Window {
    width: 400px;
    height: 300px;
    background: transparent;
    ModalDrawer {
        title: "Settings";
        position-right: false;


        // Drawer content goes here
        Rectangle {
            background: #f0f0f0;
            Text {
                text: "Modal drawer content";
            }
        }
    }
}

```

--------------------------------

### Create MaterialWindow Component - Slint

Source: https://material.slint.dev/components/material_window

Demonstrates how to create a root window component using MaterialWindow in Slint. This component inherits from MaterialWindow, allowing for Material Design theming and styling. It sets the window dimensions, title, and includes a simple Text element.

```slint
import { MaterialWindow } from "@material";
export component Example inherits MaterialWindow {
    width: 400px;
    height: 300px;
    title: "Material Design App";


    Text {
        text: "Hello, Material Design!";
        color: white;
    }
}
```

--------------------------------

### Slint UI: Example with Horizontal and Vertical Dividers

Source: https://material.slint.dev/components/divider

This Slint UI code demonstrates the usage of HorizontalDivider and VerticalDivider components within a VerticalLayout. It showcases how to visually separate TextButton elements to group content in a user interface.

```slint
import { VerticalDivider, HorizontalDivider, TextButton } from "@material";
export component Example inherits Window {
    width: 200px;
    height: 100px;


    VerticalLayout {
        spacing: 8px;
        TextButton { text: "Section 1"; }
        HorizontalDivider {}
        TextButton { text: "Section 2"; }
        HorizontalDivider {}
        TextButton { text: "Section 3"; }
    }
}

```

--------------------------------

### Initialize NavigationDrawer Component

Source: https://material.slint.dev/components/navigation/navigation_drawer

This snippet demonstrates how to initialize and configure a NavigationDrawer component using Slint. It sets up the drawer's dimensions, defines navigation groups with titles and items, and includes icon and text for each navigation item. This component is typically used for primary application navigation.

```slint
import { NavigationDrawer } from "@material";
export component Example inherits Window {
    width: 400px;
    height: 300px;
    background: transparent;
    navigation_drawer := NavigationDrawer {
        width: 280px;
        height: parent.height;
        groups: [
            {
                title: "Main",
                items: [
                    { icon: @image-url("../icons/share.svg"), text: "Home" },
                    { icon: @image-url("../icons/search.svg"), text: "Search" }
                ]
            }
        ];
    }
}
```

--------------------------------

### Create and Display TimePickerPopup - Slint

Source: https://material.slint.dev/components/time_picker

Demonstrates how to create and display a TimePickerPopup using Slint's FilledButton and TimePickerPopup components. It shows how to trigger the popup on a button click and set initial time properties. This snippet requires the '@material' library.

```slint
import { FilledButton, TimePickerPopup } from "@material";
export component Example inherits Window {
    width: 400px;
    height: 600px;


    time_picker_button := FilledButton {
        text: @tr("Open Time Picker");


        clicked => {
            time_picker.show();
        }
    }


    time_picker := TimePickerPopup {
        x: (root.width - self.width) / 2;
        y: (root.height - self.height ) / 2;
        close_policy: PopupClosePolicy.no_auto_close;
        time: { hour: 12, minute: 24 };


    }
}

```

--------------------------------

### Use DatePickerPopup with FilledButton

Source: https://material.slint.dev/components/date_picker

Demonstrates how to use the DatePickerPopup component in conjunction with a FilledButton to allow users to open and interact with the date picker. It imports necessary components from '@material'.

```slint
import { DatePickerPopup, FilledButton } from "@material";
export component Example inherits Window {
    width: 400px;
    height: 600px;


    date_picker_button := FilledButton {
        text: @tr("Open Date Picker");


        clicked => {
            date_picker.show();
        }
    }


    date_picker := DatePickerPopup {
        x: (root.width - self.width) / 2;
        y: (root.height - self.height ) / 2;
        close_policy: PopupClosePolicy.no_auto_close;


        accepted(date) => {
            date_picker.close();
        }
        canceled => {
            date_picker.close();
        }
    }
}

```

--------------------------------

### Slint CheckBox Basic Usage

Source: https://material.slint.dev/components/checkboxes/check_box

Demonstrates the basic implementation of a CheckBox component in Slint, setting its initial state to 'checked'. This code requires the '@material' library for CheckBox and CheckState imports.

```slint
import { CheckBox, CheckState } from "@material";
export component Example inherits Window {
    width: 100px;
    height: 100px;
    background: transparent;
    CheckBox {
        check-state: CheckState.checked;
    }
}
```

--------------------------------

### TextField Widget Documentation

Source: https://material.slint.dev/components/text_field

Documentation for the Slint TextField widget, including its properties, functions, and callbacks.

```APIDOC
## TextField Widget

### Description
A widget used to enter a single line of text with additional features like icons and supporting text.

### Properties

#### enabled
- **Type**: bool
- **Default**: `true`
- **Description**: When false, the text field is disabled and cannot be interacted with.

#### has-error
- **Type**: bool
- **Default**: `false`
- **Description**: Indicates whether the text field should display an error state.

#### has-focus
- **Type**: bool `(out)`
- **Default**: `false`
- **Description**: Set to true when the text field currently has the focus.

#### label
- **Type**: string
- **Default**: `""`
- **Description**: The label text displayed above the text input.

#### leading-icon
- **Type**: image
- **Default**: `the empty image`
- **Description**: An icon displayed at the beginning of the text input.

#### placeholder-text
- **Type**: string
- **Default**: `""`
- **Description**: A placeholder text being shown when there is no text in the edit field.

#### supporting-text
- **Type**: string
- **Default**: `""`
- **Description**: Additional text displayed below the text input, often used for hints or error messages.

#### text
- **Type**: string `(in-out)`
- **Default**: `""`
- **Description**: The text being edited.

#### trailing-icon
- **Type**: image
- **Default**: `the empty image`
- **Description**: An icon displayed at the end of the text input.

### Functions

#### set-selection-offsets(int, int)
- **Description**: Selects the text between two UTF-8 offsets.

#### select-all()
- **Description**: Selects all text in the text field.

#### clear-selection()
- **Description**: Clears the current text selection.

#### cut()
- **Description**: Copies the selected text to the clipboard and removes it from the text field.

#### copy()
- **Description**: Copies the selected text to the clipboard.

#### paste()
- **Description**: Pastes the text content of the clipboard at the cursor position.

### Callbacks

#### accepted(string)
- **Description**: Invoked when the enter key is pressed.

#### edited(string)
- **Description**: Emitted when the text has changed because the user modified it.

#### key-pressed(KeyEvent) -> EventResult
- **Description**: Invoked when a key is pressed, the argument is a KeyEvent struct. Use this callback to handle keys before `TextField` does. Return `accept` to indicate that you’ve handled the event, or return `reject` to let `TextField` handle it.

#### key-released(KeyEvent) -> EventResult
- **Description**: Invoked when a key is released, the argument is a KeyEvent struct. Use this callback to handle keys before `TextField` does. Return `accept` to indicate that you’ve handled the event, or return `reject` to let `TextField` handle it.

#### leading-icon-clicked()
- **Description**: Invoked when the leading icon is clicked.

#### trailing-icon-clicked()
- **Description**: Invoked when the trailing icon is clicked.
```
Tokens:
Raw