Project: Remove all documents and add document website link.
|
|
@ -21,24 +21,24 @@ RibbonUI是一个参考微软Ribbon风格（即Office 2016后的风格）设计
|
|||
|
||||
***[点击这里观看示例程序演示视频(哔哩哔哩)](https://www.bilibili.com/video/BV1ES411P78Q/)***
|
||||
|
||||
***[点击阅读API参考文档](documents/menu(zh-cn).md)***
|
||||
***[点击阅读API参考文档](https://doc.ourdocs.cn/docs/)***
|
||||
|
||||
<div align="center">
|
||||
<img src="documents/pictures/demo/demo.gif" alt="Demo" style="width:100%; height:auto;">
|
||||
<img src="pictures/demo.gif" alt="Demo" style="width:100%; height:auto;">
|
||||
</div>
|
||||
<p align="center">Qt RibbonUI Demo</p>
|
||||
|
||||
<div align="center">
|
||||
<div align="center">
|
||||
<img src="documents/pictures/demo/home-light-classic.png" alt="Home Light Classic" style="width:45%; height:auto;">
|
||||
<img src="documents/pictures/demo/home-dark-classic.png" alt="Home Light Classic" style="width:45%; height:auto;">
|
||||
<img src="pictures/home-light-classic.png" alt="Home Light Classic" style="width:45%; height:auto;">
|
||||
<img src="pictures/home-dark-classic.png" alt="Home Light Classic" style="width:45%; height:auto;">
|
||||
</div>
|
||||
<p align="center">主界面浅色/深色主题 (经典风格) </p>
|
||||
</div>
|
||||
<div align="center">
|
||||
<div align="center">
|
||||
<img src="documents/pictures/demo/home-light-modern.png" alt="Home Light Modern" style="width:45%; height:auto;">
|
||||
<img src="documents/pictures/demo/home-dark-modern.png" alt="Home Light Modern" style="width:45%; height:auto;">
|
||||
<img src="pictures/home-light-modern.png" alt="Home Light Modern" style="width:45%; height:auto;">
|
||||
<img src="pictures/home-dark-modern.png" alt="Home Light Modern" style="width:45%; height:auto;">
|
||||
</div>
|
||||
<p align="center">主界面浅色/深色主题 (现代风格) </p>
|
||||
</div>
|
||||
|
|
@ -47,30 +47,30 @@ RibbonUI是一个参考微软Ribbon风格（即Office 2016后的风格）设计
|
|||
目前支持***43***种组件，后续会添加更多。
|
||||
| 名称 | 介绍 | 展示图片|
|
||||
|:----:|:----:|:----:|
|
||||
| RibbonWindow | 基于framelesshelper实现的无边框窗口，支持退出确认弹窗及模糊/亚克力化背景。||
|
||||
| RibbonTabBar | 支持多分组页面切换、自定义右上角工具栏、自由收放的工具栏，如同Word的。|  |
|
||||
| RibbonTitleBar | 支持自定义背景色、自由添加工具按钮的窗口标题栏，针对Windows和macOS有不同的窗口按钮设计。|  |
|
||||
| RibbonBottomBar | 支持添加自定义工具的底栏。 | |
|
||||
| RibbonBlur | 为各种组件提供模糊化效果 |  |
|
||||
| RibbonButton | 支持有/无背景的纯文字/纯图标/图标加文字的按钮，支持鼠标覆盖显示提示信息 |  |
|
||||
| RibbonPushButton | 支持弹出菜单的大图标按钮，可以使用内置图标库或用户自选图片 |  |
|
||||
| RibbonSlider | 支持水平或垂直放置的滑动控制条 |  |
|
||||
| RibbonIcon | 图标组件，内置图标数百个来自微软的精美图标 |  |
|
||||
| RibbonText | 文字组件，可以允许/禁止选中文字或复制 |  |
|
||||
| RibbonCheckBox | 选择框组件，可自定义是否显示文字、文字显示位置（左/右） |  |
|
||||
| RibbonSwitchButton | 开关按钮，支持自定义背景颜色、是否显示提示文字或按钮文字，可自由调整文字显示位置（左/右） |  |
|
||||
| RibbonTheme | 主题支持浅色、深色、跟随系统三种模式 |  |
|
||||
| RibbonMenu | 菜单组件，支持二元选择及子菜单 |  |
|
||||
| RibbonPopup | 自动居中的弹出式窗口 |  |
|
||||
| RibbonPopDialog | 支持二元或三元选择的弹出式窗口 |  |
|
||||
| RibbonLineEdit | 支持设置图标和一键清除的单行文本输入控件 |  |
|
||||
| RibbonTextEdit | 支持设置图标和一键清除的多行文本输入控件，可随文本输入自动换行/滚动 |  |
|
||||
| RibbonTextEdit | 支持设置图标和一键清除的多行文本输入控件，可随文本输入自动换行/滚动 |  |
|
||||
| RibbonComboBox | 支持设置图标的下拉菜单选择控件，菜单支持用户输入添加 |  |
|
||||
| RibbonSpinBox | 支持设置图标的旋钮控件 |  |
|
||||
| RibbonSpinBox | 支持设置图标的旋钮控件 |  |
|
||||
| RibbonView | 与TabBar和BottomBar搭配使用的界面容器组件，两组件模糊化的背景依赖它 |  |
|
||||
| RibbonPaperView | 类似Word中纸张的组件 |  |
|
||||
| RibbonWindow | 基于framelesshelper实现的无边框窗口，支持退出确认弹窗及模糊/亚克力化背景。||
|
||||
| RibbonTabBar | 支持多分组页面切换、自定义右上角工具栏、自由收放的工具栏，如同Word的。|  |
|
||||
| RibbonTitleBar | 支持自定义背景色、自由添加工具按钮的窗口标题栏，针对Windows和macOS有不同的窗口按钮设计。|  |
|
||||
| RibbonBottomBar | 支持添加自定义工具的底栏。 | |
|
||||
| RibbonBlur | 为各种组件提供模糊化效果 |  |
|
||||
| RibbonButton | 支持有/无背景的纯文字/纯图标/图标加文字的按钮，支持鼠标覆盖显示提示信息 |  |
|
||||
| RibbonPushButton | 支持弹出菜单的大图标按钮，可以使用内置图标库或用户自选图片 |  |
|
||||
| RibbonSlider | 支持水平或垂直放置的滑动控制条 |  |
|
||||
| RibbonIcon | 图标组件，内置图标数百个来自微软的精美图标 |  |
|
||||
| RibbonText | 文字组件，可以允许/禁止选中文字或复制 |  |
|
||||
| RibbonCheckBox | 选择框组件，可自定义是否显示文字、文字显示位置（左/右） |  |
|
||||
| RibbonSwitchButton | 开关按钮，支持自定义背景颜色、是否显示提示文字或按钮文字，可自由调整文字显示位置（左/右） |  |
|
||||
| RibbonTheme | 主题支持浅色、深色、跟随系统三种模式 |  |
|
||||
| RibbonMenu | 菜单组件，支持二元选择及子菜单 |  |
|
||||
| RibbonPopup | 自动居中的弹出式窗口 |  |
|
||||
| RibbonPopDialog | 支持二元或三元选择的弹出式窗口 |  |
|
||||
| RibbonLineEdit | 支持设置图标和一键清除的单行文本输入控件 |  |
|
||||
| RibbonTextEdit | 支持设置图标和一键清除的多行文本输入控件，可随文本输入自动换行/滚动 |  |
|
||||
| RibbonTextEdit | 支持设置图标和一键清除的多行文本输入控件，可随文本输入自动换行/滚动 |  |
|
||||
| RibbonComboBox | 支持设置图标的下拉菜单选择控件，菜单支持用户输入添加 |  |
|
||||
| RibbonSpinBox | 支持设置图标的旋钮控件 |  |
|
||||
| RibbonSpinBox | 支持设置图标的旋钮控件 |  |
|
||||
| RibbonView | 与TabBar和BottomBar搭配使用的界面容器组件，两组件模糊化的背景依赖它 |  |
|
||||
| RibbonPaperView | 类似Word中纸张的组件 |  |
|
||||
|
||||
其他组件的介绍会陆续更新。
|
||||
|
||||
|
|
|
|||
56
README.md
|
|
@ -22,24 +22,24 @@ RibbonUI is a lightweight, minimalist and elegant Qt component library written i
|
|||
|
||||
***[Click here to watch demo video(Bilibili)](https://www.bilibili.com/video/BV1ES411P78Q/)***
|
||||
|
||||
***[Click here to read the API documents](documents/menu.md)***
|
||||
***[Click here to read the API documents](https://doc.ourdocs.cn/docs/)***
|
||||
|
||||
<div align="center">
|
||||
<img src="documents/pictures/demo/demo.gif" alt="Demo" style="width:100%; height:auto;">
|
||||
<img src="pictures/demo.gif" alt="Demo" style="width:100%; height:auto;">
|
||||
</div>
|
||||
<p align="center">Qt RibbonUI Demo</p>
|
||||
|
||||
<div align="center">
|
||||
<div align="center">
|
||||
<img src="documents/pictures/demo/home-light-classic.png" alt="Home Light Classic" style="width:45%; height:auto;">
|
||||
<img src="documents/pictures/demo/home-dark-classic.png" alt="Home Light Classic" style="width:45%; height:auto;">
|
||||
<img src="pictures/home-light-classic.png" alt="Home Light Classic" style="width:45%; height:auto;">
|
||||
<img src="pictures/home-dark-classic.png" alt="Home Light Classic" style="width:45%; height:auto;">
|
||||
</div>
|
||||
<p align="center">Home Light/Dark Theme (Classic Style) </p>
|
||||
</div>
|
||||
<div align="center">
|
||||
<div align="center">
|
||||
<img src="documents/pictures/demo/home-light-modern.png" alt="Home Light Modern" style="width:45%; height:auto;">
|
||||
<img src="documents/pictures/demo/home-dark-modern.png" alt="Home Light Modern" style="width:45%; height:auto;">
|
||||
<img src="pictures/home-light-modern.png" alt="Home Light Modern" style="width:45%; height:auto;">
|
||||
<img src="pictures/home-dark-modern.png" alt="Home Light Modern" style="width:45%; height:auto;">
|
||||
</div>
|
||||
<p align="center">Home Light/Dark Theme (Modern Style) </p>
|
||||
</div>
|
||||
|
|
@ -48,28 +48,28 @@ RibbonUI is a lightweight, minimalist and elegant Qt component library written i
|
|||
Currently supports ***43*** components, more will be added later.
|
||||
| Components | Introduction | Demo Picture|
|
||||
|:----:|:----:|:----:|
|
||||
| RibbonWindow | A Window component that relies on framelesshelper to support exit confirmation popups and blur style backgrounds. ||
|
||||
| RibbonTabBar | A toolbar with support for page switching and retracting, and support for placing customized buttons in the upper right corner, just like Microsoft Word's. |  |
|
||||
| RibbonTitleBar | A window title bar that supports custom colors and the free addition of secondary buttons, with different designs for Windows and macOS. |  |
|
||||
| RibbonBottomBar | A bottom bar that supports adding custom tools. | |
|
||||
| RibbonBlur | Provides blurring effects for various components |  |
|
||||
| RibbonButton | A button that supports plain text/plain icons/icons and text with/without backgrounds, with mouse overlay support for displaying alert messages |  |
|
||||
| RibbonPushButton | A large icon button that supports pop-up menus, either using the built-in icon library or a user-selected image |  |
|
||||
| RibbonSlider | Support for horizontally or vertically placed slider |  |
|
||||
| RibbonIcon | Icon component, built-in hundreds of beautiful icons from Microsoft |  |
|
||||
| RibbonText | Text component that allows/disallows selection of text or copying |  |
|
||||
| RibbonCheckBox | Checkbox component, customizable whether to display text, where to display text (left/right) |  |
|
||||
| RibbonSwitchButton | Switch button, support for customizing the background color, whether to display the prompt text or button text, free to adjust the text display position (left/right) |  |
|
||||
| RibbonTheme | Theme support light color, dark color, follow system three modes |  |
|
||||
| RibbonMenu | Menu component with binary selection and submenu support |  |
|
||||
| RibbonPopup | Auto-centered pop-ups |  |
|
||||
| RibbonPopDialog | Popups supporting binary or ternary selection |  |
|
||||
| RibbonLineEdit | Single-line text input control with support for icons and one-click clearing |  |
|
||||
| RibbonTextEdit | Multi-line text input control with support for icons and one-click clearing, automatic line feed/scrolling as text is entered |  |
|
||||
| RibbonComboBox | Supports drop-down menu selection controls with icons, and menus can be added with user input. |  |
|
||||
| RibbonSpinBox | SpinBox with support for setting icons |  |
|
||||
| RibbonView | View container component for use with TabBar and BottomBar, from which the blurred backgrounds of both components are based. |  |
|
||||
| RibbonPaperView | Components similar to paper in Word |  |
|
||||
| RibbonWindow | A Window component that relies on framelesshelper to support exit confirmation popups and blur style backgrounds. ||
|
||||
| RibbonTabBar | A toolbar with support for page switching and retracting, and support for placing customized buttons in the upper right corner, just like Microsoft Word's. |  |
|
||||
| RibbonTitleBar | A window title bar that supports custom colors and the free addition of secondary buttons, with different designs for Windows and macOS. |  |
|
||||
| RibbonBottomBar | A bottom bar that supports adding custom tools. | |
|
||||
| RibbonBlur | Provides blurring effects for various components |  |
|
||||
| RibbonButton | A button that supports plain text/plain icons/icons and text with/without backgrounds, with mouse overlay support for displaying alert messages |  |
|
||||
| RibbonPushButton | A large icon button that supports pop-up menus, either using the built-in icon library or a user-selected image |  |
|
||||
| RibbonSlider | Support for horizontally or vertically placed slider |  |
|
||||
| RibbonIcon | Icon component, built-in hundreds of beautiful icons from Microsoft |  |
|
||||
| RibbonText | Text component that allows/disallows selection of text or copying |  |
|
||||
| RibbonCheckBox | Checkbox component, customizable whether to display text, where to display text (left/right) |  |
|
||||
| RibbonSwitchButton | Switch button, support for customizing the background color, whether to display the prompt text or button text, free to adjust the text display position (left/right) |  |
|
||||
| RibbonTheme | Theme support light color, dark color, follow system three modes |  |
|
||||
| RibbonMenu | Menu component with binary selection and submenu support |  |
|
||||
| RibbonPopup | Auto-centered pop-ups |  |
|
||||
| RibbonPopDialog | Popups supporting binary or ternary selection |  |
|
||||
| RibbonLineEdit | Single-line text input control with support for icons and one-click clearing |  |
|
||||
| RibbonTextEdit | Multi-line text input control with support for icons and one-click clearing, automatic line feed/scrolling as text is entered |  |
|
||||
| RibbonComboBox | Supports drop-down menu selection controls with icons, and menus can be added with user input. |  |
|
||||
| RibbonSpinBox | SpinBox with support for setting icons |  |
|
||||
| RibbonView | View container component for use with TabBar and BottomBar, from which the blurred backgrounds of both components are based. |  |
|
||||
| RibbonPaperView | Components similar to paper in Word |  |
|
||||
|
||||
***The introduction of other components will be updated later.***
|
||||
|
||||
|
|
|
|||
|
|
@ -1,227 +0,0 @@
|
|||
# 🔘按钮类组件
|
||||
- [🔘按钮类组件](#按钮类组件)
|
||||
- [1.RibbonButton](#1ribbonbutton)
|
||||
- [1.1 概述](#11-概述)
|
||||
- [1.2 属性](#12-属性)
|
||||
- [1.3 示例代码](#13-示例代码)
|
||||
- [1.3.1 普通按钮](#131-普通按钮)
|
||||
- [1.3.1.1 代码](#1311-代码)
|
||||
- [1.3.1.2 代码预览](#1312-代码预览)
|
||||
- [1.3.2 带图标的普通按钮](#132-带图标的普通按钮)
|
||||
- [1.3.2.1 代码](#1321-代码)
|
||||
- [1.3.2.2 代码预览](#1322-代码预览)
|
||||
- [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-代码预览)
|
||||
- [3.RibbonPushButton](#3ribbonpushbutton)
|
||||
- [3.1 概述](#31-概述)
|
||||
- [3.2 属性](#32-属性)
|
||||
|
||||
## 1.RibbonButton
|
||||
### 1.1 概述
|
||||
+ 父类：Button
|
||||
+ 展示：
|
||||
<div align="center">
|
||||
<div align="center">
|
||||
<img src="../pictures/RibbonButton/RB-light.png" alt="RibbonButton Light Style" style="width:30%; height:auto;">
|
||||
<img src="../pictures/RibbonButton/RB-dark.png" alt="RibbonButton Dark Style" style="width:30%; height:auto;">
|
||||
</div>
|
||||
<p align="center">RibbonButton Light/Dark Style</p>
|
||||
</div>
|
||||
|
||||
### 1.2 属性
|
||||
<!-- | `` | ``， | |-->
|
||||
| 名称 | 说明 | 示例图片 |
|
||||
|:----:|:----:|:----:|
|
||||
| `isDarkMode` | `bool`, 夜间模式，默认由`RibbonTheme`的同名属性控制 | \ |
|
||||
| `showBg` | `bool`, 显示按钮背景，默认为`True` |  |
|
||||
| `showHoveredBg` | `bool`, 显示鼠标覆盖背景，默认为`True` |   |
|
||||
| `adaptHeight` | `bool`, 自适应按键高度至父容器高度，默认为`False` |  |
|
||||
| `showTooltip` | `bool`, 显示按钮提示浮窗，默认为`True` |  |
|
||||
| `iconSource` | `var`, 按钮图标，支持输入图片链接（`qrc://`或`file://`）或者使用内嵌微软图标（`RibbonIcons`） |  |
|
||||
| `iconSourceFilled` | `var`，由于微软图标空心版和实心版对应的代码并不完全一致，当使用内嵌微软图标且仅使用`iconSource`时实心图标出现异常，请将`RibbonIcons`替换为`RibbonIcons_Filled`并为此属性赋值，如`RibbonIcons.Home -> RibbonIcons_Filled.Home` | \ |
|
||||
| `imageIcon` | `alias`, 供直接访问按钮的图片图标对象 | \ |
|
||||
| `ribbonIcon` | `alias`，供直接访问按钮的内嵌图标对象 | \ |
|
||||
| `bgColor` | `string`，定义按钮的背景颜色，默认会随着亮/暗色主题切换 | \ |
|
||||
| `hoverColor` | `string`，定义鼠标放在按钮上的颜色，默认会随着亮/暗色主题和是否显示按钮背景切换 | \ |
|
||||
| `pressedColor` | `string`，定义按钮按下的颜色，默认会随着亮/暗色主题和是否显示按钮背景切换 | \ |
|
||||
| `checkedColor` | `string`，定义按钮被选中时的颜色，默认与`pressedColor`一致 | \ |
|
||||
| `textColor` | `string`，定义按钮文字的颜色，默认亮色主题为黑，暗色主题为白 | \ |
|
||||
| `textColorReverse` | `bool`，文字颜色凸显，默认为`True`, 在按钮无背景时，按钮若被鼠标覆盖/按下/选中，按钮文字颜色会变淡以凸显（仅当使用深色时才明显，此属性有被取消的可能） | \ |
|
||||
|
||||
### 1.3 示例代码
|
||||
#### 1.3.1 普通按钮
|
||||
##### 1.3.1.1 代码
|
||||
```qml
|
||||
RibbonButton{
|
||||
text:"Button"
|
||||
}
|
||||
|
||||
RibbonButton{
|
||||
text:"Button"
|
||||
showTooltip: false //不显示按钮提示浮窗
|
||||
}
|
||||
```
|
||||
##### 1.3.1.2 代码预览
|
||||
<div align="center">
|
||||
<div align="center">
|
||||
<img src="../pictures/RibbonButton/RB-basicBtn.png" alt="RibbonButton Light Style" style="width:20%; height:auto;">
|
||||
</div>
|
||||
<p align="center">Basic button</p>
|
||||
</div>
|
||||
|
||||
#### 1.3.2 带图标的普通按钮
|
||||
##### 1.3.2.1 代码
|
||||
```qml
|
||||
RibbonButton{
|
||||
text:"Button"
|
||||
iconSource: RibbonIcons.Accessibility
|
||||
}
|
||||
|
||||
RibbonButton{
|
||||
text:"Button"
|
||||
showBg:false // 不显示背景
|
||||
iconSource: RibbonIcons.Beaker
|
||||
checkable: true // 可被选中
|
||||
}
|
||||
```
|
||||
##### 1.3.2.2 代码预览
|
||||
<div align="center">
|
||||
<div align="center">
|
||||
<img src="../pictures/RibbonButton/RB-basicBtnWithIcon.png" alt="RibbonButton Light Style" style="width:30%; height:auto;">
|
||||
</div>
|
||||
<p align="center">Basic button with icon</p>
|
||||
</div>
|
||||
|
||||
#### 1.3.3 图标按钮
|
||||
##### 1.3.3.1 代码
|
||||
```qml
|
||||
RibbonButton{
|
||||
showBg:false // 不显示背景
|
||||
iconSource: RibbonIcons.Badge
|
||||
iconSourceFilled: RibbonIcons_Filled.Badge // 定义实心图标
|
||||
checkable: true // 可被选中
|
||||
tipText: "Button" // 提示信息文本
|
||||
}
|
||||
RibbonButton{
|
||||
showBg:false
|
||||
iconSource: RibbonIcons.Clock
|
||||
iconSourceFilled: RibbonIcons_Filled.Clock
|
||||
tipText: "Button"
|
||||
}
|
||||
RibbonButton{
|
||||
showBg:false
|
||||
iconSource: RibbonIcons.Board
|
||||
iconSourceFilled: RibbonIcons_Filled.Board
|
||||
checkable: true
|
||||
tipText: "Button"
|
||||
showTooltip: false // 不显示提示信息
|
||||
}
|
||||
```
|
||||
##### 1.3.3.2 代码预览
|
||||
<div align="center">
|
||||
<div align="center">
|
||||
<img src="../pictures/RibbonButton/RB-iconBtn.png" alt="RibbonButton Light Style" style="width:5%; height:auto;">
|
||||
</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>
|
||||
|
||||
## 3.RibbonPushButton
|
||||
### 3.1 概述
|
||||
+ 父类：Item
|
||||
+ 展示：
|
||||
<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>
|
||||
|
||||
### 3.2 属性
|
||||
<!-- | `` | ``， | |-->
|
||||
| 名称 | 说明 | 示例图片 |
|
||||
|:----:|:----:|:----:|
|
||||
|
||||
|
|
@ -1,206 +0,0 @@
|
|||
# 🔘Button Components
|
||||
- [🔘Button Components](#button-components)
|
||||
- [1.RibbonButton](#1ribbonbutton)
|
||||
- [1.1 Overview](#11-overview)
|
||||
- [1.2 Properties](#12-properties)
|
||||
- [1.3 Example Code](#13-example-code)
|
||||
- [1.3.1 Basic Button](#131-basic-button)
|
||||
- [1.3.1.1 Code](#1311-code)
|
||||
- [1.3.1.2 Code Preview](#1312-code-preview)
|
||||
- [1.3.2 Basic Button With Icon](#132-basic-button-with-icon)
|
||||
- [1.3.2.1 Code](#1321-code)
|
||||
- [1.3.2.2 Code Preview](#1322-code-preview)
|
||||
- [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:
|
||||
<div align="center">
|
||||
<div align="center">
|
||||
<img src="../pictures/RibbonButton/RB-light.png" alt="RibbonButton Light Style" style="width:30%; height:auto;">
|
||||
<img src="../pictures/RibbonButton/RB-dark.png" alt="RibbonButton Dark Style" style="width:30%; height:auto;">
|
||||
</div>
|
||||
<p align="center">RibbonButton Light/Dark Style</p>
|
||||
</div>
|
||||
|
||||
### 1.2 Properties
|
||||
<!-- | `` | ``， | |-->
|
||||
| Name | Description | Demo picture |
|
||||
|:----:|:----:|:----:|
|
||||
| `isDarkMode` | `bool`, night mode, default is controlled by `RibbonTheme` property of the same name | \ |
|
||||
| `showBg` | `bool`, show button background, default is `True` |  |
|
||||
| `showHoveredBg` | `bool`, show mouse overlay background, default is `True` |   |
|
||||
| `adaptHeight` | `bool`, adapt the height of the button to the height of the parent container, default is `False` |  |
|
||||
| `showTooltip` | `bool`, show `Tooltip` floating window, default is `True` |  |
|
||||
| `iconSource` | `var`, button icon, support input image link (`qrc://` or `file://`) or use embedded Microsoft icons (`RibbonIcons`) |  |
|
||||
| `iconSourceFilled` | `var`，since the code for the hollow and solid versions of Microsoft icons are not fully matched, if the solid icon is abnormal when using inline Microsoft icons and only using iconSource, please replace `RibbonIcons` with `RibbonIcons_Filled` , just like `RibbonIcons.Home -> RibbonIcons_Filled.Home`, and assign the value to this attribute | \ |
|
||||
| `imageIcon` | `alias`, for direct access to button's image icon object | \ |
|
||||
| `ribbonIcon` | `alias`，for direct access to button's embeded icon object | \ |
|
||||
| `bgColor` | `string`，defines the background color of the button, by default it will switch with the light/dark theme | \ |
|
||||
| `hoverColor` | `string`，defines the color when the mouse over the button, default will switch with light/dark theme and whether to show the button background or not | \ |
|
||||
| `pressedColor` | `string`，define the color of the button pressed, default will switch with light/dark theme and whether to show button background or not | \ |
|
||||
| `checkedColor` | `string`，define the color of the button when it is checked, default is same as `pressedColor` | \ |
|
||||
| `textColor` | `string`，define the color of the button text, default is black for light theme and white for dark theme | \ |
|
||||
| `textColorReverse` | `bool`，text color rendering, default is `True`, when the button has no background, if the button is covered/pressed/selected by the mouse, the text color of the button will be lightened to render it as a highlight (only noticeable when dark color is used, this attribute has the possibility to be cancelled) | \ |
|
||||
|
||||
### 1.3 Example Code
|
||||
#### 1.3.1 Basic Button
|
||||
##### 1.3.1.1 Code
|
||||
```qml
|
||||
RibbonButton{
|
||||
text:"Button"
|
||||
}
|
||||
|
||||
RibbonButton{
|
||||
text:"Button"
|
||||
showTooltip: false // don't show the button tip floater
|
||||
}
|
||||
```
|
||||
##### 1.3.1.2 Code Preview
|
||||
<div align="center">
|
||||
<div align="center">
|
||||
<img src="../pictures/RibbonButton/RB-basicBtn.png" alt="RibbonButton Light Style" style="width:20%; height:auto;">
|
||||
</div>
|
||||
<p align="center">Basic button</p>
|
||||
</div>
|
||||
|
||||
#### 1.3.2 Basic Button With Icon
|
||||
##### 1.3.2.1 Code
|
||||
```qml
|
||||
RibbonButton{
|
||||
text:"Button"
|
||||
iconSource: RibbonIcons.Accessibility
|
||||
}
|
||||
|
||||
RibbonButton{
|
||||
text:"Button"
|
||||
showBg:false // don't show background
|
||||
iconSource: RibbonIcons.Beaker
|
||||
checkable: true // let it could be checked
|
||||
}
|
||||
```
|
||||
##### 1.3.2.2 Code Preview
|
||||
<div align="center">
|
||||
<div align="center">
|
||||
<img src="../pictures/RibbonButton/RB-basicBtnWithIcon.png" alt="RibbonButton Light Style" style="width:30%; height:auto;">
|
||||
</div>
|
||||
<p align="center">Basic button with icon</p>
|
||||
</div>
|
||||
|
||||
#### 1.3.3 Icon Button
|
||||
##### 1.3.3.1 Code
|
||||
```qml
|
||||
RibbonButton{
|
||||
showBg:false // don't show background
|
||||
iconSource: RibbonIcons.Badge
|
||||
iconSourceFilled: RibbonIcons_Filled.Badge // define solid icon
|
||||
checkable: true // let it could be checked
|
||||
tipText: "Button" // define the button tip floater's text
|
||||
}
|
||||
RibbonButton{
|
||||
showBg:false
|
||||
iconSource: RibbonIcons.Clock
|
||||
iconSourceFilled: RibbonIcons_Filled.Clock
|
||||
tipText: "Button"
|
||||
}
|
||||
RibbonButton{
|
||||
showBg:false
|
||||
iconSource: RibbonIcons.Board
|
||||
iconSourceFilled: RibbonIcons_Filled.Board
|
||||
checkable: true
|
||||
tipText: "Button"
|
||||
showTooltip: false // don't show the button tip floater
|
||||
}
|
||||
```
|
||||
##### 1.3.3.2 Code Preview
|
||||
<div align="center">
|
||||
<div align="center">
|
||||
<img src="../pictures/RibbonButton/RB-iconBtn.png" alt="RibbonButton Light Style" style="width:5%; height:auto;">
|
||||
</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>
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
# API 参考文档目录
|
||||
## 1. QML组件
|
||||
- [🔘按钮类组件](api/buttons(zh-cn).md)
|
||||
- [💡指示类组件](temp.md)
|
||||
- [🔤文本类组件](temp.md)
|
||||
- [🧭引导类组件](temp.md)
|
||||
- [📜选择类组件](temp.md)
|
||||
- [🧑💻界面类组件](temp.md)
|
||||
- [📒基础类组件](temp.md)
|
||||
- [⚙️其他辅助组件](temp.md)
|
||||
## 2. C++/Objective-C组件
|
||||
- [🌕主题](temp.md)
|
||||
- [💻平台支持](temp.md)
|
||||
- [🔧其他](temp.md)
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
# API Reference Documents Menu
|
||||
## 1. QML Components
|
||||
- [🔘Button Components](api/buttons.md)
|
||||
- [💡Indicator Components](temp.md)
|
||||
- [🔤Text Components](temp.md)
|
||||
- [🧭Guide Components](temp.md)
|
||||
- [📜Select Components](temp.md)
|
||||
- [🧑💻View Components](temp.md)
|
||||
- [📒Basic Components](temp.md)
|
||||
- [⚙️Other Components](temp.md)
|
||||
## 2. C++/Objective-C Components
|
||||
- [🌕Theme](temp.md)
|
||||
- [💻Platform Support](temp.md)
|
||||
- [🔧Others](temp.md)
|
||||
|
Before Width: | Height: | Size: 8.3 KiB |
|
Before Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 2.9 KiB |
|
Before Width: | Height: | Size: 4.7 KiB |
|
Before Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 5.4 KiB |
|
Before Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 3.6 KiB |
|
Before Width: | Height: | Size: 3.3 KiB |
|
Before Width: | Height: | Size: 4.1 KiB |
|
Before Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 4.5 KiB |
|
Before Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 3.6 KiB |
|
Before Width: | Height: | Size: 3.7 KiB |
|
|
@ -1,2 +0,0 @@
|
|||
# 仍在撰写中，请等待。
|
||||
# Still writing, please wait.
|
||||
|
Before Width: | Height: | Size: 134 KiB After Width: | Height: | Size: 134 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 61 KiB After Width: | Height: | Size: 61 KiB |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 193 KiB After Width: | Height: | Size: 193 KiB |
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 34 KiB |
|
Before Width: | Height: | Size: 64 KiB After Width: | Height: | Size: 64 KiB |
|
Before Width: | Height: | Size: 154 KiB After Width: | Height: | Size: 154 KiB |
|
Before Width: | Height: | Size: 131 KiB After Width: | Height: | Size: 131 KiB |
|
Before Width: | Height: | Size: 77 KiB After Width: | Height: | Size: 77 KiB |
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 41 KiB |
|
Before Width: | Height: | Size: 196 KiB After Width: | Height: | Size: 196 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 101 KiB After Width: | Height: | Size: 101 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 393 KiB After Width: | Height: | Size: 393 KiB |
|
Before Width: | Height: | Size: 4.8 MiB After Width: | Height: | Size: 4.8 MiB |
|
Before Width: | Height: | Size: 350 KiB After Width: | Height: | Size: 350 KiB |
|
Before Width: | Height: | Size: 533 KiB After Width: | Height: | Size: 533 KiB |
|
Before Width: | Height: | Size: 396 KiB After Width: | Height: | Size: 396 KiB |
|
Before Width: | Height: | Size: 502 KiB After Width: | Height: | Size: 502 KiB |