Tipografía

Organización del contenido

Encabezados

Kirigami proporciona un elemento de encabezado que se puede usar para títulos de página o de sección.

import org.kde.kirigami 2.14 as Kirigami

Kirigami.Heading {
  text: "Heading level 1"
  level: 1
}
Kirigami.Heading {
  text: "Heading level 2"
  level: 2
}
Kirigami.Heading {
  text: "Heading level 3"
  level: 3
}
Kirigami.Heading {
  text: "Heading level 4"
  level: 4
}
Kirigami.Heading {
  text: "Heading level 5"
  level: 5
}
Encabezado

Etiquetas

Los elementos de texto deben usar el elemento Label de los controles de QtQuick 2.

import QtQuick.Controls 2.15 as QQC2
QQC2.Label {
    text: "My text"
}

Alineación del texto

Puede alinear los elementos del texto usando la propiedad horizontalAlignment del elemento de texto.

import QtQuick.Layouts 1.15 
import QtQuick.Controls 2.15 as QQC2
import org.kde.kirigami 2.14 as Kirigami

ColumnLayout {
    Kirigami.Heading {
        Layout.fillWidth: true
        horizontalAlignment: Text.AlignHCenter 
        text: "Welcome to my application"
        wrapMode: Text.Wrap
    }
    QQC2.Label {
        Layout.fillWidth: true
        horizontalAlignment: Text.AlignHCenter
        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante."
        wrapMode: Text.Wrap
    }
}
Texto centrado
import QtQuick.Layouts 1.15 
import QtQuick.Controls 2.15 as QQC2
import org.kde.kirigami 2.14 as Kirigami

ColumnLayout {
    Kirigami.Heading {
        Layout.fillWidth: true
        horizontalAlignment: Text.AlignRight
        text: "Welcome to my application"
        wrapMode: Text.Wrap
    }
    QQC2.Label {
        Layout.fillWidth: true
        horizontalAlignment: Text.AlignRight
        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante."
        wrapMode: Text.Wrap
    }
}
Texto justificado a la derecha

Texto enriquecido

QML permite mostrar (y editar) texto enriquecido. El comportamiento se puede controlar usando la propiedad textFormat.

import QtQuick 2.15
import QtQuick.Controls 2.15 as QQC2

QQC2.Label {
    text: "<p>List of fruits</p>
    <ul>
        <li>Apple</li>
        <li>Cherry</li>
        <li>Orange</li>
        <li><del>Banana</del></li>
    </ul>
    <p>Don't eat Banana, they are <strong>evil</strong></p>"
}
Mostrar texto enriquecido

Tema

El tamaño del texto del tema de Kirigami está disponible como Kirigami.Theme.defaultFont.pointSize en su aplicación.