布局

你可以通过多种方式控制OJS内容的布局。

page-layout: full

此示例使用page-layout: full使其内容占据页面的整个宽度：

---
title: "布局"
format: 
  html: 
    page-layout: full
---

将输入内容包含在一个侧边栏面板中，将输出内容包含在一个选项卡面板中（点击右上角的“代码”按钮以查看完整的源代码）：

viewof bill_length_min = Inputs.range(
  [32, 50], 
  {value: 35, step: 1, label: "嘴峰长度 (最小):"}
)
viewof islands = Inputs.checkbox(
  ["Torgersen", "Biscoe", "Dream"], 
  { value: ["Torgersen", "Biscoe"], 
    label: "岛屿:"
  }
)

嘴峰长度 (最小):

bill_length_min = 35

岛屿:

TorgersenBiscoeDream

islands = Array(2) ["Torgersen", "Biscoe"]

图表

Plot.rectY(filtered, 
  Plot.binX(
    {y: "count"}, 
    {x: "body_mass_g", fill: "species", thresholds: 20}
  ))
  .plot({
    facet: {
      data: filtered,
      x: "sex",
      y: "species",
      marginRight: 80
    },
    marks: [
      Plot.frame(),
    ]
  }
)

数据

Inputs.table(filtered)

根据用户的输入读取和过滤数据：

data = FileAttachment("palmer-penguins.csv").csv({typed: true})
filtered = data.filter(function(penguin) {
  return bill_length_min < penguin.bill_length_mm &&
         islands.includes(penguin.island);
})

width 和 layoutWidth: 细粒度布局跟踪

与ObservableHQ类似，ojs单元格支持响应式width，它会跟踪主HTML元素的clientWidth。

width

1264

此外，如果你需要特定布局部分的宽度，请在div中使用CSS类ojs-track-layout。Quarto的OJS运行时会跟踪所有这样的div，并将其记录在layoutWidth中。在此示例中，上面的选项卡集的id为penguins-tabset，你可以在下面看到其clientWidth的响应式变化。如果此网页足够宽，侧边栏将占用一些空间，结果选项卡集的宽度将变小：

layoutWidth

Object {penguins-tabset: 1264}