Material Design 3 for Qml

This is a library of Qml implementing Google's Material Design.

🌐 Live Demo

Dependencies

• Qt 6.8+

Doc

Work in progress

Installation

• Git LFS is required to clone fonts.

FetchContent_Declare(
  qml_material
  GIT_REPOSITORY https://github.com/hypengw/QmlMaterial.git
  GIT_TAG main
  # GIT_TAG <commit>
  EXCLUDE_FROM_ALL)
FetchContent_MakeAvailable(qml_material)

Usage

import Qcm.Material as MD

MD.Text {
  text: 'hello world'
}

Note

Never import Qcm.Material without as, unless you know what you are doing.

No QtQuick.Controls

This library only use QtQuick.Templates.
No needs to import QtQuick.Controls, unless you need control from Quick Control Style.

Some type annotations:

• not accept Action, use MD.Action instead
• not accept Attached Properties/Signals form QtQuick.Controls, use QtQuick.Templates as T

    import QtQuick.Templates as T
  
    T.Overlay.modal: ...
    T.ScrollBar.vertical: ...
    ...
  

Variation Icon

CMake option: QM_ICON_FONT_URL
The default is embedded static round icon with wght=400 opsz=24 GRAD=0 FILL=0/1.
There is also an embedded partial variation one: qrc:/Qcm/Material/assets/MaterialSymbolsRounded.wght_400.opsz_24.woff2.
Set the option to it if you need animation when switching FILL.

Note

The full variation font will cause huge memory usage. It's better to make partial with a font tool.

Acknowledgements

• material-color-utilities
• kirigami
• quickshell
• skia (principles behind shadow / blur mask math; BSD-3)