Published
Edited
Feb 25, 2022
7 stars
mount(() => {
const cards = [...Generators.range(1, 10)].map(index => ({ label: index }))
return html`
<${ScrollContainer}>
<${CardContainer}>
<${Web.For} each=${cards}>
${card =>
html`<${Card} isSticky>${card.label}</>`
}
</>
</>
</>
`
})
Card = props => {
const classProps = Twind.tx`
flex flex-[1_0]
box-border overflow-y-auto
h-[300px] w-[200px] max-w-[200px]
border border-black border-r-0
bg-white text-black
items-center justify-center
${props.isSticky !== undefined && `!bg-indigo-400 sticky left-0 top-0`}
`
return html`<div class=${classProps} ...${props} />`
}
CardContainer = props => {
const classProps = tw`
flex
bg-white
`
return html`<div class=${classProps} ...${props} />`
}
ScrollContainer = props => {
const classProps = tw`
flex flex-[1_1]
box-border overflow-y-hidden overflow-x-auto
py-[20px]
bg-[#ccc]
`
return html`<div class=${classProps} ...${props} />`
}
mount(() => {
const style = Twind.style({})
return html`<div class=${style({ class: "font-bold" })}>text</div>`
})
tw(Twind.style({ label: "button" })({ color: 'gray', size: 'large', outlined: 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.
