52 lines
31 KiB
HTML
52 lines
31 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<meta name="generator" content="Docusaurus v2.0.0-alpha.64">
|
|
<link rel="preconnect" href="https://www.google-analytics.com">
|
|
<script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","UA-145065218-1","auto"),ga("send","pageview")</script>
|
|
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
|
<link rel="search" type="application/opensearchdescription+xml" title="NodeGui" href="/opensearch.xml"><title data-react-helmet="true">styling | NodeGui</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="styling | NodeGui"><meta data-react-helmet="true" name="description" content="How styling works?"><meta data-react-helmet="true" property="og:description" content="How styling works?"><meta data-react-helmet="true" property="og:url" content="https://nodegui.org/docs/development/styling"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="true"><link data-react-helmet="true" rel="canonical" href="https://nodegui.org/docs/development/styling"><link rel="stylesheet" href="/styles.920797bd.css">
|
|
<link rel="preload" href="/styles.c64f7c7d.js" as="script">
|
|
<link rel="preload" href="/runtime~main.fb390718.js" as="script">
|
|
<link rel="preload" href="/main.d30558ed.js" as="script">
|
|
<link rel="preload" href="/1.c3df9058.js" as="script">
|
|
<link rel="preload" href="/2.73955132.js" as="script">
|
|
<link rel="preload" href="/3.ab57b632.js" as="script">
|
|
<link rel="preload" href="/1be78505.f51e3f10.js" as="script">
|
|
<link rel="preload" href="/402.796e35e3.js" as="script">
|
|
<link rel="preload" href="/935f2afb.3bfe93cd.js" as="script">
|
|
<link rel="preload" href="/17896441.5cec6d39.js" as="script">
|
|
<link rel="preload" href="/293d2a98.540bed9d.js" as="script">
|
|
</head>
|
|
<body>
|
|
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
|
<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/logo-circle.png" alt="NodeGui Logo"><strong class="navbar__title">NodeGui</strong></a></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/guides/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/api/manual/synopsis">API</a><a class="navbar__item navbar__link" href="/blog">Blog</a><a href="https://github.com/nodegui/nodegui" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/logo-circle.png" alt="NodeGui Logo"><strong class="navbar__title">NodeGui</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/guides/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/api/manual/synopsis">API</a></li><li class="menu__list-item"><a class="menu__link" href="/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/nodegui/nodegui" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">styling</h1></header><div class="markdown"><h1><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="how-styling-works"></a>How styling works?<a aria-hidden="true" tabindex="-1" class="hash-link" href="#how-styling-works" title="Direct link to heading">#</a></h1><p>There are two parts to styling.</p><ol><li>Layout</li><li>Painting : Colors, text color, etc</li></ol><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="painting"></a>Painting<a aria-hidden="true" tabindex="-1" class="hash-link" href="#painting" title="Direct link to heading">#</a></h2><p>The regular styles such as text color, font-size, font weight etc are achieved using Qt's stylesheet.
|
|
We just call Qt's setStyleSheet method on the native widget and pass in the styles as a string.</p><p>This method is implemented as part of <code>QWIDGET_WRAPPED_METHODS_DECLARATION</code> in <code>qwidget_macro.h</code>.
|
|
So all widgets using this macro will get the setStyleSheet method.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="layout"></a>Layout<a aria-hidden="true" tabindex="-1" class="hash-link" href="#layout" title="Direct link to heading">#</a></h2><p>Layouting is basically positioning widgets on the screen. It takes into account everything from margins, paddings, positions etc. Our main focus will be Flex layouting. For flex layout we are using yoga library from facebook. This is the same library used by React Native. Before looking at flaxlayout in this libarary I recommend browsing Yoga's C API doc here: <code>deps/yoga/doc.md</code></p><p>In case <code>nodegui</code>. I have implemented a custom Qt layout by extending <code>QLayout</code>, hence Qt is able to take over automagically when window is resized or any other layouting event occurs.
|
|
You can find the implementation at <code>src/cpp/core/FlexLayout/flexlayout.h</code>.</p><p>The c++ api provided by this custom layout looks like this:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-cpp codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// FlexLayout is a custom Layout built for QT. This layout will be used to layout qt widgets using facebook's yoga library.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// Thus giving ability to layout Qt Widgets using Flexbox.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// Usage:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"> QWidget </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain">container </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">new</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">QWidget</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"> YGNodeRef root </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">YGNodeNew</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"> YGNodeRef child1 </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">YGNodeNew</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"> YGNodeRef child2 </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">YGNodeNew</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"> FlexLayout </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain"> flayout </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">new</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">FlexLayout</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">container</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain">root</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// or FlexLayout * flayout = new FlexLayout(container);</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// or FlexLayout *flayout = new FlexLayout();</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
|
|
</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"> flayout</span><span class="token operator" style="color:rgb(137, 221, 255)">-></span><span class="token function" style="color:rgb(130, 170, 255)">addWidget</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">btn1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> child1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"> flayout</span><span class="token operator" style="color:rgb(137, 221, 255)">-></span><span class="token function" style="color:rgb(130, 170, 255)">addWidget</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">btn2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> child2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
|
|
</span></div></div></div></div></div><p>This layout is exported to Javascript side via <code>src/cpp/core/FlexLayout/flexlayout_wrap.h</code></p><p>The JS Api looks like this:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-js codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">const</span><span class="token plain"> view </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">new</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 107)">QWidget</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">rootView</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
|
|
</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">const</span><span class="token plain"> flayout </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">new</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 107)">FlexLayout</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// Create layout</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">flayout</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">setFlexNode</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">view</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">getFlexNode</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// Set widget's flex as layout's flex node.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
|
|
</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">view</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">setLayout</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">flayout</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// set layout as view's layout</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
|
|
</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">const</span><span class="token plain"> label </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">new</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 107)">QLabel</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">view</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">label</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">setText</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">"Hello12321"</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
|
|
</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">const</span><span class="token plain"> label2 </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">new</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 107)">QLabel</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">view</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">label2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">setText</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">"SECOND LABEL"</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
|
|
</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">flayout</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">addWidget</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">getFlexNode</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// Add child to layout</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">flayout</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">addWidget</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">getFlexNode</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// Add child to layout</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="implementation"></a>Implementation<a aria-hidden="true" tabindex="-1" class="hash-link" href="#implementation" title="Direct link to heading">#</a></h3><ol><li><p>Every widget that wants to use flex layout should extend from <code>flexItem</code> found at <code>src/cpp/core/FlexLayout/flexitem.h</code>.
|
|
For example, see <code>nlabel.h</code> at <code>src/cpp/QtWidgets/QLabel/nlabel.h</code></p><p>NLabel inherits from <code>NodeWidget</code> which inherits from <code>YogaWidget</code> which inturn inherits from <code>FlexItem</code></p><ul><li><code>FlexItem</code> adds a YogaNode to every widget.</li><li><code>YogaWidget</code> adds Yoga specific q-properties to the widget, which is useful to assign yoga properties via qstylesheet. More on this below.</li><li><code>NodeWidget</code> adds layout support via <code>YogaWidget</code> and event handling support via <code>EventWidget</code></li></ul></li></ol><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="flexitem"></a>FlexItem<a aria-hidden="true" tabindex="-1" class="hash-link" href="#flexitem" title="Direct link to heading">#</a></h3><p>FlexItem : <code>src/cpp/core/FlexLayout/flexitem.h</code> add flexnode to each widget.
|
|
FlexItem adds methods like getFlexNode.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="yogawidget"></a>YogaWidget<a aria-hidden="true" tabindex="-1" class="hash-link" href="#yogawidget" title="Direct link to heading">#</a></h3><p>Qt StyleSheet allows you to specify style properties just like in web. You could specify font-size, margin, padding, etc. Qt StyleSheet also allows custom style properties via Qt's q-property system.</p><p>So in order to enable yoga based properties like alignItems, justifyContent, flex, etc via qt's stylesheet we
|
|
declare and define q properties for each of those custom properties we want.
|
|
This allows us to use something like:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-js codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">view</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">setStyleSheet</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token template-string template-punctuation string" style="color:rgb(195, 232, 141)">`</span><span class="token template-string string" style="color:rgb(195, 232, 141)"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token template-string string" style="color:rgb(195, 232, 141)"> background-color:green;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token template-string string" style="color:rgb(195, 232, 141)"> qproperty-flex: 1;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token template-string string" style="color:rgb(195, 232, 141)"> qproperty-alignItems: 'center';</span></div><div class="token-line" style="color:#bfc7d5"><span class="token template-string string" style="color:rgb(195, 232, 141)"></span><span class="token template-string template-punctuation string" style="color:rgb(195, 232, 141)">`</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span></div></div></div></div></div><p>Notice <code>qproperty-</code> prefix? These are the custom q-properties we defined in <code>YogaWidget.h</code>. We do not need to prefix <code>qproperty-</code> if a stylehsheet string is passed through <code>StyleSheet.create()</code>. StyleSheet.create has an autoprefixer which will do the right thing.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="nodewidget"></a>NodeWidget<a aria-hidden="true" tabindex="-1" class="hash-link" href="#nodewidget" title="Direct link to heading">#</a></h3><p>Every widget we implement should inherit from NodeWidget. This helps us add all the properties we want in the widgets via a single class. NodeWidget is the class that contains properties and methods shared by all widgets. This class allows us to add features to all widgets easily.</p></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/nodegui/nodegui/edit/master/website/docs/development/styling.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"></div><div class="pagination-nav__item pagination-nav__item--next"></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#painting" class="table-of-contents__link">Painting</a></li><li><a href="#layout" class="table-of-contents__link">Layout</a><ul><li><a href="#implementation" class="table-of-contents__link">Implementation</a></li><li><a href="#flexitem" class="table-of-contents__link">FlexItem</a></li><li><a href="#yogawidget" class="table-of-contents__link">YogaWidget</a></li><li><a href="#nodewidget" class="table-of-contents__link">NodeWidget</a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Docs</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/guides/getting-started">Getting Started</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/api/manual/synopsis">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://spectrum.chat/nodegui" target="_blank" rel="noopener noreferrer" class="footer__link-item">Spectrum</a></li><li class="footer__item"><a href="https://nodegui.slack.com" target="_blank" rel="noopener noreferrer" class="footer__link-item">Slack</a></li><li class="footer__item"><a href="https://twitter.com/node_gui" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li><li class="footer__item"><a href="https://medium.com/nodegui" target="_blank" rel="noopener noreferrer" class="footer__link-item">Medium</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/blog">Blog</a></li><li class="footer__item"><a href="https://react.nodegui.org" target="_blank" rel="noopener noreferrer" class="footer__link-item">React NodeGui</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/faq">FAQ</a></li></ul></div></div><div class="text--center"><div>Copyright © 2021 NodeGui</div></div></div></footer></div>
|
|
<script src="/styles.c64f7c7d.js"></script>
|
|
<script src="/runtime~main.fb390718.js"></script>
|
|
<script src="/main.d30558ed.js"></script>
|
|
<script src="/1.c3df9058.js"></script>
|
|
<script src="/2.73955132.js"></script>
|
|
<script src="/3.ab57b632.js"></script>
|
|
<script src="/1be78505.f51e3f10.js"></script>
|
|
<script src="/402.796e35e3.js"></script>
|
|
<script src="/935f2afb.3bfe93cd.js"></script>
|
|
<script src="/17896441.5cec6d39.js"></script>
|
|
<script src="/293d2a98.540bed9d.js"></script>
|
|
</body>
|
|
</html> |