Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Solant/nodegui-stylesheet
react-native stylesheets implementation for nodegui and react-nodegui
https://github.com/Solant/nodegui-stylesheet
css no nodegui react-nodegui stylesheet stylesheets
Last synced: 2 months ago
JSON representation
react-native stylesheets implementation for nodegui and react-nodegui
- Host: GitHub
- URL: https://github.com/Solant/nodegui-stylesheet
- Owner: Solant
- License: mit
- Created: 2020-02-07T19:24:14.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T04:31:52.000Z (over 1 year ago)
- Last Synced: 2024-03-24T17:20:32.620Z (3 months ago)
- Topics: css, no, nodegui, react-nodegui, stylesheet, stylesheets
- Language: TypeScript
- Homepage:
- Size: 389 KB
- Stars: 11
- Watchers: 1
- Forks: 1
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-nodegui - React Native like stylesheet for React NodeGui - https://github.com/Solant/nodegui-stylesheet (Tools / Samples and Experiments)
README
# nodegui-stylesheet
`react-native` inspired implementation of [stylesheet](https://facebook.github.io/react-native/docs/stylesheet), written in typescript
Compatible with plain `nodegui` and `react-nodegui`, both JS and TS.
# Why
Despite web nature of css styling of Qt widgets, sometimes it can fall flat due to some strange inconsistencies and differences between Qt and web browser
Here is a list of inconsistencies that gets handled:
1. font-size value requires unit and must be without quotes
2. some string keywords should not be wrapped in quotes
3. [lineedit-password-character-prop](https://doc.qt.io/qt-5/stylesheet-reference.html#lineedit-password-character-prop) can accept both unicode number and string (string will be converted to unicode number)
# Example
1 Create a stylesheet
```javascript
import { create } from 'nodegui-stylesheet';
const style = create({
wrapper: {
flex: 1
},
logo: {
fontSize: 14
}
});
```
2 Use stylesheet properties instead of long css strings
```typescript jsx
// with nogegui-react
Hello
```
```javascript
// with plain nogegui
const label = new QLabel();
label.setText("Hello");
label.setInlineStyle(style.logo);
```
3 Use specific units if you need them, [list of supported units from qt docs](https://doc.qt.io/qt-5/stylesheet-reference.html#length):
- px: pixels
- pt: the size of one point (i.e., 1/72 of an inch)
- em: the em width of the font (i.e., the width of 'M')
- ex: the ex width of the font (i.e., the height of 'x')
```javascript
import { create, units } from 'nodegui-stylesheet';
const style = create({
wrapper: {
flex: 1
},
logo: {
marginTop: units(1, 'ex')
}
});
```