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 (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T04:31:52.000Z (about 2 years ago)
• Last Synced: 2024-04-24T22:02:49.040Z (9 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

Awesome Lists containing this project

• awesome-nodegui - React Native like stylesheet for React NodeGui - https://github.com/Solant/nodegui-stylesheet (Tools / Samples and Experiments)

README

        
# nodegui-stylesheet

![Codecov](https://img.shields.io/codecov/c/github/Solant/nodegui-stylesheet?style=flat-square)

![GitHub Workflow Status](https://img.shields.io/github/workflow/status/Solant/nodegui-stylesheet/Build?style=flat-square)

![David](https://img.shields.io/david/Solant/nodegui-stylesheet?style=flat-square)

![npm bundle size](https://img.shields.io/bundlephobia/min/nodegui-stylesheet?style=flat-square)

`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')

  }

});

```