53 lines
63 KiB
HTML
53 lines
63 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-theme="">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width">
|
|
<script type="text/javascript">/*<![CDATA[*/window.__chunkMapping={"main":["/main.f66713773e9ba37b90fe.css","/main.3c22308242e28ead5e64.js"],"component---site-src-pages-index-jsc-4-f-f99":["/component---site-src-pages-index-jsc-4-f-f99.71bf8f44fd9ac59b6a50.css","/component---site-src-pages-index-jsc-4-f-f99.505b05deaa8813d82ea6.js"],"component---theme-blog-post-pageccc-cab":["/component---theme-blog-post-pageccc-cab.eaf730b8c654a212f785.js"],"content---blog-welcome-286-e55":["/content---blog-welcome-286-e55.76c213cf9ce75984ae91.js"],"metadata---blog-welcome-27-a-91f":["/metadata---blog-welcome-27-a-91f.ef07fafa6070c2acef91.js"],"component---theme-blog-list-pagea-6-a-7ba":["/component---theme-blog-list-pagea-6-a-7ba.697ec326a8cebf60b287.js"],"content---blogaf-1-856":["/content---blogaf-1-856.f79900332b57f969c09a.js"],"metadata---blog-83-c-2b0":["/metadata---blog-83-c-2b0.46c7be8f307d8da2c120.js"],"component---theme-doc-legacy-page-9-e-7-ca5":["/component---theme-doc-legacy-page-9-e-7-ca5.3c38a2f40a51efdd72a0.css","/component---theme-doc-legacy-page-9-e-7-ca5.d31182005d6c21dd63ac.js"],"docsMetadata---docs-150-2d6":["/docsMetadata---docs-150-2d6.6e875209659be13f2970.js"],"component---theme-doc-legacy-item-031-769":["/component---theme-doc-legacy-item-031-769.1f1ce10374de019f5d3a.css","/component---theme-doc-legacy-item-031-769.6e8a6ea08d218712d94a.js"],"content---docs-doc-1-b-2-f-e80":["/content---docs-doc-1-b-2-f-e80.b11e6221286a094dd836.js"],"metadata---docs-doc-12-a-3-5a1":["/metadata---docs-doc-12-a-3-5a1.bb87820e31f222c12801.js"],"content---docs-faq-048-db5":["/content---docs-faq-048-db5.a3f7755c1443136d038e.js"],"metadata---docs-faq-59-d-2b9":["/metadata---docs-faq-59-d-2b9.985713e75ca070fdde14.js"],"content---docs-mdxce-3-7d1":["/content---docs-mdxce-3-7d1.36f8da190939bb0f0b99.js"],"metadata---docs-mdx-786-f56":["/metadata---docs-mdx-786-f56.6c0450d5f4f4bf4b0f24.js"],"content---docs-api-component-4-ef-195":["/content---docs-api-component-4-ef-195.1ebedb4f37e2304eb832.js"],"metadata---docs-api-component-3-e-5-43d":["/metadata---docs-api-component-3-e-5-43d.0893689f20edabdccdd1.js"],"content---docs-api-event-widgetac-6-11b":["/content---docs-api-event-widgetac-6-11b.b87fa94e0cd874003d59.js"],"metadata---docs-api-event-widget-39-a-9ea":["/metadata---docs-api-event-widget-39-a-9ea.34b0ce562deb2ec0ae92.js"],"content---docs-api-flex-layout-3-dc-a16":["/content---docs-api-flex-layout-3-dc-a16.d5ab9ac7b90d9ed88203.js"],"metadata---docs-api-flex-layoutecf-540":["/metadata---docs-api-flex-layoutecf-540.7db8561c2c23b0d92b67.js"],"content---docs-api-node-layoutd-28-11a":["/content---docs-api-node-layoutd-28-11a.f1324fa8676e4bf64b44.js"],"metadata---docs-api-node-layout-1-e-9-c15":["/metadata---docs-api-node-layout-1-e-9-c15.192849fc91407c883037.js"],"content---docs-api-node-widget-080-a39":["/content---docs-api-node-widget-080-a39.e39bcda58fa051ef8f58.js"],"metadata---docs-api-node-widgeta-92-a4f":["/metadata---docs-api-node-widgeta-92-a4f.dc800d76f7062b65b2ed.js"],"content---docs-api-q-abstract-scroll-area-3-e-6-d7f":["/content---docs-api-q-abstract-scroll-area-3-e-6-d7f.ce07722700328be8dfa5.js"],"metadata---docs-api-q-abstract-scroll-area-59-d-279":["/metadata---docs-api-q-abstract-scroll-area-59-d-279.378868b047b4e7fc733c.js"],"content---docs-api-q-abstract-slider-3-e-0-54d":["/content---docs-api-q-abstract-slider-3-e-0-54d.b7e761ae58b36fe089f1.js"],"metadata---docs-api-q-abstract-sliderdfa-ab7":["/metadata---docs-api-q-abstract-sliderdfa-ab7.73efd891b1be587b529b.js"],"content---docs-api-q-applicationd-3-e-0a3":["/content---docs-api-q-applicationd-3-e-0a3.039f8c83760f87eef546.js"],"metadata---docs-api-q-applicationc-1-d-8a4":["/metadata---docs-api-q-applicationc-1-d-8a4.dba24314be49483727c4.js"],"content---docs-api-q-check-boxd-9-b-c95":["/content---docs-api-q-check-boxd-9-b-c95.54af9594d82de2f1c65c.js"],"metadata---docs-api-q-check-box-132-293":["/metadata---docs-api-q-check-box-132-293.363eb2c9b2bdc95e76bb.js"],"content---docs-api-q-clipboard-69-d-2ef":["/content---docs-api-q-clipboard-69-d-2ef.2facddd2ce7d03c7d364.js"],"metadata---docs-api-q-clipboard-486-b21":["/metadata---docs-api-q-clipboard-486-b21.5efa03bad36d45e62cbe.js"],"content---docs-api-q-cursor-362-d51":["/content---docs-api-q-cursor-362-d51.72e3b873d390560e1917.js"],"metadata---docs-api-q-cursor-887-11e":["/metadata---docs-api-q-cursor-887-11e.af1b21b104f06148557b.js"],"content---docs-api-q-dial-80-b-99a":["/content---docs-api-q-dial-80-b-99a.facd48a52570d2fd7472.js"],"metadata---docs-api-q-dialbfb-aef":["/metadata---docs-api-q-dialbfb-aef.e5ded32011b7d6927cdc.js"],"content---docs-api-q-grid-layouta-4-e-552":["/content---docs-api-q-grid-layouta-4-e-552.f8384f91986e144a1e06.js"],"metadata---docs-api-q-grid-layout-7-db-030":["/metadata---docs-api-q-grid-layout-7-db-030.f3764e551a2bc1cf18a8.js"],"content---docs-api-q-icone-5-f-b0d":["/content---docs-api-q-icone-5-f-b0d.016d00e28e5a87f3cf94.js"],"metadata---docs-api-q-icone-6-d-093":["/metadata---docs-api-q-icone-6-d-093.1c4c72d6ff116744c296.js"],"content---docs-api-q-label-2-f-9-04b":["/content---docs-api-q-label-2-f-9-04b.9f8c2e203f083cedfdf8.js"],"metadata---docs-api-q-label-165-210":["/metadata---docs-api-q-label-165-210.1dba411adf86a92ae91f.js"],"content---docs-api-q-line-editea-0-53d":["/content---docs-api-q-line-editea-0-53d.f606b13ced935ec46509.js"],"metadata---docs-api-q-line-edit-13-f-b8a":["/metadata---docs-api-q-line-edit-13-f-b8a.df4fef6cc6001cbc07a7.js"],"content---docs-api-q-main-window-0-e-7-299":["/content---docs-api-q-main-window-0-e-7-299.7a1bf20062e23ed6c510.js"],"metadata---docs-api-q-main-window-04-f-efb":["/metadata---docs-api-q-main-window-04-f-efb.699f6e2eb1ac78330311.js"],"content---docs-api-q-pixmap-8-dd-cb2":["/content---docs-api-q-pixmap-8-dd-cb2.343e5d75db3125ddfa81.js"],"metadata---docs-api-q-pixmapfdf-820":["/metadata---docs-api-q-pixmapfdf-820.087e26967d50eb06140d.js"],"content---docs-api-q-plain-text-edit-7-c-8-081":["/content---docs-api-q-plain-text-edit-7-c-8-081.f6a618e75ea9b4f15f6b.js"],"metadata---docs-api-q-plain-text-edit-161-ecc":["/metadata---docs-api-q-plain-text-edit-161-ecc.e89eb96f17b29e76629e.js"],"content---docs-api-q-progress-barc-46-afe":["/content---docs-api-q-progress-barc-46-afe.2a5c874c4e33ecb7a2b8.js"],"metadata---docs-api-q-progress-bar-43-d-07e":["/metadata---docs-api-q-progress-bar-43-d-07e.a527e07318808cde454e.js"],"content---docs-api-q-push-button-06-c-73e":["/content---docs-api-q-push-button-06-c-73e.9e1e6d8a0e7c17941efd.js"],"metadata---docs-api-q-push-button-96-d-c92":["/metadata---docs-api-q-push-button-96-d-c92.b15a45966fb25f5f9917.js"],"content---docs-api-q-radio-buttone-54-746":["/content---docs-api-q-radio-buttone-54-746.0eceb96f43e589853010.js"],"metadata---docs-api-q-radio-button-367-f7c":["/metadata---docs-api-q-radio-button-367-f7c.11484c432455585a7ef3.js"],"content---docs-api-q-scroll-area-8-c-4-3fd":["/content---docs-api-q-scroll-area-8-c-4-3fd.fd580650b1d2ac9eee33.js"],"metadata---docs-api-q-scroll-area-46-a-96e":["/metadata---docs-api-q-scroll-area-46-a-96e.a5c480374e3f8b5fcea2.js"],"content---docs-api-q-spin-box-1-ce-bfd":["/content---docs-api-q-spin-box-1-ce-bfd.fc03e9106b39d9c9e23c.js"],"metadata---docs-api-q-spin-box-809-ae0":["/metadata---docs-api-q-spin-box-809-ae0.1fcda0244eebb91ff1bf.js"],"content---docs-api-q-tab-widget-508-95e":["/content---docs-api-q-tab-widget-508-95e.b35876b3da49da08bcb5.js"],"metadata---docs-api-q-tab-widgetebc-5aa":["/metadata---docs-api-q-tab-widgetebc-5aa.558f01cb9860e9184f4f.js"],"content---docs-api-q-widget-04-a-59f":["/content---docs-api-q-widget-04-a-59f.789a0ca241a0fb6ad49d.js"],"metadata---docs-api-q-widget-287-e6c":["/metadata---docs-api-q-widget-287-e6c.1a1aa4d570d756d63bb4.js"],"content---docs-api-qt-enumsfd-7-cf3":["/content---docs-api-qt-enumsfd-7-cf3.1eed426a340d4c937b0a.js"],"metadata---docs-api-qt-enums-423-cf9":["/metadata---docs-api-qt-enums-423-cf9.fb1940e1fff15d344906.js"],"content---docs-api-yoga-widgeta-42-cc7":["/content---docs-api-yoga-widgeta-42-cc7.d048cabe40533b903ea2.js"],"metadata---docs-api-yoga-widget-95-c-f8b":["/metadata---docs-api-yoga-widget-95-c-f8b.bdbc70e8a3ba6a1d1808.js"],"content---docs-api-process-5-ec-b1e":["/content---docs-api-process-5-ec-b1e.81baa4658f7e9a835392.js"],"metadata---docs-api-process-32-d-09e":["/metadata---docs-api-process-32-d-09e.9dd820231565148c88a2.js"],"content---docs-api-synopsis-7-bb-e1c":["/content---docs-api-synopsis-7-bb-e1c.2cede4e9cd42a20dcab1.js"],"metadata---docs-api-synopsis-21-f-a62":["/metadata---docs-api-synopsis-21-f-a62.a376081207def93aa340.js"],"content---docs-development-readme-149-437":["/content---docs-development-readme-149-437.115b92599d48666d0070.js"],"metadata---docs-development-readm-ec-6-c-332":["/metadata---docs-development-readm-ec-6-c-332.49158ed40eba176b8d72.js"],"content---docs-development-common-errorsf-15-a5b":["/content---docs-development-common-errorsf-15-a5b.e038ab8ec8bf334300fb.js"],"metadata---docs-development-common-errors-402-ef4":["/metadata---docs-development-common-errors-402-ef4.7ea9ca2120cf1ce1bce9.js"],"content---docs-development-debuggingb-54-9ed":["/content---docs-development-debuggingb-54-9ed.750c6b37dab541484a83.js"],"metadata---docs-development-debuggingc-36-26a":["/metadata---docs-development-debuggingc-36-26a.3bf9d58aef0157443ea5.js"],"content---docs-development-getting-started-139-387":["/content---docs-development-getting-started-139-387.91c824c53e601bdee051.js"],"metadata---docs-development-getting-started-89-b-c7a":["/metadata---docs-development-getting-started-89-b-c7a.863d1b0e22372d87282e.js"],"content---docs-development-setting-up-28-c-666":["/content---docs-development-setting-up-28-c-666.3ed03febaee8901fd048.js"],"metadata---docs-development-setting-up-979-75f":["/metadata---docs-development-setting-up-979-75f.8f9fc5a72c685e8d0e31.js"],"content---docs-development-signal-and-event-handling-7-d-4-f3f":["/content---docs-development-signal-and-event-handling-7-d-4-f3f.ce2b82a97ac1f368a896.js"],"metadata---docs-development-signal-and-event-handling-0-b-5-692":["/metadata---docs-development-signal-and-event-handling-0-b-5-692.b16a5b795c3eef3ce5dc.js"],"content---docs-development-styling-293-cad":["/content---docs-development-styling-293-cad.b3394daf132a97f6e2c2.js"],"metadata---docs-development-styling-1-c-2-0d6":["/metadata---docs-development-styling-1-c-2-0d6.c1ae40b22fc3b93cd6fc.js"],"content---docs-development-wrapping-widgets-84-b-538":["/content---docs-development-wrapping-widgets-84-b-538.8591cd36dcfe1c65b14a.js"],"metadata---docs-development-wrapping-widgets-303-fb8":["/metadata---docs-development-wrapping-widgets-303-fb8.bfc04ad3ffc9ee24e861.js"],"content---docs-guides-custom-nodegui-native-plugin-632-9db":["/content---docs-guides-custom-nodegui-native-plugin-632-9db.ae1162899d532c588845.js"],"metadata---docs-guides-custom-nodegui-native-plugin-92-b-12f":["/metadata---docs-guides-custom-nodegui-native-plugin-92-b-12f.184a7a6a1f10e05c6c54.js"],"content---docs-guides-debugging-in-vscodebd-7-cec":["/content---docs-guides-debugging-in-vscodebd-7-cec.a37b675eceeff564dcc8.js"],"metadata---docs-guides-debugging-in-vscodebf-8-5b0":["/metadata---docs-guides-debugging-in-vscodebf-8-5b0.d26c0a02667ed3c9416d.js"],"content---docs-guides-debuggingf-3-f-cf5":["/content---docs-guides-debuggingf-3-f-cf5.6a9f350b152e911795d0.js"],"metadata---docs-guides-debugging-970-fb8":["/metadata---docs-guides-debugging-970-fb8.4834f7c20eceaaaee536.js"],"content---docs-guides-getting-startedc-9-e-20f":["/content---docs-guides-getting-startedc-9-e-20f.058d1e127795274285bb.js"],"metadata---docs-guides-getting-started-2-b-7-1a4":["/metadata---docs-guides-getting-started-2-b-7-1a4.cfc3dec8bc5f547dfbb8.js"],"content---docs-guides-handle-events-160-4b0":["/content---docs-guides-handle-events-160-4b0.c02ea0616d11beafddb3.js"],"metadata---docs-guides-handle-events-5-eb-540":["/metadata---docs-guides-handle-events-5-eb-540.61bb8e8da8eeda4cc040.js"],"content---docs-guides-images-991-065":["/content---docs-guides-images-991-065.914359cdc22f4b9051ef.js"],"metadata---docs-guides-images-915-5ee":["/metadata---docs-guides-images-915-5ee.175b82933d61d3e5deb4.js"],"content---docs-guides-layoutdf-5-a64":["/content---docs-guides-layoutdf-5-a64.bbcbc44e5156b817cb02.js"],"metadata---docs-guides-layoutf-65-d7d":["/metadata---docs-guides-layoutf-65-d7d.3bdf6df942a2264f480b.js"],"content---docs-guides-networking-374-03e":["/content---docs-guides-networking-374-03e.17133e9de15be6e64aff.js"],"metadata---docs-guides-networkingdfd-ce0":["/metadata---docs-guides-networkingdfd-ce0.332c039b051021fe2724.js"],"content---docs-guides-nodegui-architecture-262-19e":["/content---docs-guides-nodegui-architecture-262-19e.245edae39f1ddac01224.js"],"metadata---docs-guides-nodegui-architecture-550-b82":["/metadata---docs-guides-nodegui-architecture-550-b82.72d9e2773d4e285ca973.js"],"content---docs-guides-scroll-view-76-e-87c":["/content---docs-guides-scroll-view-76-e-87c.73c89be82bf124b2e125.js"],"metadata---docs-guides-scroll-view-9-a-9-2ac":["/metadata---docs-guides-scroll-view-9-a-9-2ac.f6039a7dd2d1fa4c6ca6.js"],"content---docs-guides-stylingfec-977":["/content---docs-guides-stylingfec-977.c0e2691c9103260d4124.js"],"metadata---docs-guides-styling-9-ea-213":["/metadata---docs-guides-styling-9-ea-213.d5570c147002ef8e6bfe.js"],"content---docs-guides-tutoriale-53-6ab":["/content---docs-guides-tutoriale-53-6ab.3001eaf77a6eeaf068aa.js"],"metadata---docs-guides-tutorial-1-f-1-23b":["/metadata---docs-guides-tutorial-1-f-1-23b.4e417b24befa6a685ab5.js"],"content---docs-guides-using-native-node-modules-3-ab-104":["/content---docs-guides-using-native-node-modules-3-ab-104.3bc40951d03693eaff7d.js"],"metadata---docs-guides-using-native-node-modules-31-f-551":["/metadata---docs-guides-using-native-node-modules-31-f-551.0accd417ae132a661bdf.js"],"component---theme-blog-tags-posts-page-687-b6c":["/component---theme-blog-tags-posts-page-687-b6c.7cbecfb8c53ab9b2f9ba.js"],"metadata---blog-tags-nodegui-632-d46":["/metadata---blog-tags-nodegui-632-d46.73df93301c6a1152b2fe.js"],"metadata---blog-tags-hellob-02-3e8":["/metadata---blog-tags-hellob-02-3e8.cdf356c9ee24382e453e.js"],"component---theme-blog-tags-list-page-01-a-d0b":["/component---theme-blog-tags-list-page-01-a-d0b.f9af53c8c6b12587c378.js"],"tags---blog-tags-8-d-7-36d":["/tags---blog-tags-8-d-7-36d.1243f2728e886299c73e.js"]};/*]]>*/</script>
|
|
|
|
<title data-react-helmet="true">Styling</title>
|
|
|
|
<meta data-react-helmet="true" charset="utf-8"/><meta data-react-helmet="true" http-equiv="x-ua-compatible" content="ie=edge"/><meta data-react-helmet="true" name="viewport" content="width=device-width"/><meta data-react-helmet="true" property="og:title" content="Styling"/><meta data-react-helmet="true" name="description" content="With NodeGui, you can style a widget to your needs. If you are familiar with CSS in the web world you would feel right at home. All widgets have a method `setInlineStyle` for setting inline styles for the respective widget. The style names and values usually match how CSS works on the web."/><meta data-react-helmet="true" property="og:description" content="With NodeGui, you can style a widget to your needs. If you are familiar with CSS in the web world you would feel right at home. All widgets have a method `setInlineStyle` for setting inline styles for the respective widget. The style names and values usually match how CSS works on the web."/><meta data-react-helmet="true" property="og:url" content="https://nodegui.org/docs/guides/styling"/><meta data-react-helmet="true" name="twitter:card" content="summary"/>
|
|
|
|
<link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"/>
|
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="/main.f66713773e9ba37b90fe.css" />
|
|
|
|
<link rel="stylesheet" type="text/css" href="/1.196ce05925ea6d776920.css" />
|
|
|
|
<link rel="stylesheet" type="text/css" href="/2.702de9bbb01fe4f46fa1.css" />
|
|
|
|
<link rel="stylesheet" type="text/css" href="/component---theme-doc-legacy-page-9-e-7-ca5.3c38a2f40a51efdd72a0.css" />
|
|
|
|
<link rel="stylesheet" type="text/css" href="/component---theme-doc-legacy-item-031-769.1f1ce10374de019f5d3a.css" />
|
|
|
|
</head>
|
|
<body >
|
|
<div id="__docusaurus">
|
|
<nav class="navbar navbar--light 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 aria-current="page" class="navbar__brand active" href="/"><img class="navbar__logo" src="/img/logo-circle.png" alt="NodeGui Logo"/><strong>NodeGui</strong></a></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" label="Docs" position="right" href="/docs/guides/getting-started">Docs</a><a class="navbar__item navbar__link" label="API" position="right" href="/docs/api/QApplication">API</a><a class="navbar__item navbar__link" label="Blog" position="right" href="/blog">Blog</a><a class="navbar__item navbar__link" href="https://github.com/nodegui/nodegui" label="GitHub" position="right" target="_blank" rel="noopener noreferrer">GitHub</a><div class="react-toggle displayOnlyInLargeViewport_1gtM"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_16vC moon_1N64"></span></div><div class="react-toggle-track-x"><span class="toggle_16vC sun_3CZP"></span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"/></div></div></div><div role="presentation" class="navbar__sidebar__backdrop"></div><div class="navbar__sidebar"><div class="navbar__sidebar__brand"><a aria-current="page" class="navbar__brand active" href="/"><img class="navbar__logo" src="/img/logo-circle.png" alt="NodeGui Logo"/><strong>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" label="Docs" position="right" href="/docs/guides/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" label="API" position="right" href="/docs/api/QApplication">API</a></li><li class="menu__list-item"><a class="menu__link" label="Blog" position="right" href="/blog">Blog</a></li><li class="menu__list-item"><a class="menu__link" href="https://github.com/nodegui/nodegui" label="GitHub" position="right" target="_blank" rel="noopener noreferrer">GitHub</a></li></ul></div></div></div></nav><div class="container container--fluid"><div class="row"><div class="col col--3"><div class="sidebar_Qb2S"><div class="menu menu--responsive"><button aria-label="Open Menu" class="button button--secondary button--sm menu__button" type="button"><svg class="sidebarMenuIcon_1uhT" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" 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></button><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="#!">The Basics</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/guides/getting-started">Getting started</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/guides/tutorial">Learn the Basics</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active" href="/docs/guides/styling">Styling</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/guides/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/guides/handle-events">Handle Events</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/guides/scroll-view">Scroll View</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/guides/images">Images</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/guides/networking">Networking</a></li></ul></li><li class="menu__list-item"><a class="menu__link" href="#!">Guides</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/guides/nodegui-architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/guides/debugging">Debugging</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/guides/debugging-in-vscode">Debugging in VSCode</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/guides/using-native-node-modules">Native Node Modules</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/guides/custom-nodegui-native-plugin">Custom NodeGui Plugin</a></li></ul></li></ul></div></div></div><main class="col"><div><div class="padding-vert--lg"><div class="row"><div class="col"><div class="docItemContainer_3Gws"><header><h1 class="margin-bottom--lg">Styling</h1></header><article><div class="markdown"><p>With NodeGui, you can style a widget to your needs. If you are familiar with CSS in the web world you would feel right at home. All widgets have a method <code>setInlineStyle</code> for setting inline styles for the respective widget. The style names and values usually match how CSS works on the web.</p><p>Here's an example:</p><pre class="mdxCodeBlock_iHAB"><div class="codeBlockWrapper_2QGZ"><pre class="prism-code language-js codeBlock_19pQ" style="color:#d6deeb;background-color:#011627"><div class="token-line" style="color:#d6deeb"><span class="token keyword" style="color:rgb(127, 219, 202)">const</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> </span><span class="token maybe-class-name">QLabel</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token maybe-class-name">QMainWindow</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">require</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(173, 219, 103)">"@nodegui/nodegui"</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:#d6deeb"><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"></span><span class="token keyword" style="color:rgb(127, 219, 202)">const</span><span class="token plain"> win </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">new</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 139)">QMainWindow</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:#d6deeb"><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"></span><span class="token keyword" style="color:rgb(127, 219, 202)">const</span><span class="token plain"> label </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">new</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 139)">QLabel</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">win</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:#d6deeb"><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(173, 219, 103)">"Hello world"</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:#d6deeb"><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)">setInlineStyle</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(173, 219, 103)">"color: green; background-color: white;"</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:#d6deeb"><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain">win</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)">show</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:#d6deeb"><span class="token plain">global</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token property-access">win</span><span class="token plain"> </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> win</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1BYj">Copy</button></div></pre><h2><a aria-hidden="true" class="anchor" id="overview"></a><a aria-hidden="true" class="hash-link" href="#overview">#</a>Overview</h2><p>NodeGui makes use of <a href="https://doc.qt.io/qt-5/stylesheet-syntax.html">Qt's stylesheet</a> for styling. Qt Style Sheet terminology and syntactic rules are almost identical to those of HTML CSS. Additionally, NodeGui adds support for layout using flex properties like align-items, justify-content, etc. Flexbox layout support is added using <a href="https://github.com/facebook/yoga">facebook's yoga library</a>.</p><p>You would write your style properties in a string and pass it to the NodeGui widgets either via global styles or inline styles (similar to how it works in the web).</p><h2><a aria-hidden="true" class="anchor" id="global-styles"></a><a aria-hidden="true" class="hash-link" href="#global-styles">#</a>Global styles</h2><p>Lets take a look at an example:</p><pre class="mdxCodeBlock_iHAB"><div class="codeBlockWrapper_2QGZ"><pre class="prism-code language-js codeBlock_19pQ" style="color:#d6deeb;background-color:#011627"><div class="token-line" style="color:#d6deeb"><span class="token keyword" style="color:rgb(127, 219, 202)">const</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> </span><span class="token maybe-class-name">QLabel</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token maybe-class-name">FlexLayout</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token maybe-class-name">QWidget</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">require</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(173, 219, 103)">"@nodegui/nodegui"</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:#d6deeb"><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"></span><span class="token keyword" style="color:rgb(127, 219, 202)">const</span><span class="token plain"> view </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">new</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 139)">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:#d6deeb"><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)">setObjectName</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(173, 219, 103)">"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:#d6deeb"><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 keyword" style="color:rgb(127, 219, 202)">new</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 139)">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 punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"></span><span class="token keyword" style="color:rgb(127, 219, 202)">const</span><span class="token plain"> label </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">new</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 139)">QLabel</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:#d6deeb"><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)">setObjectName</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(173, 219, 103)">"helloLabel"</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:#d6deeb"><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(173, 219, 103)">"Hello"</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:#d6deeb"><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"></span><span class="token keyword" style="color:rgb(127, 219, 202)">const</span><span class="token plain"> label2 </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">new</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 139)">QLabel</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:#d6deeb"><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)">setObjectName</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(173, 219, 103)">"worldLabel"</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:#d6deeb"><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(173, 219, 103)">"World"</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:#d6deeb"><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain">view</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token property-access">layout</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 punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain">view</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token property-access">layout</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 punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><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 string" style="color:rgb(173, 219, 103)">`</span></div><div class="token-line" style="color:#d6deeb"><span class="token template-string string" style="color:rgb(173, 219, 103)"> #helloLabel {</span></div><div class="token-line" style="color:#d6deeb"><span class="token template-string string" style="color:rgb(173, 219, 103)"> color: red;</span></div><div class="token-line" style="color:#d6deeb"><span class="token template-string string" style="color:rgb(173, 219, 103)"> padding: 10px;</span></div><div class="token-line" style="color:#d6deeb"><span class="token template-string string" style="color:rgb(173, 219, 103)"> }</span></div><div class="token-line" style="color:#d6deeb"><span class="token template-string string" style="color:rgb(173, 219, 103)"> #worldLabel {</span></div><div class="token-line" style="color:#d6deeb"><span class="token template-string string" style="color:rgb(173, 219, 103)"> color: green;</span></div><div class="token-line" style="color:#d6deeb"><span class="token template-string string" style="color:rgb(173, 219, 103)"> padding: 10px;</span></div><div class="token-line" style="color:#d6deeb"><span class="token template-string string" style="color:rgb(173, 219, 103)"> }</span></div><div class="token-line" style="color:#d6deeb"><span class="token template-string string" style="color:rgb(173, 219, 103)"> #rootView {</span></div><div class="token-line" style="color:#d6deeb"><span class="token template-string string" style="color:rgb(173, 219, 103)"> background-color: black;</span></div><div class="token-line" style="color:#d6deeb"><span class="token template-string string" style="color:rgb(173, 219, 103)"> }</span></div><div class="token-line" style="color:#d6deeb"><span class="token template-string string" style="color:rgb(173, 219, 103)">`</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:#d6deeb"><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)">show</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:#d6deeb"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">global </span><span class="token keyword module" style="color:rgb(127, 219, 202)">as</span><span class="token plain"> any</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 property-access">view</span><span class="token plain"> </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> view</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1BYj">Copy</button></div></pre><p>In the case of global stylesheet you can define all your style properties in a stylesheet string and the tell the root view or window to set it as a stylsheet for it and its child widgets. The only difference here from web is that you can set a stylesheet on a widget at any level in the whole tree of widgets, the stylesheet will affect the widget and its children.</p><p>In the above example, in order to reference a widget in a stylesheet we will assign it a <code>objectName</code> using setObjectName instance method. Think of objectName as something similar to an <code>id</code> in the case of web. Now using the objectName you could reference the widget in the stylesheet and set style properties on them. Do not worry about the layout stuff that is going on here, that will be covered in the next section.</p><p>Global stylesheet really becomes powerful when you use things like pseudo-selectors (hover, checked, etc). It also has helps in implementing cascaded styles which allow you to style a group of widgets at once. We will see more about these features below.</p><blockquote><p>More details on all the features and the syntax can be found here: <a href="https://doc.qt.io/qt-5/stylesheet-syntax.html">https://doc.qt.io/qt-5/stylesheet-syntax.html</a></p></blockquote><h2><a aria-hidden="true" class="anchor" id="inline-styles"></a><a aria-hidden="true" class="hash-link" href="#inline-styles">#</a>Inline styles</h2><p>Lets look at this example again:</p><pre class="mdxCodeBlock_iHAB"><div class="codeBlockWrapper_2QGZ"><pre class="prism-code language-js codeBlock_19pQ" style="color:#d6deeb;background-color:#011627"><div class="token-line" style="color:#d6deeb"><span class="token keyword" style="color:rgb(127, 219, 202)">const</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> </span><span class="token maybe-class-name">QLabel</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token maybe-class-name">QMainWindow</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">require</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(173, 219, 103)">"@nodegui/nodegui"</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:#d6deeb"><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"></span><span class="token keyword" style="color:rgb(127, 219, 202)">const</span><span class="token plain"> win </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">new</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 139)">QMainWindow</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:#d6deeb"><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"></span><span class="token keyword" style="color:rgb(127, 219, 202)">const</span><span class="token plain"> label </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">new</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 139)">QLabel</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">win</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:#d6deeb"><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(173, 219, 103)">"Hello world"</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:#d6deeb"><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)">setInlineStyle</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(173, 219, 103)">"color: green; background-color: white;"</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:#d6deeb"><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain">win</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)">show</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:#d6deeb"><span class="token plain">global</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token property-access">win</span><span class="token plain"> </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> win</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1BYj">Copy</button></div></pre><p>In most cases it would be easier to style the widgets inline. NodeGui supports inline styling using <code>setInlineStyle</code> instance method. Inline styles will only affect the widget to which the style is applied to and is often easier to understand and manage. All properties you use in the global stylesheet are available in inline styles as well.</p><h2><a aria-hidden="true" class="anchor" id="selectors"></a><a aria-hidden="true" class="hash-link" href="#selectors">#</a>Selectors</h2><p>NodeGui style sheets support all the selectors defined in CSS2.
|
|
Some examples include:</p><pre class="mdxCodeBlock_iHAB"><div class="codeBlockWrapper_2QGZ"><pre class="prism-code language-css codeBlock_19pQ" style="color:#d6deeb;background-color:#011627"><div class="token-line" style="color:#d6deeb"><span class="token selector" style="color:rgb(199, 146, 234);font-style:italic">*</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token property" style="color:rgb(128, 203, 196)">color</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> blue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"></span><span class="token selector" style="color:rgb(199, 146, 234);font-style:italic">QPushButton</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token property" style="color:rgb(128, 203, 196)">padding</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token unit">px</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"></span><span class="token selector id" style="color:rgb(199, 146, 234);font-style:italic">#okButton</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token property" style="color:rgb(128, 203, 196)">margin</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token unit">px</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"></span><span class="token selector id" style="color:rgb(199, 146, 234);font-style:italic">#mainView</span><span class="token selector" style="color:rgb(199, 146, 234);font-style:italic"> > QPushButton</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token property" style="color:rgb(128, 203, 196)">margin</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token unit">px</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1BYj">Copy</button></div></pre><p>To see a complete list of selectors see here: <a href="https://doc.qt.io/qt-5/stylesheet-syntax.html#selector-types">https://doc.qt.io/qt-5/stylesheet-syntax.html#selector-types</a></p><h2><a aria-hidden="true" class="anchor" id="pseudo-states"></a><a aria-hidden="true" class="hash-link" href="#pseudo-states">#</a>Pseudo states</h2><p>Like in the web, you can style your widget based on its state. An example would be, you might want the color of the button text to be red when its hovered upon. These are possible with pseudo states. Pseudo-states appear at the end of the selector, with a colon (:) in between.</p><pre class="mdxCodeBlock_iHAB"><div class="codeBlockWrapper_2QGZ"><pre class="prism-code language-css codeBlock_19pQ" style="color:#d6deeb;background-color:#011627"><div class="token-line" style="color:#d6deeb"><span class="token selector id" style="color:rgb(199, 146, 234);font-style:italic">#okButton</span><span class="token selector pseudo-class" style="color:rgb(199, 146, 234);font-style:italic">:hover</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token property" style="color:rgb(128, 203, 196)">color</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> red</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1BYj">Copy</button></div></pre><blockquote><p>More details here : <a href="https://doc.qt.io/qt-5/stylesheet-syntax.html#pseudo-states">https://doc.qt.io/qt-5/stylesheet-syntax.html#pseudo-states</a></p></blockquote><h2><a aria-hidden="true" class="anchor" id="cascading"></a><a aria-hidden="true" class="hash-link" href="#cascading">#</a>Cascading</h2><p>Style sheets can be set on the parent widgets and on child widgets. An arbitrary widget's effective style sheet is obtained by merging the style sheets set on the widget's ancestors (parent, grandparent, etc.).</p><p>When conflicts arise, the widget's own inline style sheet is always preferred to any inherited style sheet, irrespective of the specificity of the conflicting rules. Likewise, the parent widget's style sheet is preferred to the grandparent's, etc.</p><p>The behaviour is similar to what we see on the web.</p><blockquote><p>For more in depth examples see here: <a href="https://doc.qt.io/qt-5/stylesheet-syntax.html#cascading">https://doc.qt.io/qt-5/stylesheet-syntax.html#cascading</a></p></blockquote><h2><a aria-hidden="true" class="anchor" id="supported-properties"></a><a aria-hidden="true" class="hash-link" href="#supported-properties">#</a>Supported properties</h2><p>Since we are not running inside a web browser, there are few differences in the properties you could use in NodeGui vs in web.</p><p>The complete list is detailed here: <a href="https://doc.qt.io/qt-5/stylesheet-reference.html#list-of-properties">https://doc.qt.io/qt-5/stylesheet-reference.html#list-of-properties</a></p><p>Apart from the properties listed in the link, NodeGui also supports layout properties related to Flex. You can use all flex properties such as align-items, justify-content, flex, etc on all widgets. <a href="/docs/guides/layout">The layout styling will be coverted in more detail in the section: Layout.</a></p><h2><a aria-hidden="true" class="anchor" id="advanced-usage-setting-qobject-properties"></a><a aria-hidden="true" class="hash-link" href="#advanced-usage-setting-qobject-properties">#</a>Advanced usage (Setting QObject Properties)</h2><p>In Qt, every widget has certain properties set on them using something called as <a href="https://doc.qt.io/qt-5/qobject.html#Q_PROPERTY">Q_PROPERTY</a>. There are many q-properties that are defined on each widget already. You can also define custom qproperties in the native C++ code yourself too. What does it have to do with styling ? The thing is some of these properties can be altered using qt stylesheet. In Qt's terminology, these properties are called designable properties.</p><p>For example:</p><pre class="mdxCodeBlock_iHAB"><div class="codeBlockWrapper_2QGZ"><pre class="prism-code language-css codeBlock_19pQ" style="color:#d6deeb;background-color:#011627"><div class="token-line" style="color:#d6deeb"><span class="token selector" style="color:rgb(199, 146, 234);font-style:italic">MyLabel</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token property" style="color:rgb(128, 203, 196)">qproperty-alignment</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> AlignCenter</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"></span><span class="token selector" style="color:rgb(199, 146, 234);font-style:italic">MyGroupBox</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token property" style="color:rgb(128, 203, 196)">qproperty-titlecolor</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">rgb</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">100</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">200</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">100</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:#d6deeb"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"></span><span class="token selector" style="color:rgb(199, 146, 234);font-style:italic">QPushButton</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token property" style="color:rgb(128, 203, 196)">qproperty-iconsize</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">20</span><span class="token unit">px</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">20</span><span class="token unit">px</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1BYj">Copy</button></div></pre><p>You can discover these properties by following Qt's documentation or by running a simple google search like "center text in QLabel using stylesheet in Qt". These are advanced properties and in practice will come in use rarely but its good to know.</p><blockquote><p>More details : <a href="https://doc.qt.io/qt-5/stylesheet-syntax.html#setting-qobject-properties">https://doc.qt.io/qt-5/stylesheet-syntax.html#setting-qobject-properties</a></p></blockquote><hr/><p>In this section, we mostly covered the paint properties in the NodeGui stylesheet. The next section would cover on how you can use flex to layout your widgets with stylesheet.</p></div></article><div class="margin-top--xl margin-bottom--lg"><nav class="pagination-nav"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/docs/guides/tutorial"><h5 class="pagination-nav__link--sublabel">Previous</h5><h4 class="pagination-nav__link--label">« <!-- -->Learn the Basics</h4></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/docs/guides/layout"><h5 class="pagination-nav__link--sublabel">Next</h5><h4 class="pagination-nav__link--label">Layout<!-- --> »</h4></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_2wxO"><ul class="contents contents__left-border"><li><a href="#overview" class="contents__link">Overview</a></li><li><a href="#global-styles" class="contents__link">Global styles</a></li><li><a href="#inline-styles" class="contents__link">Inline styles</a></li><li><a href="#selectors" class="contents__link">Selectors</a></li><li><a href="#pseudo-states" class="contents__link">Pseudo states</a></li><li><a href="#cascading" class="contents__link">Cascading</a></li><li><a href="#supported-properties" class="contents__link">Supported properties</a></li><li><a href="#advanced-usage-setting-qobject-properties" class="contents__link">Advanced usage (Setting QObject Properties)</a></li></ul></div></div></div></div></div></main></div></div>
|
|
</div>
|
|
|
|
<script type="text/javascript" src="/runtime~main.7a412b5ea073938bd334.js"></script>
|
|
|
|
<script type="text/javascript" src="/main.3c22308242e28ead5e64.js"></script>
|
|
|
|
<script type="text/javascript" src="/0.821df7f17f7288aebb5e.js"></script>
|
|
|
|
<script type="text/javascript" src="/1.9b3d421a0f44576af60f.js"></script>
|
|
|
|
<script type="text/javascript" src="/2.27a81c22b5dfa23bfe9b.js"></script>
|
|
|
|
<script type="text/javascript" src="/component---theme-doc-legacy-page-9-e-7-ca5.d31182005d6c21dd63ac.js"></script>
|
|
|
|
<script type="text/javascript" src="/docsMetadata---docs-150-2d6.6e875209659be13f2970.js"></script>
|
|
|
|
<script type="text/javascript" src="/component---theme-doc-legacy-item-031-769.6e8a6ea08d218712d94a.js"></script>
|
|
|
|
<script type="text/javascript" src="/content---docs-guides-stylingfec-977.c0e2691c9103260d4124.js"></script>
|
|
|
|
<script type="text/javascript" src="/metadata---docs-guides-styling-9-ea-213.d5570c147002ef8e6bfe.js"></script>
|
|
|
|
</body>
|
|
</html> |