Типографія

Компонування ваших даних

Заголовки

У Kirigami передбачено елемент заголовка , яким можна скористатися для заголовків сторінок або розділів.

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
}
Заголовок

Мітки

Текстові елементи мають використовувати елемент Label з QtQuick Controls 2.

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

Вирівнювання тексту

Ви можете вирівнювати ваші текстові елементи за допомогою властивості horizontalAlignment текстового елемента.

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
    }
}
Вирівняний праворуч текст

Форматований текст

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

Тема

Доступ до розміру шрифту теми Kirigami у вашій програмі можна отримати за допомогою Kirigami.Theme.defaultFont.pointSize.