【问题标题】:Golden-layout with responsive content ineer具有响应式内容的黄金布局
【发布时间】:2019-09-06 15:53:09
【问题描述】:

我在我的 Angular 7 应用程序中使用 Golden-layout 将一些组件显示为小部件网格中的小部件。并且所有小部件都可以调整大小。例如,我需要在调整小部件大小时增加或缩小font-size

我尝试将vw 用于更简单的内容和其他常见的调整窗口大小的内容。但它不起作用,因为它取决于视口,我的视口仍然相同,只是改变了小部件的大小。

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

这是关于 stackblitz 的示例(不是我的)-https://stackblitz.com/edit/angular-4aughc

【问题讨论】:

    标签: css angular typescript responsive golden-layout


    【解决方案1】:

    在黄金布局中,您可以监听容器的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');
            }
        }
    
    }
    

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

    【讨论】:

      猜你喜欢
      • 2015-03-14
      • 2022-01-19
      • 1970-01-01
      • 1970-01-01
      • 2019-02-07
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-01-20
      相关资源
      最近更新 更多