Skip to main content
تخط المحتوى

الرسائل المضمنة

اعرض رسائل متعلقة بالمحتوى في تطبيقك

توفر الرسائل المضمنة طريقة فورية لإشعار مستخدميك بشيء حدث أثناء استخدام التطبيق.

رسالة مضمنة أساسية

مكونات Kirigami.InlineMessage لها خاصيتان مهمتان يجب مراعاتهما:

  • visible: مبدئيًا، يُضبط هذا على false، بحيث تظهر الرسالة فقط عندما تريدها صراحة. يمكن تجاوز هذا إذا رغبت بضبطه على true. عندما تُضبط رسالة مضمنة مخفية لتكون مرئية، تحصل على حركة لطيفة.
  • text: هنا تضبط نص رسالتك المضمنة.
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami

Kirigami.Page {

    ColumnLayout {
        Kirigami.InlineMessage {
            id: inlineMessage
            Layout.fillWidth: true
            text: "Hello! I am a siiiiiiimple lil' inline message!"
        }

        Controls.Button {
            text: "Show inline message!"
            onClicked: inlineMessage.visible = !inlineMessage.visible
        }
    }
}
نافذة تظهر زرًا، عند النقر عليه، تظهر رسالة مضمنة بخلفية زرقاء فاتحة مع نص فوقها، بالقرب من أعلى التطبيق

أنواع مختلفة

الرسائل المضمنة القياسية تشبه تلك أعلاه: لها خلفية زرقاء وأيقونة مبدئية. يمكننا تغيير ذلك بخاصية type، التي تتيح لنا ضبط رسالتنا المضمنة إلى نوع مختلف. هناك أربعة أنواع يمكننا الاختيار منها:

  • معلومات (Kirigami.MessageType.Information): المبدئي. له خلفية زرقاء، وأيقونة 'i'، ويُستخدم للإعلان عن نتيجة أو إخبار المستخدم بشيء عام. ليس من الضروري ضبطه يدويًا.
  • إيجابي (Kirigami.MessageType.Positive): له خلفية خضراء، وأيقونة علامة صح، ويشير إلى أن شيئًا ما سار بشكل جيد.
  • تحذير (Kirigami.MessageType.Warning): له خلفية برتقالية، وأيقونة علامة تعجب، ويمكن استخدامه لتحذير المستخدم من شيء يجب أن ينتبه إليه.
  • خطأ (Kirigami.MessageType.Error): له خلفية حمراء، وأيقونة علامة X، ويمكن استخدامه لإخبار المستخدم بأن شيئًا ما قد حدث بشكل خاطئ.
ColumnLayout {

    Kirigami.InlineMessage {
        Layout.fillWidth: true
        text: "Hello! Let me tell you something interesting!"
        visible: true
    }

    Kirigami.InlineMessage {
        Layout.fillWidth: true
        text: "Hey! Let me tell you something positive!"
        type: Kirigami.MessageType.Positive
        visible: true
    }

    Kirigami.InlineMessage {
        Layout.fillWidth: true
        text: "Hmm... You should keep this in mind!"
        type: Kirigami.MessageType.Warning
        visible: true
    }
    
    Kirigami.InlineMessage {
        Layout.fillWidth: true
        text: "Argh!!! Something went wrong!!"
        type: Kirigami.MessageType.Error
        visible: true
    }

}
نافذة تعرض جميع أنواع الرسائل المضمنة الأربعة بالأزرق والأخضر والبرتقالي والأحمر

تخصيص النص والأيقونات

تدعم الرسائل المضمنة النص المنسق، والذي يمكن تعريفه بترميز بسيط يشبه HTML. يتيح لك ذلك إضافة بعض التنسيق إلى نص رسالتك المضمنة أو حتى تضمين رابط ويب خارجي إذا أردت.

Kirigami.InlineMessage {
    Layout.fillWidth: true
    // لاحظ أنه عند استخدام علامات الاقتباس في سلسلة نصية، سيتعين عليك إفلاتها!
    text: "Check out <a href=\"https://kde.org\">KDE's website!<a/>"
    onLinkActivated: Qt.openUrlExternally(link)
    visible: true
}
رسالة مضمنة بنص منسق ورابط تشعبي

يمكنك أيضًا تخصيص الأيقونة التي تظهر في أعلى يسار رسالتك بتوفير اسم أيقونة نظام للخاصية icon.source. يجب أن تتوافق أسماء الأيقونات هذه مع الأيقونات المثبتة على نظامك؛ يمكنك استخدام تطبيق مثل Cuttlefish المقدم من plasma-sdk لتصفح والبحث عن الأيقونات المتوفرة على نظامك، ومعرفة أسمائها.

Kirigami.InlineMessage {
    Layout.fillWidth: true
    text: "Look at me! I look SPECIAL!"
    icon.source: "actor"
    visible: true
}
رسالة مضمنة بأيقونة مخصصة

استخدام الإجراءات في الرسائل المضمنة

إذا كانت رسائلك بحاجة إلى التفاعل، يمكنك إرفاق إجراءات كيريجامي برسائلك المضمنة. كما هو الحال مع الصفحات، يمكنك فعل ذلك بضبط الخاصية InlineMessage.actions إما على Kirigami.Action أو مصفوفة تحتوي على مكونات Kirigami.Action.

ColumnLayout {

    Kirigami.InlineMessage {
        id: actionsMessage
        Layout.fillWidth: true
        visible: true

        readonly property string initialText: "Something is hiding around here..."
        text: initialText

        actions: [
            Kirigami.Action {
                enabled: actionsMessage.text == actionsMessage.initialText
                text: qsTr("Add text")
                icon.name: "list-add"
                onTriggered: {
                    actionsMessage.text = actionsMessage.initialText + " Peekaboo!";
                }
            },
            Kirigami.Action {
                enabled: actionsMessage.text != actionsMessage.initialText
                text: qsTr("Reset text")
                icon.name: "list-remove"
                onTriggered: actionsMessage.text = actionsMessage.initialText
            }
        ]
    }
}
رسالة مضمنة بإجراءين

أزرار الإغلاق

توفر الرسائل المضمنة زر إغلاق يمكن استخدامه لرفضها بسهولة.

مبدئيًا، يكون زر الإغلاق هذا مخفيًا، ولكن يمكن تجاوز ذلك بضبط الخاصية showCloseButton إلى true.

Kirigami.InlineMessage {
    Layout.fillWidth: true
    text: "Please don't dismiss me..."
    showCloseButton: true
    visible: true
}
رسالة مضمنة مع زر إغلاق على جانبها الأيمن