/**************************************************************************** ** ** Copyright (C) 2021 The Qt Company Ltd. ** Contact: https://www.qt.io/licensing/ ** ** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit. ** ** $QT_BEGIN_LICENSE:COMM$ ** ** Commercial License Usage ** Licensees holding valid commercial Qt licenses may use this file in ** accordance with the commercial license agreement provided with the ** Software or, alternatively, in accordance with the terms contained in ** a written agreement between you and The Qt Company. For licensing terms ** and conditions see https://www.qt.io/terms-conditions. For further ** information use the contact form at https://www.qt.io/contact-us. ** ** $QT_END_LICENSE$ ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ****************************************************************************/ import QtQuick 2.12 import QtQuick.Templates 2.12 as T import QtQuick.Controls 2.12 import QtQuick.Controls.impl 2.12 import QtQuick.Controls.Material 2.12 import QtQuick.Controls.Material.impl 2.12 T.RoundButton { id: control implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitContentWidth + leftPadding + rightPadding) implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, implicitContentHeight + topPadding + bottomPadding) topInset: 6 leftInset: 6 rightInset: 6 bottomInset: 6 padding: 12 spacing: 6 icon.width: 24 icon.height: 24 icon.color: !enabled ? Material.hintTextColor : flat && highlighted ? Material.accentColor : highlighted ? Material.primaryHighlightedTextColor : Material.foreground Material.elevation: flat ? control.down || control.hovered ? 2 : 0 : control.down ? 12 : 6 Material.background: flat ? "transparent" : undefined contentItem: IconLabel { spacing: control.spacing mirrored: control.mirrored display: control.display icon: control.icon text: control.text font: control.font color: !control.enabled ? control.Material.hintTextColor : control.flat && control.highlighted ? control.Material.accentColor : control.highlighted ? control.Material.primaryHighlightedTextColor : control.Material.foreground } // TODO: Add a proper ripple/ink effect for mouse/touch input and focus state background: Rectangle { implicitWidth: control.Material.buttonHeight implicitHeight: control.Material.buttonHeight radius: control.radius color: !control.enabled ? control.Material.buttonDisabledColor : control.checked || control.highlighted ? control.Material.highlightedButtonColor : control.Material.buttonColor Rectangle { width: parent.width height: parent.height radius: control.radius visible: control.hovered || control.visualFocus color: control.Material.rippleColor } Rectangle { width: parent.width height: parent.height radius: control.radius visible: control.down color: control.Material.rippleColor } // The layer is disabled when the button color is transparent so that you can do // Material.background: "transparent" and get a proper flat button without needing // to set Material.elevation as well layer.enabled: control.enabled && control.Material.buttonColor.a > 0 layer.effect: ElevationEffect { elevation: control.Material.elevation } } }