Tipografia

Disporre i contenuti

A scopo dimostrativo, questo tutorial utilizza una AbstractCard per rendere più chiari gli esempi di testo. Un modo migliore per ottenere gli stessi risultati sarebbe utilizzare una Kirigami Addons FormCard.

Intestazioni

Kirigami fornisce un Intestazione che può essere utilizzato per i titoli di pagine o sezioni.

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
                }
            }
        }
    }
}

Cinque rubriche con diversi livelli per il confronto delle dimensioni

Etichette

Gli elementi di testo dovrebbero utilizzare il componente Label di 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"
            }
        }
    }
}

Allineamento del testo

Puoi allineare gli elementi di testo utilizzando le proprietà horizontalAlignment e 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
                }
            }
        }
    }
}

Intestazione e testo lorem ipsum allineati al centro orizzontale

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
                }
            }
        }
    }
}

Intestazione e testo lorem ipsum utilizzando testo allineato a destra

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
                }
            }
        }
    }
}

Intestazione con allineamento verticale inferiore e testo lorem ipsum con allineamento verticale superiore

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
                }
            }
        }
    }
}

Intestazione con allineamento verticale in alto e testo lorem ipsum con allineamento verticale in basso

Testo formattato

QML ti permette di visualizzare (e di modificare) il testo formattato. Il comportamento può essere controllato con la proprietà 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>"
            }
        }
    }
}

Un'etichetta contenente un elenco di frutti utilizzando tag HTML come paragrafi, elenchi non ordinati e caratteri in grassetto

Tema

La dimensione del carattere di Kirigami.Theme è disponibile come Kirigami.Theme.defaultFont.pointSize nella tua applicazione.

Colori e temi in Kirigami

Componenti basati sulle azioni