Tipografija

Postavitev vsebine

Naslovi

Kirigami ponuja glavo naslova Heading , ki se lahko uporablja za naslove strani ali odsekov.

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
}

Pet glav naslovov z različnimi nivoji za primerjavo velikosti

Oznake

Besedilni elementi naj bi uporabili element oznake Label iz QtQuick Controls 2.

import QtQuick.Controls 2.15 as Controls

Controls.Label {
    text: "My text"
}

Poravnava besedila

Vaše besedilne elemente lahko poravnate z uporabo lastnosti horizontalAlignment in 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
    }
}

Glava naslova in besedilo lorem ipsum poravnani na vodoravno sredino

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

    }
}

Glava naslova in besedilo lorem ipsum desno poravnani

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

Naslov z navpično poravnavo na dnu in besedilom lorem ipsum z navpično poravnavo na vrhu

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

Naslov z navpično poravnavo zgoraj in besedilom lorem ipsum z navpično poravnavo na dnu

Obogateno besedilo

QML omogoča prikaz (in urejanje) obogatenega besedila. Vedenje je mogoče nadzorovati prek lastnosti 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>"
}

Oznaka, ki vsebuje seznam sadja z uporabo oznak HTML, kot so odstavek, neurejeni seznami in krepke pisave

Tema

Velikost pisave programa Kirigami.Theme Kirigami je na voljo kot Kirigami.Theme.defaultFont.pointSize v vaši aplikaciji.

Barve in teme v Kirigamiju

Komponente, ki temeljijo na dejanjih