能观察到的to :有可能有自定义html的输入吗？

Question

我希望有多个输入，如Inputs.select，折叠成observablehq笔记本中的手风琴菜单。我成功地使用定制的html (js/css/html)，创建了一个手风琴菜单，但是我很难在手风琴菜单中添加输入。这里是一个带有手风琴菜单的observablehq笔记本。我想把这些投入作为第1节/第2节的一部分。

Answer 1

是啊！我有一些例子，在这个笔记本上。

您可以使用Inputs.form将多个输入组合在一个单元中-

viewof form = Inputs.form({
  option1: Inputs.checkbox(["A", "B"], {label: "Select some"}),
  option2: Inputs.range([0, 100], {label: "Amount", step: 1}),
  option3: Inputs.radio(["A", "B"], {label: "Select one"}),
  option4: Inputs.select(["A", "B"], {label: "Select one"})
})

您可以嵌套Inputs.form，并传递给它一个模板选项，将输入放在不同的手风琴部分：

viewof nestedForm = Inputs.form([
  Inputs.form({
    a: Inputs.range([0, 100], { label: "Amount", step: 1 }),
    b: Inputs.select(["A", "B"], { label: "Select one" })
  }),
  Inputs.form({
    a: Inputs.range([0, 100], { label: "Number", step: 1 }),
    b: Inputs.checkbox(["C", "D", "E"], { label: "Select any" })
  })
], {template: inputs => htl.html`<div>
  <details><summary>Section 1</summary>${inputs[0]}</details>
  <details><summary>Section 2</summary>${inputs[1]}</details>
</div>`})

​

​