Compare commits
2 Commits
d3c166b6ef
...
ff86f229fd
| Author | SHA1 | Date |
|---|---|---|
 Mentalflow
|
ff86f229fd
|
|
|
Mentalflow
|
a71bb911c8
|
|
|
@ -13,6 +13,16 @@
|
|||
- [1.3.3 图标按钮](#133-图标按钮)
|
||||
- [1.3.3.1 代码](#1331-代码)
|
||||
- [1.3.3.2 代码预览](#1332-代码预览)
|
||||
- [2.RibbonSwitchButton](#2ribbonswitchbutton)
|
||||
- [2.1 概述](#21-概述)
|
||||
- [2.2 属性](#22-属性)
|
||||
- [2.3 示例代码](#23-示例代码)
|
||||
- [2.3.1 显示抓握指示器文本的开关](#231-显示抓握指示器文本的开关)
|
||||
- [2.3.1.1 代码](#2311-代码)
|
||||
- [2.3.1.2 代码预览](#2312-代码预览)
|
||||
- [2.3.2 不显示抓握指示器文本的开关](#232-不显示抓握指示器文本的开关)
|
||||
- [2.3.2.1 代码](#2321-代码)
|
||||
- [2.3.2.2 代码预览](#2322-代码预览)
|
||||
|
||||
## 1.RibbonButton
|
||||
### 1.1 概述
|
||||
|
|
@ -122,3 +132,75 @@ RibbonButton{
|
|||
</div>
|
||||
<p align="center">Icon button</p>
|
||||
</div>
|
||||
|
||||
## 2.RibbonSwitchButton
|
||||
### 2.1 概述
|
||||
+ 父类：Button
|
||||
+ 展示：
|
||||
<div align="center">
|
||||
<div align="center">
|
||||
<img src="../pictures/RibbonSwitchButton/RSB-light.png" alt="RibbonSwitchButton Light Style" style="width:30%; height:auto;">
|
||||
<img src="../pictures/RibbonSwitchButton/RSB-dark.png" alt="RibbonSwitchButton Dark Style" style="width:30%; height:auto;">
|
||||
</div>
|
||||
<p align="center">RibbonSwitchButton Light/Dark Style</p>
|
||||
</div>
|
||||
|
||||
### 2.2 属性
|
||||
<!-- | `` | ``， | |-->
|
||||
| 名称 | 说明 | 示例图片 |
|
||||
|:----:|:----:|:----:|
|
||||
| `isDarkMode` | `bool`, 夜间模式，默认由`RibbonTheme`的同名属性控制 | \ |
|
||||
| `showGrabberText` | `bool`，显示抓握指示器的文本，默认文本为`Open`/`Close` |  |
|
||||
| `grabberText` | `string`，默认为开关被选中（checked）时为`Open`，否则为`Close` | \ |
|
||||
| `textColor` | `string`，开关的标签文本颜色，默认夜间模式为`white`，反之为`black` |  |
|
||||
| `textSize` | `int`，开关的标签文本大小 | \ |
|
||||
| `grabberCheckedColor` | `string`，开关被选中情况下抓握指示器的背景颜色，默认夜间模式下为`#8AAAEB`，反之为`#2850A4` |  |
|
||||
| `grabberUncheckedColor` | `string`，开关未被选中情况下抓握指示器的背景颜色，默认夜间模式下为`#292929`，反之为`white` |  |
|
||||
| `grabberTextCheckedColor` | `string`，开关被选中情况下抓握指示器的文本颜色，默认夜间模式下为`black`，反之为`white` |  |
|
||||
| `grabberTextUncheckedColor` | `string`，开关未被选中情况下抓握指示器的文本颜色，默认夜间模式下为`white`，反之为`black` |  |
|
||||
| `grabberColor` | `string`，抓握指示器颜色 |  |
|
||||
| `borderColor` | `string`，开关的边框颜色，默认夜间模式下为`white`，反之为`#616161` |  |
|
||||
| `borderWidth` | `real`，开关的边框宽度，默认为`1.4` |  |
|
||||
| `textBold` | `bool`，开关标签文本粗体显示，默认为`false` | \ |
|
||||
| `textOnLeft` | `bool`，开关标签文本显示在开关左边，默认为`false` |  |
|
||||
| `showTooltip` | `bool`, 显示按钮提示浮窗，默认为`False` | \ |
|
||||
| `tipText` | `string`， 按钮提示文本 | \ |
|
||||
|
||||
### 2.3 示例代码
|
||||
#### 2.3.1 显示抓握指示器文本的开关
|
||||
##### 2.3.1.1 代码
|
||||
```qml
|
||||
RibbonSwitchButton{
|
||||
text: "Button"
|
||||
showGrabberText: true // 显示抓握指示器的文本
|
||||
textOnLeft: false // 让开关标签显示在开关左边
|
||||
grabberCheckedColor: "indigo" // 抓握指示器颜色
|
||||
}
|
||||
```
|
||||
|
||||
##### 2.3.1.2 代码预览
|
||||
<div align="center">
|
||||
<div align="center">
|
||||
<img src="../pictures/RibbonSwitchButton/RSB-switchWithGrabberText.png" alt="RibbonSwitchButton With Grabber Text" style="width:20%; height:auto;">
|
||||
</div>
|
||||
<p align="center">RibbonSwitchButton With Grabber Text</p>
|
||||
</div>
|
||||
|
||||
#### 2.3.2 不显示抓握指示器文本的开关
|
||||
##### 2.3.2.1 代码
|
||||
```qml
|
||||
RibbonSwitchButton{
|
||||
text: "Button"
|
||||
showGrabberText: false // 显示抓握指示器的文本
|
||||
textOnLeft: false // 让开关标签显示在开关左边
|
||||
grabberCheckedColor: "indigo" // 抓握指示器颜色
|
||||
}
|
||||
```
|
||||
|
||||
##### 2.3.2.2 代码预览
|
||||
<div align="center">
|
||||
<div align="center">
|
||||
<img src="../pictures/RibbonSwitchButton/RSB-switchWithoutGrabberText.png" alt="RibbonSwitchButton With Grabber Text" style="width:20%; height:auto;">
|
||||
</div>
|
||||
<p align="center">RibbonSwitchButton Without Grabber Text</p>
|
||||
</div>
|
||||
|
|
@ -13,11 +13,21 @@
|
|||
- [1.3.3 Icon Button](#133-icon-button)
|
||||
- [1.3.3.1 Code](#1331-code)
|
||||
- [1.3.3.2 Code Preview](#1332-code-preview)
|
||||
- [2.RibbonSwitchButton](#2ribbonswitchbutton)
|
||||
- [2.1 Overview](#21-overview)
|
||||
- [2.2 Properties](#22-properties)
|
||||
- [2.3 Example Code](#23-example-code)
|
||||
- [2.3.1 Switch with Grabber Indicator Text](#231-switch-with-grabber-indicator-text)
|
||||
- [2.3.1.1 Code](#2311-code)
|
||||
- [2.3.1.2 Code Preview](#2312-code-preview)
|
||||
- [2.3.2 Switch without Grabber Indicator Text](#232-switch-without-grabber-indicator-text)
|
||||
- [2.3.2.1 Code](#2321-code)
|
||||
- [2.3.2.2 Code Preview](#2322-code-preview)
|
||||
|
||||
## 1.RibbonButton
|
||||
### 1.1 Overview
|
||||
+ Parent：Button
|
||||
+ Demonstrate：
|
||||
+ Demonstrate:
|
||||
<div align="center">
|
||||
<div align="center">
|
||||
<img src="../pictures/RibbonButton/RB-light.png" alt="RibbonButton Light Style" style="width:30%; height:auto;">
|
||||
|
|
@ -122,3 +132,75 @@ RibbonButton{
|
|||
</div>
|
||||
<p align="center">Icon button</p>
|
||||
</div>
|
||||
|
||||
## 2.RibbonSwitchButton
|
||||
### 2.1 Overview
|
||||
+ Parent class: Button
|
||||
+ Demonstrate:
|
||||
<div align="center">
|
||||
<div align="center">
|
||||
<img src="../pictures/RibbonSwitchButton/RSB-light.png" alt="RibbonSwitchButton Light Style" style="width:30%; height:auto;">
|
||||
<img src="../pictures/RibbonSwitchButton/RSB-dark.png" alt="RibbonSwitchButton Dark Style" style="width:30%; height:auto;">
|
||||
</div>
|
||||
<p align="center">RibbonSwitchButton Light/Dark Style</p>
|
||||
</div>
|
||||
|
||||
### 2.2 Properties
|
||||
<!-- | `` | ``， | |-->
|
||||
| Name | Description | Example Image |
|
||||
|:----:|:----:|:----:|
|
||||
| `isDarkMode` | `bool`, Night mode, controlled by the same-named property of `RibbonTheme` by default | \ |
|
||||
| `showGrabberText` | `bool`, Display the text of the grabber indicator, default text is `Open`/`Close` |  |
|
||||
| `grabberText` | `string`, Default is `Open` when the switch is checked, otherwise `Close` | \ |
|
||||
| `textColor` | `string`, The color of the switch's label text, default is `white` in night mode, otherwise `black` |  |
|
||||
| `textSize` | `int`, The size of the switch's label text | \ |
|
||||
| `grabberCheckedColor` | `string`, The background color of the grabber indicator when the switch is checked, default is `#8AAAEB` in night mode, otherwise `#2850A4` |  |
|
||||
| `grabberUncheckedColor` | `string`, The background color of the grabber indicator when the switch is not checked, default is `#292929` in night mode, otherwise `white` |  |
|
||||
| `grabberTextCheckedColor` | `string`, The text color of the grabber indicator when the switch is checked, default is `black` in night mode, otherwise `white` |  |
|
||||
| `grabberTextUncheckedColor` | `string`, The text color of the grabber indicator when the switch is not checked, default is `white` in night mode, otherwise `black` |  |
|
||||
| `grabberColor` | `string`, The color of the grabber indicator |  |
|
||||
| `borderColor` | `string`, The border color of the switch, default is `white` in night mode, otherwise `#616161` |  |
|
||||
| `borderWidth` | `real`, The width of the switch's border, default is `1.4` |  |
|
||||
| `textBold` | `bool`, Display the switch label text in bold, default is `false` | \ |
|
||||
| `textOnLeft` | `bool`, Display the switch label text on the left side of the switch, default is `false` |  |
|
||||
| `showTooltip` | `bool`, Display button tooltip, default is `False` | \ |
|
||||
| `tipText` | `string`, Button tooltip text | \ |
|
||||
|
||||
### 2.3 Example Code
|
||||
#### 2.3.1 Switch with Grabber Indicator Text
|
||||
##### 2.3.1.1 Code
|
||||
```qml
|
||||
RibbonSwitchButton{
|
||||
text: "Button"
|
||||
showGrabberText: true // Display the text of the grabber indicator
|
||||
textOnLeft: false // Let the switch label display on the left side of the switch
|
||||
grabberCheckedColor: "indigo" // The color of the grabber indicator
|
||||
}
|
||||
```
|
||||
|
||||
##### 2.3.1.2 Code Preview
|
||||
<div align="center">
|
||||
<div align="center">
|
||||
<img src="../pictures/RibbonSwitchButton/RSB-switchWithGrabberText.png" alt="RibbonSwitchButton With Grabber Text" style="width:20%; height:auto;">
|
||||
</div>
|
||||
<p align="center">RibbonSwitchButton With Grabber Text</p>
|
||||
</div>
|
||||
|
||||
#### 2.3.2 Switch without Grabber Indicator Text
|
||||
##### 2.3.2.1 Code
|
||||
```qml
|
||||
RibbonSwitchButton{
|
||||
text: "Button"
|
||||
showGrabberText: false // Do not display the text of the grabber indicator
|
||||
textOnLeft: false // Let the switch label display on the left side of the switch
|
||||
grabberCheckedColor: "indigo" // The color of the grabber indicator
|
||||
}
|
||||
```
|
||||
|
||||
##### 2.3.2.2 Code Preview
|
||||
<div align="center">
|
||||
<div align="center">
|
||||
<img src="../pictures/RibbonSwitchButton/RSB-switchWithoutGrabberText.png" alt="RibbonSwitchButton With Grabber Text" style="width:20%; height:auto;">
|
||||
</div>
|
||||
<p align="center">RibbonSwitchButton Without Grabber Text</p>
|
||||
</div>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
|
|
@ -57,6 +57,8 @@ RibbonBlur {
|
|||
}
|
||||
color: folded ? RibbonTheme.isDarkMode ? "black" : "white" : "transparent"
|
||||
height: control.implicitHeight - (folded ? handler.height : 0)
|
||||
topLeftRadius: RibbonTheme.modernStyle && RibbonWindow.window && RibbonWindow.window.tabBar && RibbonWindow.window.tabBar.folded ? 10 : 0
|
||||
topRightRadius: topLeftRadius
|
||||
bottomLeftRadius: RibbonTheme.modernStyle && folded ? 10 : 0
|
||||
bottomRightRadius: bottomLeftRadius
|
||||
ListView{
|
||||
|
|
|
|||
|
|
@ -57,6 +57,8 @@ RibbonBlur {
|
|||
}
|
||||
color: folded ? RibbonTheme.isDarkMode ? "black" : "white" : "transparent"
|
||||
height: control.implicitHeight - (folded ? handler.height : 0)
|
||||
topLeftRadius: RibbonTheme.modernStyle && RibbonWindow.window && RibbonWindow.window.tabBar && RibbonWindow.window.tabBar.folded ? 10 : 0
|
||||
topRightRadius: topLeftRadius
|
||||
bottomLeftRadius: RibbonTheme.modernStyle && folded ? 10 : 0
|
||||
bottomRightRadius: bottomLeftRadius
|
||||
ListView{
|
||||
|
|
|
|||
Loading…
Reference in New Issue