Типографія
Заголовки
У Kirigami передбачено елемент заголовка , яким можна скористатися для заголовків сторінок або розділів.
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
}

Мітки
Текстові елементи мають використовувати компонент Label з QtQuick Controls 2.
import QtQuick.Controls 2.15 as Controls
Controls.Label {
text: "My text"
}

Вирівнювання тексту
Ви можете вирівняти текстові елементи за допомогою властивостей horizontalAlignment і 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
}
}

Заголовок і текст lorem ipsum вирівняно горизонтально за центром
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
}
}

Заголовок і текст lorem ipsum з використанням вирівняного праворуч тексту
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
}
}

Заголовок із вертикальним вирівнюванням вниз і текстом lorem ipsum із вертикальним вирівнюванням вгору
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
}
}

Заголовок із вертикальним вирівнюванням вгору і текстом lorem ipsum із вертикальним вирівнюванням вниз
Форматований текст
У QML передбачено можливість показу (і редагування) форматованого тексту. Поведінкою засобу форматування можна керувати за допомогою властивості 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>"
}

Мітка, що містить список фруктів із використанням теґів HTML, зокрема теґів абзаців, неупорядкованих списків та напівжирних шрифтів
Тема
Доступ до розміру шрифту
Kirigami.Theme
у вашій програмі можна отримати за допомогою Kirigami.Theme.defaultFont.pointSize
.