Chip Class Reference

Inheritance diagram for Chip:

Properties
color	color
alias	iconSource
alias	imageSource
alias	label
bool	showCloseButton
Properties inherited from ItemDelegate
alias	containsPress
alias	content
bool	draggable
bool	flat
bool	highlighted
alias	isCurrentItem
alias	mouseArea
int	radius
string	tooltipText

Signals
void	close ()
Signals inherited from ItemDelegate
void	clicked (var mouse)
void	doubleClicked (var mouse)
void	pressAndHold (var mouse)
void	pressed (var mouse)
void	rightClicked (var mouse)

Detailed Description

This an information element, similar to a button, but more compact.

Since

org.mauikit.controls 1.0

Chips allow users to enter information, make selections, filter content, or trigger actions. While buttons are expected to appear consistently and with familiar calls to action, chips should appear dynamically as a group of multiple interactive elements.

This component is similar to the MauiKit Badge control, but this one is interactive.

See also

Badge

Colorful chips

Flow
{
    width: 400
    anchors.centerIn: parent
    spacing: Maui.Style.space.big
 
    Maui.Chip
    {
        text: "Chip1"
        color: "#757575"
    }
 
    Maui.Chip
    {
        text: "Chip2"
        icon.name: "actor"
        color: "#03A9F4"
    }
 
    Maui.Chip
    {
        text: "Chip3"
        icon.name: "anchor"
        color: "#4CAF50"
    }
 
    Maui.Chip
    {
        text: "Chip4"
        color: "#E1BEE7"
    }
 
    Maui.Chip
    {
        text: "Chip5"
        color: "#FFC107"
    }
 
    Maui.Chip
    {
        text: "Chip6"
        color: "#607D8B"
    }
 
    Maui.Chip
    {
        text: "Chip7"
        color: "#FF5722"
        icon.source: "/home/camiloh/Downloads/5911329.jpeg"
    }
}

You can find a more complete example at this link.

Definition at line 74 of file Chip.qml.

Property Documentation

color

color Chip::color

read

The background color for the chip.

The label text color will be adapted from this color considering the brightness, to use either a light or dark text color.

Definition at line 110 of file Chip.qml.

iconSource

alias Chip::iconSource

read

The name of the icon to be used.

This is an alias to the icon.name group property.

Definition at line 95 of file Chip.qml.

imageSource

alias Chip::imageSource

read

The name of the image source to be used.

This is an alias to the icon.source group property.

Definition at line 101 of file Chip.qml.

label

alias Chip::label

read

The Label element used for the title text.

This is exposed to tweak the text font properties.

Definition at line 89 of file Chip.qml.

showCloseButton

bool Chip::showCloseButton

read

Whether a close button should be displayed, to dismiss the chip.

By default it is set to false.

Definition at line 106 of file Chip.qml.

Member Function Documentation

close

void Chip::close ( )

signal

Emitted once the close button is clicked.

To enable the close button see the showCloseButton: true property.

See also

showCloseButton

---

The documentation for this class was generated from the following file:

• Chip.qml