Commit 624fa253 authored by Fabian Riethmayer's avatar Fabian Riethmayer

Added code example to actionbutton, contextdrawer, globaldrawer, menubar, toolbar

Summary: Added code examples for five Kirigami components

Reviewers: mart

Reviewed By: mart

Tags: #kde_human_interface_guidelines

Differential Revision: https://phabricator.kde.org/D17397
parent d1bfb0aa
......@@ -65,3 +65,38 @@ If your application is using :doc:`column-based navigation </patterns/navigation
:alt: Primary Action Buttons on Desktop
Primary Action Buttons are placed in a :doc:`toolbar <toolbar>`
Code
----
Kirigami
^^^^^^^^
.. code-block:: qml
...
import QtQuick.Controls 2.2 as Controls
import org.kde.kirigami 2.4 as Kirigami
...
Kirigami.ApplicationWindow {
...
pageStack.initialPage: Kirigami.ScrollablePage {
...
actions {
left: Kirigami.Action {
iconName: "mail-message"
text: i18n("&Write mail")
}
main: Kirigami.Action {
iconName: "call-start"
text: i18n("&Make call")
}
right: Kirigami.Action {
iconName: "kmouth-phrase-new"
text: i18n("&Write SMS")
}
}
}
...
}
......@@ -44,3 +44,61 @@ Guidelines
navigating through a PDF either by table of contents or
thumbnails), consider using two :doc:`Tabs <tab>` to separate them, but
never use more than two tabs.
Code
----
Kirigami
^^^^^^^^
.. code-block:: qml
...
import QtQuick.Controls 2.2 as Controls
import org.kde.kirigami 2.4 as Kirigami
...
Kirigami.ApplicationWindow {
...
pageStack.initialPage: Kirigami.ScrollablePage {
...
actions {
...
contextualActions: [
Kirigami.Action {
iconName: "favorite"
text: i18n("&Select as favorite")
},
Kirigami.Action {
iconName: "document-share"
text: i18n("&Share")
},
Kirigami.Action {
iconName: "document-edit"
text: i18n("&Edit")
},
Kirigami.Action {
iconName: "edit-image-face-add"
text: i18n("&Choose photo")
},
Kirigami.Action {
iconName: "im-kick-user"
text: i18n("&Block number")
},
Kirigami.Action {
iconName: "delete"
text: i18n("&Delete contact")
},
Kirigami.Action {
iconName: "edit-clear-history"
text: i18n("&Delete history")
}
]
...
}
}
...
contextDrawer: Kirigami.ContextDrawer {
}
...
}
......@@ -51,3 +51,45 @@ The main menu
one level.
Do not use the Menu Drawer for navigation purposes.
Code
----
Kirigami
^^^^^^^^
.. code-block:: qml
...
import QtQuick.Controls 2.2 as Controls
import org.kde.kirigami 2.4 as Kirigami
...
Kirigami.ApplicationWindow {
...
globalDrawer: Kirigami.GlobalDrawer {
actions: [
Kirigami.Action {
iconName: "list-import-user"
text: i18n("&Import")
},
Kirigami.Action {
iconName: "list-export-user"
text: i18n("&Export")
},
Kirigami.Action {
iconName: "user-group-delete"
text: i18n("&Merge contacts")
},
Kirigami.Action {
iconName: "user-group-new"
text: i18n("&Search dupplicate contacts")
},
Kirigami.Action {
iconName: "configure"
text: i18n("&Settings")
}
]
}
...
}
......@@ -80,3 +80,46 @@ Appearance
form. For example, use the text 'Show hidden files' instead of 'Hide hidden
files', and do not change the text when hidden files are shown.
Code
----
Kirigami
^^^^^^^^
.. code-block:: qml
...
import QtQuick.Controls 2.2 as Controls
import org.kde.kirigami 2.4 as Kirigami
...
Kirigami.ApplicationWindow {
...
menuBar: MenuBar {
Menu {
title: i18n("&File")
Action { text: i18n("&New...") }
Action { text: i18n("&Import") }
Action { text: i18n("&Export") }
}
Menu {
title: i18n("&Edit")
Action { text: i18n("&Merge contacts") }
Action { text: i18n("&Search dupplicate contacts") }
Action { text: i18n("&Export") }
}
Menu {
title: i18n("&Settings")
Action { text: i18n("&Settings") }
Action { text: i18n("&Configure shortcuts") }
}
Menu {
title: i18n("&Help")
Action { text: i18n("&Report Bug...") }
Action { text: i18n("&Donate") }
Action { text: i18n("&About Addressbook") }
Action { text: i18n("&About KDE") }
}
}
...
}
......@@ -94,3 +94,66 @@ Appearance
depiction is crucial. Follow the advices for :doc:`icon design </style/icon>`.
- Do not simulate Microsoft's ribbon controls. KDE stays plain and
simple.Microsoft's ribbon controls. KDE stays plain and simple.
Code
----
Kirigami
~~~~~~~~
Application toolbar
^^^^^^^^^^^^^^^^^^^
.. code-block:: qml
...
import QtQuick.Controls 2.2 as Controls
import org.kde.kirigami 2.4 as Kirigami
...
Kirigami.ApplicationWindow {
...
pageStack.initialPage: Kirigami.ScrollablePage {
...
actions {
left: Kirigami.Action {
iconName: "mail-message"
text: i18n("&Write mail")
}
main: Kirigami.Action {
iconName: "call-start"
text: i18n("&Make call")
}
right: Kirigami.Action {
iconName: "kmouth-phrase-new"
text: i18n("&Write SMS")
}
}
}
...
}
Component toolbar
^^^^^^^^^^^^^^^^^
.. code-block:: qml
...
import QtQuick.Controls 2.2 as Controls
import org.kde.kirigami 2.4 as Kirigami
...
Kirigami.ActionToolBar {
...
actions: [
Kirigami.Action {
iconName: "favorite"
text: i18n("&Select as favorite")
},
Kirigami.Action {
iconName: "document-share"
text: i18n("&Share")
}
]
...
}
...
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment