根据单元格输出长度和类型,使用 Stylus 为 Jupyterlab 配置自定义滚动行为

问题描述 投票:0回答:0

这个问题是这个线程的后续问题:Jupyterlab active scroll bars for long results

在用 Jupyterlab 打开的笔记本中,当面对不同类型(绘图/文本)和不同长度的单元格输出时,根据检查这些单元格的条件为每个单元格设置不同的滚动行为会很有趣。

在我的例子中,当输出包含绘图并且输出少于 50 行时我不希望滚动,但是当满足这些条件时激活滚动和较小的单元格高度。

前面提到的问题建议使用基于CSS的浏览器扩展Stylus,有没有办法修改这个Stylus配置文件以包含这个自定义行为?

.jp-OutputArea-child {
    max-height: 33em;
}

.jp-OutputArea-child .jp-OutputArea-output {
    overflow: auto;
}

我在 CSS 方面的经验非常有限,我的想法是(伪代码):

IF OutputArea.height >= 50 AND OutputArea.hasPlot == False: 
{
  .jp-OutputArea-child {
      max-height: 33em;
  }
  .jp-OutputArea-child .jp-OutputArea-output {
      overflow: auto;
  }
}

ELIF OutputArea.hasPlot == True: 
{
  .jp-OutputArea-child {
      max-height: None; 
  }
  .jp-OutputArea-child .jp-OutputArea-output {
      overflow: disabled; 
  }
}

ELIF OutputArea.height < 50 AND OutputArea.hasPlot == False: 
{
  .jp-OutputArea-child {
      max-height: None;
  }
  .jp-OutputArea-child .jp-OutputArea-output {
      overflow: disabled;
  }
}

当然我不希望任何检查都是这种类型的,并且检查可能会根据绘图类型(matplotlib/plotly/openturns)而有所不同,即使现在 matplotlib 检查就足够了。

还有 Stylus 似乎可以使用 javascript,但我的知识也有同样的局限性。并且 似乎 CSS 无法处理异常 这种自定义行为可能必须传递 style.js 文件。

是否有已经实现这些行为的 jupyterlab 设置或扩展,Stylus 配置文件是否可以包含这些条件,或者是使用自定义 javascript 扩展的唯一方法?

javascript css scroll jupyter-lab stylus
© www.soinside.com 2019 - 2024. All rights reserved.