diff --git a/docs/api/NodeWidget.md b/docs/api/NodeWidget.md index 42b5255b5..76d83364a 100644 --- a/docs/api/NodeWidget.md +++ b/docs/api/NodeWidget.md @@ -80,7 +80,7 @@ Sets the layout manager for this widget to layout. It calls the native method [Q Sets the property that holds the widget's style sheet. It calls the native method [QWidget: styleSheet](https://doc.qt.io/qt-5/qwidget.html#styleSheet-prop). -- `styleSheet` string - String which holds the widget's style sheet. +- `styleSheet` string - String which holds the widget's style sheet. Make sure you create this string using `StyleSheet.create()` #### `widget.hide()` diff --git a/docs/api/synopsis.md b/docs/api/synopsis.md index 4438144aa..fc1b07a47 100644 --- a/docs/api/synopsis.md +++ b/docs/api/synopsis.md @@ -34,7 +34,8 @@ const { QMainWindow, QWidget, QLabel, - FlexLayout + FlexLayout, + StyleSheet } = require("@nodegui/nodegui"); const win = new QMainWindow(); @@ -51,7 +52,8 @@ label.setText("Hello World"); rootLayout.addWidget(label); win.setCentralWidget(centralWidget); win.setStyleSheet( - ` + StyleSheet.create( + ` #myroot { background-color: #009688; } @@ -60,6 +62,7 @@ win.setStyleSheet( font-weight: bold; } ` + ) ); win.show(); diff --git a/docs/development/styling.md b/docs/development/styling.md index 29037b5db..abb9d1cef 100644 --- a/docs/development/styling.md +++ b/docs/development/styling.md @@ -79,7 +79,7 @@ FlexItem adds methods like getFlexNode. #### YogaWidget -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. +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. 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. @@ -93,7 +93,7 @@ view.setStyleSheet(` `); ``` -Notice `qproperty-` prefix? These are the custom q-properties we defined in `YogaWidget.h` +Notice `qproperty-` prefix? These are the custom q-properties we defined in `YogaWidget.h`. We do not need to prefix `qproperty-` if a stylehsheet string is passed through `StyleSheet.create()`. StyleSheet.create has an autoprefixer which will do the right thing. #### NodeWidget diff --git a/docs/tutorial/first-app.md b/docs/tutorial/first-app.md index 3f0619860..2825a24b1 100644 --- a/docs/tutorial/first-app.md +++ b/docs/tutorial/first-app.md @@ -56,7 +56,8 @@ const { QMainWindow, QWidget, QLabel, - FlexLayout + FlexLayout, + StyleSheet } = require("@nodegui/nodegui"); const win = new QMainWindow(); @@ -73,7 +74,8 @@ label.setText("Hello World"); rootLayout.addWidget(label); win.setCentralWidget(centralWidget); win.setStyleSheet( - ` + StyleSheet.create( + ` #myroot { background-color: #009688; } @@ -82,6 +84,7 @@ win.setStyleSheet( font-weight: bold; } ` + ) ); win.show();