diff --git a/README-zh.md b/README-zh.md
index 5dc5b36..d2adced 100644
--- a/README-zh.md
+++ b/README-zh.md
@@ -173,6 +173,9 @@ https://marketplace.qt.io/collections/newest/products/taoquick
+## Edge浏览器选项卡
+
+
## 矩形框组件
diff --git a/examples/TaoQuickShow/Contents.qrc b/examples/TaoQuickShow/Contents.qrc
index 36101f0..e621a24 100644
--- a/examples/TaoQuickShow/Contents.qrc
+++ b/examples/TaoQuickShow/Contents.qrc
@@ -63,5 +63,6 @@
Contents/ShapeGallery/ShapeJoinStyles.qml
Contents/ShapeGallery/ShapeCubicBezier.qml
Contents/ShapeGallery/ShapeEllipticalArc.qml
+ Contents/General/EdgeTabBar.qml
diff --git a/examples/TaoQuickShow/Contents/General/EdgeTabBar.qml b/examples/TaoQuickShow/Contents/General/EdgeTabBar.qml
new file mode 100644
index 0000000..9ed5e74
--- /dev/null
+++ b/examples/TaoQuickShow/Contents/General/EdgeTabBar.qml
@@ -0,0 +1,106 @@
+import QtQuick 2.9
+import QtQuick.Controls 2.2
+import TaoQuick 1.0
+
+Item {
+ anchors.fill: parent
+ property int tabHeight: 44
+
+ Rectangle {
+ x: 50
+ y: 90
+ width: 800
+ height: 600
+ border.color: "gray"
+ border.width: 1
+ color: "#f7f7f7"
+
+ Item {
+ id: chromeTabItem
+ height: 50
+ width: parent.width
+ clip: true
+ CusRoundTabButton {
+ id: leftBtn
+ width: 50
+ height: tabHeight
+ color: "#2d7d9a"
+ CusImage {
+ anchors {
+ left: parent.left
+ leftMargin: 10
+ verticalCenter: parent.verticalCenter
+ }
+ source: imgPath + "logo/milk_32.png"
+ }
+ property bool isZero: tabListView.currentIndex === 0
+ onIsZeroChanged: {
+ updateRadius()
+ }
+ updateRadius:function() {
+ if(tabListView.currentIndex === 0)
+ {
+ radius = roundRadius
+ rightBottomRound = true
+ } else {
+ rightBottomRound = false
+ radius = 0
+ }
+ }
+ }
+ ListView {
+ id: tabListView
+ x: leftBtn.width
+ width: parent.width - leftBtn.width
+ height: tabHeight
+ orientation: Qt.Horizontal
+ model: 10
+ interactive: false
+ delegate: Item {
+ width: 140
+ height: tabHeight
+ CusRoundTabButton {
+ id: tabBtn
+ color: {
+ if (tabBtn.isSelected || tabBtn.pressed) {
+ return "#f7f7f7"
+ } else if (tabBtn.hovered) {
+ return "#7bacbf"
+ } else {
+ return "#69a2b7"
+ }
+ }
+ anchors.fill: parent
+ isFirst: index === 0
+ isLast: index === tabListView.count - 1
+ tabIndex: index
+ currentTabIndex: tabListView.currentIndex
+ onClick: {
+ tabListView.currentIndex = tabIndex
+ }
+ CusImage {
+ anchors {
+ left: parent.left
+ leftMargin: 10
+ verticalCenter: parent.verticalCenter
+ }
+ source: imgPath + "logo/milk_32.png"
+ }
+ Label {
+ color: "#3e3e3e"
+ text: "Tab " + index
+ anchors.centerIn: parent
+ }
+ }
+ }
+ }
+
+ Rectangle {
+ width: parent.width
+ height: 1
+ anchors.bottom: parent.bottom
+ color: "gray"
+ }
+ }
+ }
+}
diff --git a/examples/TaoQuickShow/Contents/General/RoundRects.qml b/examples/TaoQuickShow/Contents/General/RoundRects.qml
index 9d46947..96b2a93 100644
--- a/examples/TaoQuickShow/Contents/General/RoundRects.qml
+++ b/examples/TaoQuickShow/Contents/General/RoundRects.qml
@@ -22,7 +22,7 @@ Item {
rightTopRound: rt.checked
leftBottomRound: lb.checked
rightBottomRound: rb.checked
- color: "#333666" //半透明色
+ color: "#A0333666" //
}
Rectangle { //背景红色，衬托一下
x: 10
diff --git a/examples/TaoQuickShow/Qml/Pane/ContentModel.qml b/examples/TaoQuickShow/Qml/Pane/ContentModel.qml
index 10685ba..29e5b17 100644
--- a/examples/TaoQuickShow/Qml/Pane/ContentModel.qml
+++ b/examples/TaoQuickShow/Qml/Pane/ContentModel.qml
@@ -60,7 +60,14 @@ ListModel {
group: "General"
groupOpen: true
}
-
+ ListElement {
+ name: "Edge TabBar"
+ source: "General/EdgeTabBar.qml"
+ visible: true
+ group: "General"
+ groupOpen: true
+ }
+
ListElement {
name: "Shapes"
source: "General/Shapes.qml"
diff --git a/preview/EdgeTab.gif b/preview/EdgeTab.gif
new file mode 100644
index 0000000..776323c
Binary files /dev/null and b/preview/EdgeTab.gif differ
diff --git a/src/TaoQuick/Qml/Basic/RoundRectangle.qml b/src/TaoQuick/Qml/Basic/RoundRectangle.qml
index 063bfed..ace4fbd 100644
--- a/src/TaoQuick/Qml/Basic/RoundRectangle.qml
+++ b/src/TaoQuick/Qml/Basic/RoundRectangle.qml
@@ -1,6 +1,11 @@
import QtQuick 2.10
import QtQuick.Controls 2.2
-Rectangle {
+
+//Rectangle 模拟圆角矩形。没有其它模块依赖，很基础的Qt版本都可以用。
+// 四个角可控。
+// 不支持半透明。
+
+Rectangle {
id: root
implicitWidth: 50
implicitHeight: 50
@@ -27,55 +32,37 @@ Rectangle {
onRightTopRoundChanged: {
updateCorners()
}
-
- function updateCorners() {
- var s = []
- if(leftTopRound) {
- s.push(lt)
- }
- if(rightTopRound) {
- s.push(rt)
- }
- if(leftBottomRound) {
- s.push(lb)
- }
- if(rightBottomRound) {
- s.push(rb)
- }
- corners = s
- }
property var corners: []
+
+
Repeater {
- model: [
- {
- x: 0,
- y: 0,
- visible: internal.aligns(lt),
- radius: root.radius
- },
- {
- x: root.width - root.radius,
- y: 0,
- visible: internal.aligns(rt),
- radius: root.radius
- },
- {
- x: 0,
- y: root.height - root.radius,
- visible: internal.aligns(lb),
- radius: root.radius
- },
- {
- x: root.width - root.radius,
- y: root.height - root.radius,
- visible: internal.aligns(rb),
- radius: root.radius
- }
- ]
+ model: [{
+ "x": 0,
+ "y": 0,
+ "visible": internal.aligns(lt),
+ "radius": root.radius
+ }, {
+ "x": root.width - root.radius,
+ "y": 0,
+ "visible": internal.aligns(rt),
+ "radius": root.radius
+ }, {
+ "x": 0,
+ "y": root.height - root.radius,
+ "visible": internal.aligns(lb),
+ "radius": root.radius
+ }, {
+ "x": root.width - root.radius,
+ "y": root.height - root.radius,
+ "visible": internal.aligns(rb),
+ "radius": root.radius
+ }]
Rectangle {
- x: modelData.x; y: modelData.y
- width: modelData.radius; height: width
+ x: modelData.x
+ y: modelData.y
+ width: modelData.radius
+ height: width
visible: !modelData.visible
color: parent.color
}
@@ -89,12 +76,26 @@ Rectangle {
if ((root.corners[i] & direction) === direction)
return true
}
-
- return false;
- }
- else {
+ return false
+ } else {
return (root.corners & direction) === direction
}
}
}
+ function updateCorners() {
+ var s = []
+ if (leftTopRound) {
+ s.push(lt)
+ }
+ if (rightTopRound) {
+ s.push(rt)
+ }
+ if (leftBottomRound) {
+ s.push(lb)
+ }
+ if (rightBottomRound) {
+ s.push(rb)
+ }
+ corners = s
+ }
}
diff --git a/src/TaoQuick/Qml/CusButton/CusRoundTabButton.qml b/src/TaoQuick/Qml/CusButton/CusRoundTabButton.qml
new file mode 100644
index 0000000..7cd9bbd
--- /dev/null
+++ b/src/TaoQuick/Qml/CusButton/CusRoundTabButton.qml
@@ -0,0 +1,102 @@
+import QtQuick 2.9
+import QtQuick.Controls 2.2
+import "."
+import ".."
+import "../Basic"
+import "../CusImage"
+
+RoundRectangle {
+ width: 30
+ height: 30
+ property string icon
+ property real roundRadius: 8
+ property int tabIndex: 0
+ property int currentTabIndex: 0
+ property bool isFirst: false
+ property bool isLast: false
+ property bool isSelected: currentTabIndex === tabIndex
+ property bool isLastSelected: currentTabIndex === tabIndex -1
+ property bool isNextSelected: currentTabIndex === tabIndex + 1
+
+ property alias containsMouse: trans.containsMouse
+ property alias hovered: trans.containsMouse
+ property alias pressed: trans.pressed
+
+ property bool showSplitLineLast: !hovered && !pressed && !isSelected && !isLastSelected
+ property bool showSplitLineNext: !hovered && !pressed && !isSelected && !isNextSelected
+
+ property color splitLineColor: "#bad4de"
+
+ signal click()
+ onIsLastSelectedChanged: {
+ updateRadius()
+ }
+ onIsNextSelectedChanged: {
+ updateRadius()
+ }
+ property var updateRadius: function updateRadius() {
+ if (isFirst && isNextSelected) {
+ radius = roundRadius
+ rightBottomRound = true
+ return
+ }
+ if (isLast && isLastSelected) {
+ radius = roundRadius
+ leftBottomRound = true
+ return
+ }
+ if(isNextSelected || isLastSelected) {
+ if(isNextSelected) {
+ radius = roundRadius
+ rightBottomRound = true
+ }
+ if(isLastSelected) {
+ radius = roundRadius
+ leftBottomRound = true
+ }
+ } else {
+ radius = 0
+ rightBottomRound = false
+ leftBottomRound = false
+ }
+ }
+
+ color: isSelected ? "#ffffff" : "#e3e3e3"
+
+ CusImage {
+ anchors.centerIn: parent
+ sourceSize.width: 24
+ sourceSize.height: 24
+ source: icon
+ }
+ Rectangle {
+ visible: showSplitLineLast
+ width: 1
+ height: parent.height * 0.8
+ anchors {
+ left: parent.left
+ verticalCenter: parent.verticalCenter
+ }
+ color: splitLineColor
+ }
+ Rectangle {
+ visible: showSplitLineNext
+ width: 1
+ height: parent.height * 0.8
+ anchors {
+ right: parent.right
+ verticalCenter: parent.verticalCenter
+ }
+ color: splitLineColor
+ }
+ TransArea {
+ id: trans
+ anchors.fill: parent
+ onPressed: {
+ click()
+ }
+ }
+}
+
+
+
diff --git a/src/TaoQuick/TaoQuick.qrc b/src/TaoQuick/TaoQuick.qrc
index b742e86..5fc7a01 100644
--- a/src/TaoQuick/TaoQuick.qrc
+++ b/src/TaoQuick/TaoQuick.qrc
@@ -1,4 +1,4 @@
-
+
qmldir
Qml/CusConfig.qml
@@ -10,7 +10,6 @@
Qml/Basic/RoundRectangleShape.qml
Qml/Basic/TransArea.qml
Qml/CusBackground/CusBackground.qml
- Qml/CusButton/CusButton.qml
Qml/CusButton/CusButton_Blue.qml
Qml/CusButton/CusButton_Gradient.qml
Qml/CusButton/CusButton_Image.qml
@@ -18,32 +17,34 @@
Qml/CusButton/CusButton_ImageColorOverlay.qml
Qml/CusButton/CusButton_Red.qml
Qml/CusButton/CusButton_White.qml
+ Qml/CusButton/CusButton.qml
Qml/CusButton/CusRadioButton.qml
+ Qml/CusButton/CusRoundTabButton.qml
Qml/CusButton/CusTextButton.qml
Qml/CusCheckBox/CusCheckBox.qml
Qml/CusCheckBox/CusSwitch.qml
Qml/CusComboBox/CusComboBox.qml
+ Qml/CusImage/CusImage_Tip.qml
Qml/CusImage/CusImage.qml
Qml/CusImage/CusImageOverlay.qml
- Qml/CusImage/CusImage_Tip.qml
Qml/CusInput/CusIPAddress.qml
- Qml/CusInput/CusTextField.qml
Qml/CusInput/CusTextField_Btn.qml
Qml/CusInput/CusTextField_Search.qml
Qml/CusInput/CusTextField_Valid.qml
+ Qml/CusInput/CusTextField.qml
Qml/CusInput/CusTextInput.qml
- Qml/CusLabel/CusLabel.qml
Qml/CusLabel/CusLabel_Center.qml
Qml/CusLabel/CusLabel_Left.qml
+ Qml/CusLabel/CusLabel.qml
Qml/CusListView/CusListView.qml
Qml/CusPopup/CusPopup.qml
Qml/CusPopup/CusToolTip_Triangle.qml
Qml/CusPopup/CusTriangleTipBorder.qml
Qml/CusScroll/CusScrollBar.qml
- Qml/CusSlider/CusSlider.qml
Qml/CusSlider/CusSlider_Spin.qml
- Qml/CusSpinBox/CusSpinBox.qml
+ Qml/CusSlider/CusSlider.qml
Qml/CusSpinBox/CusSpinBox_HourMinute.qml
+ Qml/CusSpinBox/CusSpinBox.qml
Qml/CusTable/CusTableConstant.qml
Qml/CusTable/CusTableHeader.qml
Qml/CusTable/CusTableRow.qml
@@ -106,12 +107,12 @@
Images/particle.png
Images/right.png
Images/rotate.png
- Images/Search.png
Images/Search_Clear.png
+ Images/Search.png
Images/spinner.png
- Images/Table_Asc.png
Images/Table_Asc_Hovered.png
- Images/Table_Desc.png
+ Images/Table_Asc.png
Images/Table_Desc_Hovered.png
+ Images/Table_Desc.png
diff --git a/src/TaoQuick/qmldir b/src/TaoQuick/qmldir
index 80a166c..08a0854 100644
--- a/src/TaoQuick/qmldir
+++ b/src/TaoQuick/qmldir
@@ -1,4 +1,4 @@
-module TaoQuick
+module TaoQuick
BasicText 1.0 Qml/Basic/BasicText.qml
BasicTooltip 1.0 Qml/Basic/BasicTooltip.qml
CusCallLater 1.0 Qml/Basic/CusCallLater.qml
@@ -7,7 +7,6 @@ RoundRectangle 1.0 Qml/Basic/RoundRectangle.qml
RoundRectangleShape 1.0 Qml/Basic/RoundRectangleShape.qml
TransArea 1.0 Qml/Basic/TransArea.qml
CusBackground 1.0 Qml/CusBackground/CusBackground.qml
-CusButton 1.0 Qml/CusButton/CusButton.qml
CusButton_Blue 1.0 Qml/CusButton/CusButton_Blue.qml
CusButton_Gradient 1.0 Qml/CusButton/CusButton_Gradient.qml
CusButton_Image 1.0 Qml/CusButton/CusButton_Image.qml
@@ -15,32 +14,34 @@ CusButton_ImageBackground 1.0 Qml/CusButton/CusButton_ImageBackground.qml
CusButton_ImageColorOverlay 1.0 Qml/CusButton/CusButton_ImageColorOverlay.qml
CusButton_Red 1.0 Qml/CusButton/CusButton_Red.qml
CusButton_White 1.0 Qml/CusButton/CusButton_White.qml
+CusButton 1.0 Qml/CusButton/CusButton.qml
CusRadioButton 1.0 Qml/CusButton/CusRadioButton.qml
+CusRoundTabButton 1.0 Qml/CusButton/CusRoundTabButton.qml
CusTextButton 1.0 Qml/CusButton/CusTextButton.qml
CusCheckBox 1.0 Qml/CusCheckBox/CusCheckBox.qml
CusSwitch 1.0 Qml/CusCheckBox/CusSwitch.qml
CusComboBox 1.0 Qml/CusComboBox/CusComboBox.qml
+CusImage_Tip 1.0 Qml/CusImage/CusImage_Tip.qml
CusImage 1.0 Qml/CusImage/CusImage.qml
CusImageOverlay 1.0 Qml/CusImage/CusImageOverlay.qml
-CusImage_Tip 1.0 Qml/CusImage/CusImage_Tip.qml
CusIPAddress 1.0 Qml/CusInput/CusIPAddress.qml
-CusTextField 1.0 Qml/CusInput/CusTextField.qml
CusTextField_Btn 1.0 Qml/CusInput/CusTextField_Btn.qml
CusTextField_Search 1.0 Qml/CusInput/CusTextField_Search.qml
CusTextField_Valid 1.0 Qml/CusInput/CusTextField_Valid.qml
+CusTextField 1.0 Qml/CusInput/CusTextField.qml
CusTextInput 1.0 Qml/CusInput/CusTextInput.qml
-CusLabel 1.0 Qml/CusLabel/CusLabel.qml
CusLabel_Center 1.0 Qml/CusLabel/CusLabel_Center.qml
CusLabel_Left 1.0 Qml/CusLabel/CusLabel_Left.qml
+CusLabel 1.0 Qml/CusLabel/CusLabel.qml
CusListView 1.0 Qml/CusListView/CusListView.qml
CusPopup 1.0 Qml/CusPopup/CusPopup.qml
CusToolTip_Triangle 1.0 Qml/CusPopup/CusToolTip_Triangle.qml
CusTriangleTipBorder 1.0 Qml/CusPopup/CusTriangleTipBorder.qml
CusScrollBar 1.0 Qml/CusScroll/CusScrollBar.qml
-CusSlider 1.0 Qml/CusSlider/CusSlider.qml
CusSlider_Spin 1.0 Qml/CusSlider/CusSlider_Spin.qml
-CusSpinBox 1.0 Qml/CusSpinBox/CusSpinBox.qml
+CusSlider 1.0 Qml/CusSlider/CusSlider.qml
CusSpinBox_HourMinute 1.0 Qml/CusSpinBox/CusSpinBox_HourMinute.qml
+CusSpinBox 1.0 Qml/CusSpinBox/CusSpinBox.qml
singleton CusTableConstant 1.0 Qml/CusTable/CusTableConstant.qml
CusTableHeader 1.0 Qml/CusTable/CusTableHeader.qml
CusTableRow 1.0 Qml/CusTable/CusTableRow.qml