Drawer.qml 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. // Copyright (C) 2017 The Qt Company Ltd.
  2. // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
  3. // Qt-Security score:significant reason:default
  4. import QtQuick
  5. import QtQuick.Templates as T
  6. import QtQuick.Controls.impl
  7. import QtQuick.Controls.Material
  8. import QtQuick.Controls.Material.impl
  9. T.Drawer {
  10. id: control
  11. parent: T.Overlay.overlay
  12. implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
  13. implicitContentWidth + leftPadding + rightPadding)
  14. implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
  15. implicitContentHeight + topPadding + bottomPadding)
  16. topPadding: SafeArea.margins.top + (edge !== Qt.TopEdge ? Material.roundedScale : 0)
  17. leftPadding: SafeArea.margins.left + (control.edge === Qt.RightEdge)
  18. rightPadding: SafeArea.margins.right + (control.edge === Qt.LeftEdge)
  19. bottomPadding: SafeArea.margins.bottom + (edge !== Qt.BottomEdge ? Material.roundedScale : 0)
  20. enter: Transition { SmoothedAnimation { velocity: 5 } }
  21. exit: Transition { SmoothedAnimation { velocity: 5 } }
  22. // https://m3.material.io/components/navigation-drawer/specs#e616dc8f-d61a-4d56-a311-50c68ecda744
  23. Material.elevation: !interactive && !dim ? 0 : 1
  24. Material.roundedScale: Material.LargeScale
  25. background: PaddedRectangle {
  26. // https://m3.material.io/components/navigation-drawer/specs#ce8bfbcf-3dec-45d2-9d8b-5e10af1cf87d
  27. implicitWidth: 360
  28. color: control.Material.dialogColor
  29. // FullScale doesn't make sense for Drawer.
  30. radius: control.Material.roundedScale
  31. leftPadding: edge === Qt.LeftEdge ? -radius : 0
  32. rightPadding: edge === Qt.RightEdge ? -radius : 0
  33. topPadding: edge === Qt.TopEdge ? -radius : 0
  34. bottomPadding: edge === Qt.BottomEdge ? -radius : 0
  35. clip: true
  36. layer.enabled: control.position > 0 && control.Material.elevation > 0
  37. layer.effect: RoundedElevationEffect {
  38. elevation: control.Material.elevation
  39. roundedScale: control.background.radius
  40. }
  41. }
  42. T.Overlay.modal: Rectangle {
  43. color: control.Material.backgroundDimColor
  44. Behavior on opacity { NumberAnimation { duration: 150 } }
  45. }
  46. T.Overlay.modeless: Rectangle {
  47. color: control.Material.backgroundDimColor
  48. Behavior on opacity { NumberAnimation { duration: 150 } }
  49. }
  50. }