具有响应式内容播放器的黄金布局

时间:2019-04-16 13:57:01

标签: css angular typescript responsive golden-layout

我在Angular 7应用中使用Golden-layout在小部件网格中将某些组件显示为小部件。并且所有小部件都具有调整大小的功能。例如,在调整窗口小部件大小时,我需要增加font-size或使其更小。

我尝试将vw用于内部内容和其他用于调整窗口大小的内容。但这没有用,因为它取决于视口,而我的视口仍然相同,只是更改了小部件的大小。

是否有使小部件内的内容具有响应性的选项?

以下是关于堆叠闪电战的示例(不是我的)-https://stackblitz.com/edit/angular-4aughc

1 个答案:

答案 0 :(得分:0)

在黄金布局中,您可以监听容器的 resize 事件,然后在触发后应用您想要的任何更改。

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');
        }
    }

}

这将允许您根据父容器大小而不是窗口大小执行操作。