ToolBar.qml 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
  1. /****************************************************************************
  2. **
  3. ** Copyright (C) 2021 The Qt Company Ltd.
  4. ** Contact: https://www.qt.io/licensing/
  5. **
  6. ** This file is part of the Qt Quick Controls module of the Qt Toolkit.
  7. **
  8. ** $QT_BEGIN_LICENSE:COMM$
  9. **
  10. ** Commercial License Usage
  11. ** Licensees holding valid commercial Qt licenses may use this file in
  12. ** accordance with the commercial license agreement provided with the
  13. ** Software or, alternatively, in accordance with the terms contained in
  14. ** a written agreement between you and The Qt Company. For licensing terms
  15. ** and conditions see https://www.qt.io/terms-conditions. For further
  16. ** information use the contact form at https://www.qt.io/contact-us.
  17. **
  18. ** $QT_END_LICENSE$
  19. **
  20. **
  21. **
  22. **
  23. **
  24. **
  25. **
  26. **
  27. **
  28. **
  29. **
  30. **
  31. **
  32. **
  33. **
  34. **
  35. **
  36. **
  37. **
  38. ****************************************************************************/
  39. import QtQuick 2.2
  40. import QtQuick.Controls 1.2
  41. import QtQuick.Controls.Private 1.0
  42. /*!
  43. \qmltype ToolBar
  44. \inqmlmodule QtQuick.Controls
  45. \since 5.1
  46. \ingroup applicationwindow
  47. \ingroup controls
  48. \brief Contains ToolButton and related controls.
  49. \image toolbar.png
  50. The common way of using ToolBar is in relation to \l ApplicationWindow. It
  51. provides styling and is generally designed to work well with ToolButton as
  52. well as other controls.
  53. Note that the ToolBar does not provide a layout of its own, but requires
  54. you to position its contents, for instance by creating a \l RowLayout.
  55. If only a single item is used within the ToolBar, it will resize to fit the implicitHeight
  56. of its contained item. This makes it particularly suitable for use together with layouts.
  57. Otherwise the height is platform dependent.
  58. \code
  59. ApplicationWindow {
  60. ...
  61. toolBar:ToolBar {
  62. RowLayout {
  63. anchors.fill: parent
  64. ToolButton {
  65. iconSource: "new.png"
  66. }
  67. ToolButton {
  68. iconSource: "open.png"
  69. }
  70. ToolButton {
  71. iconSource: "save-as.png"
  72. }
  73. Item { Layout.fillWidth: true }
  74. CheckBox {
  75. text: "Enabled"
  76. checked: true
  77. Layout.alignment: Qt.AlignRight
  78. }
  79. }
  80. }
  81. }
  82. \endcode
  83. */
  84. FocusScope {
  85. id: toolbar
  86. activeFocusOnTab: false
  87. Accessible.role: Accessible.ToolBar
  88. LayoutMirroring.enabled: Qt.application.layoutDirection === Qt.RightToLeft
  89. LayoutMirroring.childrenInherit: true
  90. width: parent ? parent.width : implicitWidth
  91. implicitWidth: container.leftMargin + container.rightMargin
  92. + Math.max(container.layoutWidth, __panel ? __panel.implicitWidth : 0)
  93. implicitHeight: container.topMargin + container.bottomMargin
  94. + Math.max(container.layoutHeight, __panel ? __panel.implicitHeight : 0)
  95. /*! \internal */
  96. property Component style: Settings.styleComponent(Settings.style, "ToolBarStyle.qml", toolbar)
  97. /*! \internal */
  98. property alias __style: styleLoader.item
  99. /*! \internal */
  100. property Item __panel: panelLoader.item
  101. /*! \internal */
  102. default property alias __content: container.data
  103. /*! \internal */
  104. property var __menu
  105. /*!
  106. \qmlproperty Item ToolBar::contentItem
  107. This property holds the content Item of the tool bar.
  108. Items declared as children of a ToolBar are automatically parented to the ToolBar's contentItem.
  109. Items created dynamically need to be explicitly parented to the contentItem:
  110. \note The implicit size of the ToolBar is calculated based on the size of its content. If you want to anchor
  111. items inside the tool bar, you must specify an explicit width and height on the ToolBar itself.
  112. */
  113. readonly property alias contentItem: container
  114. data: [
  115. Loader {
  116. id: panelLoader
  117. anchors.fill: parent
  118. sourceComponent: styleLoader.item ? styleLoader.item.panel : null
  119. onLoaded: item.z = -1
  120. Loader {
  121. id: styleLoader
  122. property alias __control: toolbar
  123. sourceComponent: style
  124. }
  125. },
  126. Item {
  127. id: container
  128. z: 1
  129. focus: true
  130. anchors.fill: parent
  131. anchors.topMargin: topMargin
  132. anchors.leftMargin: leftMargin
  133. anchors.rightMargin: rightMargin + (buttonLoader.active ? buttonLoader.width + rightMargin : 0)
  134. anchors.bottomMargin: bottomMargin
  135. property int topMargin: __style ? __style.padding.top : 0
  136. property int bottomMargin: __style ? __style.padding.bottom : 0
  137. property int leftMargin: __style ? __style.padding.left : 0
  138. property int rightMargin: __style ? __style.padding.right : 0
  139. property Item layoutItem: container.children.length === 1 ? container.children[0] : null
  140. property real layoutWidth: layoutItem ? (layoutItem.implicitWidth || layoutItem.width) +
  141. (layoutItem.anchors.fill ? layoutItem.anchors.leftMargin +
  142. layoutItem.anchors.rightMargin : 0) : 0
  143. property real layoutHeight: layoutItem ? (layoutItem.implicitHeight || layoutItem.height) +
  144. (layoutItem.anchors.fill ? layoutItem.anchors.topMargin +
  145. layoutItem.anchors.bottomMargin : 0) : 0
  146. },
  147. Loader {
  148. id: buttonLoader
  149. anchors.right: parent.right
  150. anchors.rightMargin: container.rightMargin
  151. anchors.verticalCenter: parent.verticalCenter
  152. sourceComponent: ToolMenuButton {
  153. menu: toolbar.__menu
  154. panel: toolbar.__style.menuButton || null
  155. }
  156. active: !!__menu && __menu.items.length > 0 && !!__style.menuButton
  157. }
  158. ]
  159. }