QT/qt-material
1
0
Fork 0
mirror of https://github.com/UN-GCPDS/qt-material.git synced 2025-01-13 16:42:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update documentation

Browse Source
This commit is contained in:
Yeison 2020-12-13 16:35:34 -05:00
parent dd7559f9f2
commit 201d8762aa
4 changed files with 274 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
README.md
View File

@ -1,4 +1,4 @@
Qt Material
Qt-Material
===========
This is another stylesheet for **PySide6**, **PySide2** and **PyQt5**, which looks like Material Design (close enough).
@ -16,6 +16,18 @@ There is some custom dark themes:
And light:
![light](https://github.com/UN-GCPDS/qt-material/raw/master/docs/source/notebooks/_images/light.gif)
## Navigation
* [Install](#install)
* [Usage](#Usage)
* [Themes](#Themes)
* [Custom colors](#Custom-colors)
* [Usage](#Usage)
* [Light themes](#Light-themes)
* [Run examples](#Run-examples)
* [New themes](#New-themes)
* [Change theme in runtime](##Change-theme-in-runtime)
## Install
@ -127,9 +139,64 @@ cd test
python main.py --PySide6
```
![theme](https://github.com/UN-GCPDS/qt-material/raw/master/docs/source/notebooks/_images/theme.gif)\
![](https://github.com/UN-GCPDS/qt-material/raw/master/docs/source/notebooks/_images/theme.gif)
## New themes
Do you have a custom theme? it looks good? create a [pull request](https://github.com/UN-GCPDS/qt-material/pulls) in [themes folder](https://github.com/UN-GCPDS/qt-material/tree/master/qt_material/themes>) and share it with all users.
## Change theme in runtime
There is a `qt_material.QtStyleTools` class that must be inherited along to `QMainWindow` for change themes in runtime using the `apply_stylesheet()` method.
```python
class RuntimeStylesheets(QMainWindow, QtStyleTools):
def __init__(self):
super().__init__()
self.main = QUiLoader().load('main_window.ui', self)
self.apply_stylesheet(self.main, 'dark_teal.xml')
# self.apply_stylesheet(self.main, 'light_red.xml')
# self.apply_stylesheet(self.main, 'light_blue.xml')
```
![](_images/runtime.gif)
### Integrate stylesheets in a menu
A custom _stylesheets menu_ can be added to a project for switching across all default available themes.
```python
class RuntimeStylesheets(QMainWindow, QtStyleTools):
def __init__(self):
super().__init__()
self.main = QUiLoader().load('main_window.ui', self)
self.add_menu_theme(self.main, self.main.menuStyles)
```
![](_images/runtime_menu.gif)
## Create new themes
A simple interface is available to modify a theme in runtime, this feature can be used to create a new theme, the theme file is created in the main directory as `my_theme.xml`
```python
class RuntimeStylesheets(QMainWindow, QtStyleTools):
def __init__(self):
super().__init__()
self.main = QUiLoader().load('main_window.ui', self)
self.show_dock_theme(self.main)
```
![](_images/runtime_dock.gif)
A full set of examples are available in the [exmaples directory](https://github.com/UN-GCPDS/qt-material/blob/master/examples/runtime/)

2
docs/source/conf.py
View File

@ -137,7 +137,7 @@ html_sidebars = {
'**': [
# 'about.html',
# 'globaltoc.html',
'navigation.html',
# 'navigation.html',
'relations.html',
# sourcelink.html
'searchbox.html',

123
docs/source/notebooks/readme.ipynb
View File

@ -4,7 +4,7 @@
"cell_type": "markdown",
"metadata": {},
"source": [
"Qt Material\n",
"Qt-Material\n",
"===========\n",
"This is another stylesheet for **PySide6**, **PySide2** and **PyQt5**, which looks like Material Design (close enough).\n",
"\n",
@ -28,6 +28,23 @@
"![light](_images/light.gif)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Navigation\n",
"\n",
" * [Install](#install)\n",
" * [Usage](#Usage)\n",
" * [Themes](#Themes)\n",
" * [Custom colors](#Custom-colors)\n",
" * [Usage](#Usage)\n",
" * [Light themes](#Light-themes)\n",
" * [Run examples](#Run-examples)\n",
" * [New themes](#New-themes)\n",
" * [Change theme in runtime](##Change-theme-in-runtime)"
]
},
{
"cell_type": "markdown",
"metadata": {},
@ -214,7 +231,7 @@
"cell_type": "markdown",
"metadata": {},
"source": [
"![theme](_images/theme.gif)\\"
"![](_images/theme.gif)"
]
},
{
@ -225,6 +242,108 @@
"\n",
"Do you have a custom theme? it looks good? create a [pull request](https://github.com/UN-GCPDS/qt-material/pulls) in [themes folder](https://github.com/UN-GCPDS/qt-material/tree/master/qt_material/themes>) and share it with all users.\n"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Change theme in runtime\n",
"\n",
"There is a `qt_material.QtStyleTools` class that must be inherited along to `QMainWindow` for change themes in runtime using the `apply_stylesheet()` method."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"class RuntimeStylesheets(QMainWindow, QtStyleTools):\n",
" \n",
" def __init__(self):\n",
" super().__init__()\n",
" self.main = QUiLoader().load('main_window.ui', self)\n",
" \n",
" self.apply_stylesheet(self.main, 'dark_teal.xml')\n",
" # self.apply_stylesheet(self.main, 'light_red.xml')\n",
" # self.apply_stylesheet(self.main, 'light_blue.xml')"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"![](_images/runtime.gif)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Integrate stylesheets in a menu\n",
"\n",
"A custom _stylesheets menu_ can be added to a project for switching across all default available themes."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"class RuntimeStylesheets(QMainWindow, QtStyleTools):\n",
" \n",
" def __init__(self):\n",
" super().__init__()\n",
" self.main = QUiLoader().load('main_window.ui', self)\n",
" \n",
" self.add_menu_theme(self.main, self.main.menuStyles)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"![](_images/runtime_menu.gif)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Create new themes\n",
"\n",
"A simple interface is available to modify a theme in runtime, this feature can be used to create a new theme, the theme file is created in the main directory as `my_theme.xml`"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"class RuntimeStylesheets(QMainWindow, QtStyleTools):\n",
" \n",
" def __init__(self):\n",
" super().__init__()\n",
" self.main = QUiLoader().load('main_window.ui', self)\n",
" \n",
" self.show_dock_theme(self.main)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"![](_images/runtime_dock.gif)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"A full set of examples are available in the [exmaples directory](https://github.com/UN-GCPDS/qt-material/blob/master/examples/runtime/)"
]
}
],
"metadata": {

86
docs/source/notebooks/readme.rst
View File

@ -1,4 +1,4 @@
Qt Material
Qt-Material
===========
This is another stylesheet for **PySide6**, **PySide2** and **PyQt5**,
@ -23,6 +23,19 @@ There is some custom dark themes: |dark| And light: |light|
.. |dark| image:: _images/dark.gif
.. |light| image:: _images/light.gif
Navigation
----------
- `Install <#install>`__
- `Usage <#Usage>`__
- `Themes <#Themes>`__
- `Custom colors <#Custom-colors>`__
- `Usage <#Usage>`__
- `Light themes <#Light-themes>`__
- `Run examples <#Run-examples>`__
- `New themes <#New-themes>`__
- `Change theme in runtime <##Change-theme-in-runtime>`__
Install
-------
@ -143,9 +156,9 @@ available to test all themes and **create new ones**.
cd test
python main.py --PySide6
| |theme|
|image1|
.. |theme| image:: _images/theme.gif
.. |image1| image:: _images/theme.gif
New themes
----------
@ -154,3 +167,70 @@ Do you have a custom theme? it looks good? create a `pull
request <https://github.com/UN-GCPDS/qt-material/pulls>`__ in `themes
folder <https://github.com/UN-GCPDS/qt-material/tree/master/qt_material/themes%3E>`__
and share it with all users.
Change theme in runtime
-----------------------
There is a ``qt_material.QtStyleTools`` class that must be inherited
along to ``QMainWindow`` for change themes in runtime using the
``apply_stylesheet()`` method.
.. code:: ipython3
class RuntimeStylesheets(QMainWindow, QtStyleTools):
def __init__(self):
super().__init__()
self.main = QUiLoader().load('main_window.ui', self)
self.apply_stylesheet(self.main, 'dark_teal.xml')
# self.apply_stylesheet(self.main, 'light_red.xml')
# self.apply_stylesheet(self.main, 'light_blue.xml')
|image1|
.. |image1| image:: _images/runtime.gif
Integrate stylesheets in a menu
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
A custom *stylesheets menu* can be added to a project for switching
across all default available themes.
.. code:: ipython3
class RuntimeStylesheets(QMainWindow, QtStyleTools):
def __init__(self):
super().__init__()
self.main = QUiLoader().load('main_window.ui', self)
self.add_menu_theme(self.main, self.main.menuStyles)
|image1|
.. |image1| image:: _images/runtime_menu.gif
Create new themes
-----------------
A simple interface is available to modify a theme in runtime, this
feature can be used to create a new theme, the theme file is created in
the main directory as ``my_theme.xml``
.. code:: ipython3
class RuntimeStylesheets(QMainWindow, QtStyleTools):
def __init__(self):
super().__init__()
self.main = QUiLoader().load('main_window.ui', self)
self.show_dock_theme(self.main)
|image1|
.. |image1| image:: _images/runtime_dock.gif
A full set of examples are available in the `exmaples
directory <https://github.com/UN-GCPDS/qt-material/blob/master/examples/runtime/>`__