Quarto logo.
  • 概述
  • 入门
  • 指南
  • 扩展
  • 参考
  • 画廊
  • 博客
  • 帮助
    • 报告错误
    • 询问问题
    • 常见问题
  1. 指南
  2. 交互性
  3. Observable JS
  4. 示例
  5. 布局
  • 指南
    • 撰写
      • Markdown基础
      • 图表
      • 表格
      • 图表
      • 简码
        • 占位符图像
        • Lorem Lipsum 文本
      • 视频
      • 嵌入
      • 标注块
      • 代码注释
      • 文章布局
      • 学术写作
        • 前言
        • 标题区块
        • 引用
        • 交叉引用
          • 基础
          • 选项
          • Div 语法
          • 自定义浮动
        • 创建可引用的文章
        • 附录
    • 计算
      • 使用 Python
      • 使用 R
      • 使用Julia
      • 使用 Observable
      • 行内代码
      • 渲染脚本文件
      • 执行选项
      • 参数
    • 工具
      • JupyterLab
        • JupyterLab 基础
        • JupyterLab 扩展
      • RStudio IDE
        • RStudio 基础
        • 可视化编辑器
          • 编辑器基础
          • 可重复性研究
          • 内容编辑
          • 快捷方式与选项
          • Markdown 输出
      • VS Code
        • VS Code 基础
        • 可视化编辑器
        • 笔记本编辑器
      • Neovim
      • 文本编辑器
    • 文档
      • HTML
        • HTML基础
        • HTML代码块
        • HTML 主题化
        • 包含其他格式
        • 灯箱图
        • 发布 HTML
      • PDF
        • PDF基础
        • PDF引擎
      • MS Word
        • Word基础知识
        • Word模板
      • Typst
        • Typst 基础
        • 自定义格式
      • Markdown
        • GitHub (GFM)
        • Hugo
        • Docusaurus
      • 所有格式
    • 演示
      • 概览
      • Revealjs
        • Reveal 基础
        • 演示幻灯片
        • 高级显示
        • Reveal 主题
      • PowerPoint
      • Beamer
    • 仪表盘
      • 概览
      • 使用仪表盘
        • 布局
        • 数据显示
        • 输入
        • 主题
        • 参数
        • 部署
      • 交互性
        • 概览
        • Python 的 Shiny
          • 开始
          • 运行仪表盘
          • 执行上下文
        • R 的 Shiny
          • 开始
          • 运行文档
          • 执行上下文
        • Observable JS
      • 示例
    • 网站
      • 创建网站
      • 网站导航
      • 创建博客
      • 网站草稿
      • 网站搜索
      • 网站工具
      • 关于页面
      • 列表页面
        • 文档列表
        • 自定义列表
    • 书籍
      • 创建一本书
      • 书籍结构
      • 书籍交叉引用
      • 自定义输出
    • 手稿
      • 入门
        • 撰写手稿
          • Jupyter Lab
          • VS Code
          • RStudio
        • 发布手稿
        • 后续步骤
      • 使用手稿
    • 交互性
      • 概览
      • Observable JS
        • 介绍
        • 库
        • 数据源
        • OJS 单元格
        • Shiny 反应式
        • 代码复用
        • 示例
          • 企鹅
          • 日晕图
          • Arquero
          • 人口
          • NOAA CO2
          • GitHub API
          • 布局
          • Shiny
            • K-Means
            • 分箱
            • 数据绑定
            • Covid 地图
      • Shiny
        • 介绍
        • 运行文档
        • 执行上下文
        • 外部资源
        • 示例
          • 老忠实喷泉
          • K-Means
          • 钻石
      • 小部件
        • Jupyter 小部件
        • R中的htmlwidgets
      • 组件布局
    • 发布
      • 发布基础
      • Quarto Pub
      • GitHub Pages
      • Posit Connect
      • Posit Cloud
      • Netlify
      • Confluence
      • Hugging Face Spaces
      • 其他服务
      • 使用 CI 发布
    • 项目
      • 项目基础
      • 管理执行
      • 项目配置文件
      • 环境变量
      • 项目脚本
      • 虚拟环境
      • 在 Quarto 中使用 Binder
    • 高级
      • 包含文件
      • 变量
      • 页面布局
      • 文档语言
      • 条件内容
      • 笔记本过滤器
      • Jupyter
        • Jupyter 内核执行
  1. 指南
  2. 交互性
  3. Observable JS
  4. 示例
  5. 布局

布局

你可以通过多种方式控制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
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}
GitHub API
Shiny
Source Code
---
title: "布局"
format:
  html:
    echo: false
    code-tools: true
    page-layout: full
    toc: false
---

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

## `page-layout: full`

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

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

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

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

::: {#penguins-tabset .panel-tabset .ojs-track-layout}
## 图表

```{ojs}
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(),
    ]
  }
)
```

## 数据

```{ojs}
Inputs.table(filtered)
```
:::

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

```{ojs}
//| echo: true
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`。

```{ojs}
//| echo: true
width
```

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

```{ojs}
//| echo: true
layoutWidth
```

Proudly supported by Posit

  • 关于

  • 常见问题

  • 许可证

  • 商标

  • Edit this page
  • Report an issue