FlexLayout

FlexLayout es un componente personalizado que ayuda a organizar todos los widgets usando flex.

Un FlexLayout se puede usar para organizar todos los widgets en una pantalla.

Ejemplo

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("Hola Mundo");

const subtitle = new QLabel();
subtitle.setText("Este es un Subtítulo");

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

En este ejemplo se muestra cómo FlexLayout se puede usar para organizar todos los widgets. Puedes estilizar este contenedor flex usando el nombre de objeto.

flex.css

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

A continuación se muestra un ejemplo de cómo puedes usar CSS para personalizar el contenedor FlexLayout.

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