FilterChip

import { FilterChip } from "material.slint";
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

A FilterChip is a chip that can be toggled on and off to filter content. When selected, it displays a checkmark icon and changes its appearance to indicate the active state.

Properties

checked

bool (in-out) default: false

Whether the filter chip is in the checked (active) state.

FilterChip {
    checked: true;
}

slint

enabled

bool default: true

Whether the chip is enabled and can be interacted with.

icon

image default: the empty image

An optional icon displayed on the chip.

text

string default: ""

The text label displayed on the chip.

string default: ""

A tooltip text that appears when hovering over the chip.

Functions

toggle()

Toggles the filter chip state between checked and unchecked.

FilterChip {
    clicked() => {
        self.toggle();
    }
}

slint