FlexLayout

FlexLayout is a custom component that helps to layout all children widgets using flexbox

A FlexLayout can be used to layout all children widgets using flex.

Example

flex.ts

import { FlexLayout, QWidget, QLabel } from '@vixen-js/core';

const view = new QWidget();
const flex = new FlexLayout();
flex.setObjectName("flex_layout");
view.setLayout(flex);

const title = new QLabel();
title.setText("Hello World");

const subtitle = new QLabel();
subtitle.setText("This is a subtitle");

flex.addWidget(title);
flex.addWidget(subtitle);

On this example you can see how FlexLayout can be used to layout all children widgets. You can style this flex container with CSS using the Object Name.

flex.css

#flex_layout {
    flex-direction: column;
    padding: 10px;
    background-color: #f0f0f0;
    color: #333;
}

Now you can set this stylesheet in your main.ts file.

flex.ts

import { FlexLayout, QWidget, QLabel } from '@vixen-js/core';
import styles from './flex.css?raw'; // New

const view = new QWidget();
const flex = new FlexLayout();
flex.setObjectName("flex_layout");
view.setLayout(flex);

const title = new QLabel();
title.setText("Hello World");

const subtitle = new QLabel();
subtitle.setText("This is a subtitle");

flex.addWidget(title);
flex.addWidget(subtitle);
view.setStyleSheet(String(styles)); // New