css - Golden-layout cu conținut interior receptiv

Folosesc Golden-layout în aplicația mea Angular 7 pentru a afișa unele componente ca widget-uri într-o grilă de widget-uri. Și toate widget-urile au posibilitatea de a fi redimensionate. Am nevoie, de exemplu, să măresc sau să micșorez font-size în timp ce redimensionez widget-ul.

Am încercat să folosesc vw pentru conținutul intern și alte lucruri care sunt comune pentru redimensionarea ferestrei. Dar nu a funcționat deoarece depinde de viewport și viewport-ul meu este încă același, doar că am schimbat dimensiunea widgetului.

Există opțiuni pentru a face conținutul din interiorul widget-urilor să fie receptiv?

Aici este un exemplu pe stackblitz (nu este al meu) - https://stackblitz.com/edit/angular-4aughc

Răspuns #1

În golden-layout, poți asculta evenimentul resize al unui container și apoi aplica orice modificări dorești odată ce este declanșat.

export class MyComponent {

    constructor(@Inject("Container") public container: Container) { 
        container.on('resize', () => {
            this.resize();
        });
    }

    resize() {
        if ($('.my-component').width() < 500) {
            $('.my-component').addClass('smallText');
        } else {
            $('.my-component').removeClass('smallText');
        }
    }

}

Acest lucru v-ar permite să faceți lucruri pe baza dimensiunii containerului părinte în loc de dimensiunea ferestrei.