Типографика

Размещение содержимого

Для демонстрации в этом руководстве используется AbstractCard, чтобы примеры текста были нагляднее. Более удачный способ добиться того же результата — использовать FormCard из Kirigami Addons.

Заголовки

Kirigami предоставляет Heading, который можно использовать для заголовков страниц или разделов.

import QtQuick
import QtQuick.Layouts
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Kirigami Heading"
    height: 400
    width: 400

    pageStack.initialPage: Kirigami.Page {
        Kirigami.AbstractCard {
            anchors.fill: parent
            contentItem: ColumnLayout {
                anchors.fill: parent
                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
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Controls Label"
    height: 400
    width: 400

    pageStack.initialPage: Kirigami.Page {
        Kirigami.AbstractCard {
            anchors.fill: parent
            contentItem: Controls.Label {
                    text: "My text"
            }
        }
    }
}

Выравнивание текста

Для выравнивания текстовых элементов используются свойства horizontalAlignment и verticalAlignment.

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Controls Horizontal Center"
    height: 400
    width: 400

    pageStack.initialPage: Kirigami.Page {
        Kirigami.AbstractCard {
            anchors.fill: parent
            contentItem: 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
import QtQuick.Layouts
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Horizontal Align Right"
    height: 400
    width: 400

    pageStack.initialPage: Kirigami.Page {
        Kirigami.AbstractCard {
            anchors.fill: parent
            contentItem: 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
import QtQuick.Layouts
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Bottom and Top"
    height: 400
    width: 400

    pageStack.initialPage: Kirigami.Page {
        Kirigami.AbstractCard {
            anchors.fill: parent
            contentItem: 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
import QtQuick.Layouts
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Top and Bottom"
    height: 400
    width: 400

    pageStack.initialPage: Kirigami.Page {
        Kirigami.AbstractCard {
            anchors.fill: parent
            contentItem: 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
import QtQuick.Layouts
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Controls Label with rich text"
    height: 400
    width: 400

    pageStack.initialPage: Kirigami.Page {
        Kirigami.AbstractCard {
            anchors.fill: parent
            contentItem: Controls.Label {
                text: "<p><strong>List of fruits to purchase</strong></p>
                <ul>
                <li>Apple</li>
                <li>Cherry</li>
                <li>Orange</li>
                <li><del>Banana</del></li>
                </ul>
                <p>Kris already got some bananas yesterday.</p>"
            }
        }
    }
}

Надпись со списком фруктов, использующая теги HTML, такие как абзац, маркированные списки и полужирный шрифт

Тема

Размер шрифта Kirigami.Theme доступен в приложении как Kirigami.Theme.defaultFont.pointSize.

Цвета и темы в Kirigami

Компоненты на основе действий