Typographies

Mise en page de votre contenu

En-têtes

Kirigami provides a Heading that can be used for page or section titles.

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
}

Cinq en-têtes à différents niveaux pour la comparaison de la taille

Étiquettes

Text elements should use the Label component from QtQuick Controls 2.

import QtQuick.Controls 2.15 as Controls

Controls.Label {
    text: "My text"
}

Alignement de texte

You can align your text elements using the horizontalAlignment and verticalAlignment properties.

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
    }
}

En-tête et le texte « lorem ipsum » aligné sur le centre horizontal

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

    }
}

En-tête et texte « lorem ipsum » en utilisant un format de texte aligné à droite

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
    }
}

Heading with bottom vertical alignment and lorem ipsum text with top vertical alignment

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
    }
}

Heading with top vertical alignment and lorem ipsum text with bottom vertical alignment

Texte enrichi

QML allows you to display (and edit) rich text. The behavior can be controlled via the textFormat property.

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

A Label containing a list of fruits using HTML tags like paragraph, unordered lists and bold fonts

Thème

The font size of the Kirigami.Theme is available as Kirigami.Theme.defaultFont.pointSize in your application.

Colors and themes in Kirigami

Composants concernant les actions