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