about.html Example File
webenginewidgets/webui/about.html<!DOCTYPE html> <html> <head> <title>Qt WebEngine WebUI Example</title> <style> html { background: #f0f0f0; color: #303030; font: 16px system-ui; height: 100%; } body { margin: 0; padding: 0; height: 100%; display: flex; flex-direction: column; align-items: stretch; } body > * { padding-left: 20px; padding-right: 20px; } header { flex: none; display: flex; align-items: center; background: #f0fff0; border-bottom: 1px solid #e0e0e0; padding-top: 20px; padding-bottom: 20px; } header > h1 { font: bold 20px system-ui; margin-left: 18px; } main { flex: auto; } footer { flex: none; display: flex; justify-content: center; padding-bottom: 20px; } button { background: #41cd52; color: #f0f0f0; font: 16px system-ui; border: 0; box-shadow: 0px 1px 3px rgb(0,0,0,0.5); cursor: pointer; margin: 0 0 1px; padding: 10px 24px; } button:hover { background: #50dc61; } button:active { background: #50dc61; box-shadow: 0px 1px 2px rgb(0,0,0,0.5); margin: 1px 0 0; } button:focus { outline: 0; } </style> </head> <body> <header> <img width="48px" height="48px" src="qrc:/qt-project.org/qmessagebox/images/qtlogo-64.png"> <h1>WebEngine Widgets<br>WebUI Example</h1> </header> <main> <p> Aside from the built-in schemes, such as <code>http</code> and <code>qrc</code>, Qt WebEngine may be extended with <em>custom schemes</em> by creating <em>custom scheme handlers</em>. </p> <p> This is a simple HTML page loaded from a custom scheme and displayed by a <code>QWebEngineView</code>. Even the Quit button below is a standard HTML <code><button></code> element. </p> <p> Read the documentation to find out </p> <ul> <li> <p> How to create a custom scheme handler which serves HTML and handles HTML form submissions. </p> </li> <li> <p> How to prevent ordinary web content from accessing the custom scheme. </p> </li> <li> <p> How to prevent any other scheme from submitting HTML form data. </p> </li> </ul> </main> <footer> <form action="" method="post"> <button name="quit">Quit</button> </form> </footer> </body> </html>