Typographies

Mise en page de votre contenu

En-têtes

Kirigami fournit un élément d'en-tête pouvant être utilisé pour les titres de pages ou de sections.

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
}
En-tête

Étiquettes

Les éléments de texte doivent utiliser l'élément « Label » de QtQuick Controls 2.

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

Alignement de texte

Vous pouvez aligner vos éléments de texte en utilisant la propriété « horizontalAlignment » de l'élément de texte.

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
    }
}
Texte centré
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
    }
}
Texte aligné à droite

Texte enrichi

QML vous permet d'afficher (et de modifier) du texte enrichi. Le comportement peut être contrôlé par la propriété 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>"
}
Affichage de texte enrichi

Thème

La taille de la police du [Thème] de Kirigami (docs:kirigami2;Theme) est disponible sous la forme de la propriété « Kirigami.Theme.defaultFont.pointSize » dans votre application.