Output("hello")
Output(123, {
label: "Final balance",
format: (d) => "$" + d,
overline: true,
bold: true
})
viewof x = Output(123, { label: tex`x` })
x
Output = (
value,
{ label = "Output", overline = false, bold = false, format = (d) => d } = {}
) =>
Object.assign(
html`<div style="
display: flex;
font: 13px/1.2 var(--sans-serif);
min-height: 25.5px;
align-items: center;
flex-wrap: nowrap;
width: calc(240px + 120px);
max-width: 100%;
padding-bottom: 1rem;
${bold ? "font-weight: bold;" : ""}
${overline ? "border-top: 1px solid rgb(118, 118, 118);" : ""}
">
<div style="
flex-shrink: 0;
align-self: start;
width: 120px;
margin-right: 6.5px;
padding: 5px 0 4px 0;
">
${label}
</div>
<div style="width: 100%;">
${format(value)}
</div>
</div>`,
{ value }
)
import { Text } from "@observablehq/inputs"
Text({
label: "Output",
format: (d) => "$" + d,
value: 123,
disabled: true
})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
