Tipografía

Organización del contenido

Encabezados

Kirigami proporciona una Heading que se puede usar para títulos de páginas o de secciones.

import org.kde.kirigami 2.20 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
}

Cinco cabeceras con distintos niveles para comparar sus tamaños

Etiquetas

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

import QtQuick.Controls 2.15 as Controls

Controls.Label {
    text: "My text"
}

Alineación del texto

Puede alinear elementos de texto usando las propiedades horizontalAlignment y verticalAlignment.

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

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

Cabecera y el texto «lorem ipsum» centrado horizontalmente

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

    }
}

Cabecera y el texto «lorem ipsum» alineado a la derecha

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

ColumnLayout {
    Kirigami.Heading {
        Layout.fillWidth: true
        Layout.fillHeight: true
        verticalAlignment: Text.AlignBottom
        text: "Welcome to my application"
        wrapMode: Text.WordWrap
    }
    Controls.Label {
        Layout.fillWidth: true
        Layout.fillHeight: true
        verticalAlignment: Text.AlignTop
        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante."
        wrapMode: Text.WordWrap
    }
}

Cabecera con alineación vertical a la parte inferior y el texto «lorem ipsum» con alineación vertical a la parte superior

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

ColumnLayout {
    Kirigami.Heading {
        Layout.fillWidth: true
        Layout.fillHeight: true
        verticalAlignment: Text.AlignTop
        text: "Welcome to my application"
        wrapMode: Text.WordWrap
    }
    Controls.Label {
        Layout.fillWidth: true
        Layout.fillHeight: true
        verticalAlignment: Text.AlignBottom
        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante."
        wrapMode: Text.WordWrap
    }
}

Cabecera con alineación vertical a la parte superior y el texto «lorem ipsum» con alineación vertical a la parte inferior

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 Controls

Controls.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>"
}

Una Label que contiene una lista de frutas que usan etiquetas HTML, como párrafo, lista desordenada y textos en negrita

Tema

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

Colores y temas en Kirigami

Componentes basados en acciones