Chips

Los chips son pequeños elementos que se suelen usar para listar las propiedades relacionadas.

Los componentes Kirigami.Chip son pequeños elementos que heredan de AbstractButton y que se usan para mostrar propiedades comunes o filtros de algo. Suelen ser elementos de texto, con el que se puede interactuar, y contienen un botón de borrado opcional.

Ejemplo de Chips en la galería de Kirigami

Inicio rápido

Chips can easily be added using the Kirigami.Chip component. By assigning a string to its inherited AbstractButton.text field, we give chips their name.

import QtQuick import QtQuick.Layouts import QtQuick.Controls import org.kde.kirigami as Kirigami  Kirigami.ApplicationWindow {  title: "Chips"   pageStack.initialPage: Kirigami.Page {  title: "Chips"   Kirigami.FormLayout {  anchors.fill: parent  Kirigami.Chip {  text: "Chip 1"  }  Kirigami.Chip {  text: "Chip 2"  }  Kirigami.Chip {  text: "Chip 3"  }  }  } }

Con repetidores (recomendado)

Como los chips están diseñados para usarse más de una vez, probablemente querrá usar algún tipo de estructura de datos de lista y realizar una iteración para mostrarlos. Para ello, necesitamos un ListModel y un componente Repeater.

El ListModel se usa para almacenar los chips. Para rellenar el ListModel (y, por lo tanto, los chips), declaramos un par de componentes ListElement, que contienen un campo llamado text. Podemos usar esta cadena asignada desde aquí al campo text para cada chip repetido.

The Repeater is used for displaying the chips. First, we need to set the model field of the Repeater to our ListModel, or create the ListModel inside of repeater. Then, we declare the Kirigami.Chip component inside of the Repeater, and assign its text field with the element's data using the modelData property.

Kirigami.ApplicationWindow {  id: root  title: "Chips"   ListModel {  id: chips   ListElement { text: "Chip 1" }  ListElement { text: "Chip 2" }  ListElement { text: "Chip 3" }  }   pageStack.initialPage: Kirigami.Page {  title: "Chips"   Kirigami.FormLayout {  anchors.fill: parent  Repeater {  Layout.fillWidth: true  model: chips   Kirigami.Chip {  id: chip  text: modelData  }  }  }  } }

Nota

You can dynamically append and remove data from the ListModel, and the Repeater will automatically make those changes. However, simply changing a specific item from either the Repeater or ListModel does not affect the other, and requires the changing of both, unless something like QAbstractListModel is used. See Example Application for more information.

Aplicación de ejemplo

La aplicación de ejemplo siguiente muestra cómo se pueden usar chips en programas como listas de tareas pendientes.

 1  2  3  4  5  6  7  8  9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 import QtQuick import QtQuick.Layouts import QtQuick.Controls import org.kde.kirigami as Kirigami  Kirigami.ApplicationWindow {  id: root  title: "Chips"   ListModel {  id: chips   ListElement { text: "Chip 1" }  ListElement { text: "Chip 2" }  ListElement { text: "Chip 3" }  }   pageStack.initialPage: Kirigami.Page {  title: "Chips"   Kirigami.OverlaySheet {  id: editChipPrompt   property var chip;  property var index;   header: Kirigami.Heading {  text: "Edit Chip"  }   footer: DialogButtonBox {  standardButtons: DialogButtonBox.Ok | DialogButtonBox.Cancel  onAccepted: {  // Both the data from the Repeater and ListModel must be  // edited in order to update both.  editChipPrompt.chip.text = editTextField.text;  chips.setProperty(editChipPrompt.index, "text", editTextField.text);  editChipPrompt.close();  }  onRejected: {  editChipPrompt.close();  }  }   TextField {  id: editTextField  }  }   Kirigami.FormLayout {  anchors.fill: parent  TextField {  id: insertTextField  Kirigami.FormData.label: "Item:"  onAccepted: chips.append({ text: insertTextField.text })  }  // Wrapped in ColumnLayout to prevent binding loops.  ColumnLayout {  Layout.alignment: Qt.AlignHCenter  Repeater {  model: chips   Kirigami.Chip {  id: chip  text: modelData  onClicked: {  editTextField.text = modelData;  editChipPrompt.chip = chip;  editChipPrompt.index = index;  editChipPrompt.open();  }  onRemoved: chips.remove(index)  }  }  }  }  } } 

Cajones

Tipos de diálogos